diff --git a/.scd/plans/20261109-233523-d3-reference-corpus/decisions.md b/.scd/plans/20261109-233523-d3-reference-corpus/decisions.md new file mode 100644 index 0000000..59a703f --- /dev/null +++ b/.scd/plans/20261109-233523-d3-reference-corpus/decisions.md @@ -0,0 +1,19 @@ +--- +status: approved +version: 1 +created_at: 2026-11-09T23:35:23+08:00 +updated_at: 2026-11-09T23:35:23+08:00 +recorded_timezone: Asia/Shanghai +--- + +# 决策与事件 + +- 事件ID：DEC-1 +- 类型：开工 +- 文件及文档版本：本目录四份 v1；依据 Issue #125 契约 + Initiative #122 图版本 2 确认 + 用户执行授权 +- 目标Git SHA：main @ 5d30ce4 +- 用户实际依据：Initiative 摘要"ok"（含"全部搬入"决策）+ "全部完成 scdexcute" +- 任务或Issue范围：Issue #125 范围；NOTICES 仅追加 vendor 两节 +- occurred_at：null +- recorded_at：2026-11-09T23:35:23+08:00 +- 未决选择：无 diff --git a/.scd/plans/20261109-233523-d3-reference-corpus/implementation.md b/.scd/plans/20261109-233523-d3-reference-corpus/implementation.md new file mode 100644 index 0000000..ce46344 --- /dev/null +++ b/.scd/plans/20261109-233523-d3-reference-corpus/implementation.md @@ -0,0 +1,11 @@ +--- +status: approved +version: 1 +created_at: 2026-11-09T23:35:23+08:00 +updated_at: 2026-11-09T23:35:23+08:00 +recorded_timezone: Asia/Shanghai +--- + +# 实施计划 + +tarball 提取（/tmp/d3-corpus.*）→ 拷贝入 data/vendor/ → 计数与抽样 sha256 对比源 → NOTICES → 测试 → 三平台安装验证 → PR/验收/合并/关单/图版本 5 diff --git a/.scd/plans/20261109-233523-d3-reference-corpus/plan.md b/.scd/plans/20261109-233523-d3-reference-corpus/plan.md new file mode 100644 index 0000000..b770f33 --- /dev/null +++ b/.scd/plans/20261109-233523-d3-reference-corpus/plan.md @@ -0,0 +1,13 @@ +--- +status: approved +version: 1 +created_at: 2026-11-09T23:35:23+08:00 +updated_at: 2026-11-09T23:35:23+08:00 +recorded_timezone: Asia/Shanghai +--- + +# 任务索引 + +- 任务与Issue：Delivery Issue #125（design-reference-corpus），Initiative #122 图版本 4 +- 基线来源：main @ 5d30ce4（#129 合并后） +- 批准与开工事件：decisions.md DEC-1 diff --git a/.scd/plans/20261109-233523-d3-reference-corpus/requirements.md b/.scd/plans/20261109-233523-d3-reference-corpus/requirements.md new file mode 100644 index 0000000..c32f09c --- /dev/null +++ b/.scd/plans/20261109-233523-d3-reference-corpus/requirements.md @@ -0,0 +1,13 @@ +--- +status: approved +version: 1 +created_at: 2026-11-09T23:35:23+08:00 +updated_at: 2026-11-09T23:35:23+08:00 +recorded_timezone: Asia/Shanghai +--- + +# 需求（Issue #125 契约） + +- data/vendor/design-systems/：plugin87 design-systems/ 全量（实测 2148 文件/31MB；Issue 中"4293"系 tree API 重复计数，搬运范围"全部"不变，验收以与源一致为准） +- data/vendor/：ui-ux-pro-max 的 google-fonts.csv、phosphor-icons-upstream.json、google-font-licenses.json +- NOTICES 追加节；A1 计数与源一致+抽样校验和；A2 全量测试绿；A3 三平台 refresh+verify-install 含完整语料 diff --git a/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md b/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md index 09e60b3..fd381cd 100644 --- a/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md +++ b/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md @@ -15,3 +15,9 @@ - 许可：MIT License，版权归属上游作者 - 收录范围：`knowledge/`（styles/typography/products/ui-reasoning/ux-guidelines/icons/charts/motion/landing 共 9 张 CSV + catalog-summary.json + data-provenance.json）、`stacks/`（22 张框架 CSV） - 改动：无（原样搬运）；检索脚本 `scripts/search.mjs` 为本项目自研（node 零依赖），非上游代码 + +## 大体量参考语料（vendor/） + +- `vendor/design-systems/`：来自 plugin87/ux-ui-agent-skills（MIT License，，main 分支）design-systems/ 目录全量原样收录（2148 文件，约 31MB；设计系统实物参照语料） +- `vendor/google-fonts.csv`、`vendor/google-font-licenses.json`、`vendor/phosphor-icons-upstream.json`：来自 nextlevelbuilder/ui-ux-pro-max-skill（MIT License，，main 分支）data/ 目录原样收录；Google Fonts 元数据及其许可声明、Phosphor Icons 上游数据随文件内附 +- 改动：无（原样搬运） diff --git a/skills/scd-uiux/data/vendor/design-systems/catalog.md b/skills/scd-uiux/data/vendor/design-systems/catalog.md new file mode 100644 index 0000000..602af2f --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/catalog.md @@ -0,0 +1,2330 @@ +# Design-system catalog + +Generated by `python3 scripts/design_systems.py catalog > design-systems/catalog.md`. +Do not edit by hand: `tests/meta/registry.test.mjs` fails when this file and +`design-systems/library/` disagree. + +An npm install carries no spec until one is asked for: +`node scripts/library.mjs get ` fetches it and checks its sha256. + +**2,144 systems in 58 categories.** To find one, searching is faster +than reading: `python3 scripts/design_systems.py search `, or the +`get_design_system` MCP tool. + +## Agencies & Studios (86) + +- [`14islands`](library/14islands/DESIGN.md) 14islands +- [`18-years-of-buro`](library/18-years-of-buro/DESIGN.md) 18 Years of Büro +- [`2xa-studio`](library/2xa-studio/DESIGN.md) 2xA Studio +- [`accenture`](library/accenture/DESIGN.md) Accenture +- [`akqa`](library/akqa/DESIGN.md) AKQA +- [`are-na`](library/are-na/DESIGN.md) Are.na +- [`area-17`](library/area-17/DESIGN.md) AREA 17 +- [`ashley-brooke`](library/ashley-brooke/DESIGN.md) Ashley Brooke Creative Studio +- [`awwwards`](library/awwwards/DESIGN.md) Awwwards +- [`balance-4`](library/balance-4/DESIGN.md) Balance +- [`bbdo`](library/bbdo/DESIGN.md) BBDO +- [`boc-studio`](library/boc-studio/DESIGN.md) Boc.Studio +- [`buck`](library/buck/DESIGN.md) BUCK +- [`caffe-design`](library/caffe-design/DESIGN.md) Caffè Design +- [`cappen-4`](library/cappen-4/DESIGN.md) Cappen +- [`chipsa`](library/chipsa/DESIGN.md) Chipsa +- [`code-and-theory`](library/code-and-theory/DESIGN.md) Code and Theory +- [`collins`](library/collins/DESIGN.md) COLLINS +- [`cuberto`](library/cuberto/DESIGN.md) Cuberto +- [`dapper`](library/dapper/DESIGN.md) Dapper +- [`darkroom-engineering`](library/darkroom-engineering/DESIGN.md) darkroom.engineering +- [`deloitte`](library/deloitte/DESIGN.md) Deloitte Southeast Asia +- [`digitalists-1`](library/digitalists-1/DESIGN.md) digitalists +- [`dogstudio`](library/dogstudio/DESIGN.md) Dogstudio +- [`dolsten-co`](library/dolsten-co/DESIGN.md) Dolsten & Co. +- [`double-play`](library/double-play/DESIGN.md) Double Play +- [`dribbble`](library/dribbble/DESIGN.md) Dribbble +- [`droga5`](library/droga5/DESIGN.md) Droga5 +- [`dropbox-brand`](library/dropbox-brand/DESIGN.md) Dropbox Brand Guidelines +- [`elva`](library/elva/DESIGN.md) Elva +- [`estrela`](library/estrela/DESIGN.md) Estrela Studio +- [`evolve-2`](library/evolve-2/DESIGN.md) Made in Evolve +- [`ey`](library/ey/DESIGN.md) EY +- [`fantasy`](library/fantasy/DESIGN.md) Fantasy +- [`first-frame-2`](library/first-frame-2/DESIGN.md) First Frame +- [`frog`](library/frog/DESIGN.md) frog +- [`hello-monday`](library/hello-monday/DESIGN.md) Hello Monday +- [`hobro-digital`](library/hobro-digital/DESIGN.md) HOBRO +- [`homerun`](library/homerun/DESIGN.md) HOMERUN Creative Things +- [`huge`](library/huge/DESIGN.md) Huge +- [`ideo`](library/ideo/DESIGN.md) IDEO +- [`inkfish`](library/inkfish/DESIGN.md) Inkfish +- [`instrument`](library/instrument/DESIGN.md) Instrument +- [`juice-agency`](library/juice-agency/DESIGN.md) Juice +- [`koto`](library/koto/DESIGN.md) Koto +- [`kpmg`](library/kpmg/DESIGN.md) KPMG +- [`kvs-studio`](library/kvs-studio/DESIGN.md) KVS Studio +- [`landor`](library/landor/DESIGN.md) Landor +- [`letude-creative-studio`](library/letude-creative-studio/DESIGN.md) L'Étude +- [`lidar-drone-scanning`](library/lidar-drone-scanning/DESIGN.md) Aevion Lidar Drone Scanning +- [`locomotive`](library/locomotive/DESIGN.md) Locomotive +- [`m-c-4-0`](library/m-c-4-0/DESIGN.md) Mallard & Claret +- [`mammoth-murals`](library/mammoth-murals/DESIGN.md) Mammoth Murals +- [`manvsmachine`](library/manvsmachine/DESIGN.md) ManvsMachine +- [`marie-antoinette`](library/marie-antoinette/DESIGN.md) Marie Antoinette +- [`mccann`](library/mccann/DESIGN.md) McCann +- [`meer-mohsin`](library/meer-mohsin/DESIGN.md) Meer Mohsin +- [`metalab`](library/metalab/DESIGN.md) Metalab +- [`miux-studio`](library/miux-studio/DESIGN.md) MIUX Studio +- [`monolog`](library/monolog/DESIGN.md) MONOLOG +- [`noomo-showcase`](library/noomo-showcase/DESIGN.md) Noomo Showcase +- [`norgram-co`](library/norgram-co/DESIGN.md) Norgram +- [`ogilvy`](library/ogilvy/DESIGN.md) Ogilvy +- [`orage`](library/orage/DESIGN.md) Orage Studio +- [`oryzo-ai`](library/oryzo-ai/DESIGN.md) ORYZO AI +- [`pentagram`](library/pentagram/DESIGN.md) Pentagram +- [`phantom-land`](library/phantom-land/DESIGN.md) Phantom Studios +- [`produx-design`](library/produx-design/DESIGN.md) Produx Design +- [`pwc`](library/pwc/DESIGN.md) PwC +- [`r-ga`](library/r-ga/DESIGN.md) R/GA +- [`radaville`](library/radaville/DESIGN.md) Radaville Studio +- [`ramotion`](library/ramotion/DESIGN.md) Ramotion +- [`ribbit`](library/ribbit/DESIGN.md) Ribbit +- [`siena-film-foundation`](library/siena-film-foundation/DESIGN.md) Siena Film Foundation +- [`squarespace-foundations`](library/squarespace-foundations/DESIGN.md) Squarespace Foundations +- [`studio-freight`](library/studio-freight/DESIGN.md) Studio Freight +- [`studio-nuts-r`](library/studio-nuts-r/DESIGN.md) StudioNuts® +- [`the-lookback`](library/the-lookback/DESIGN.md) The Lookback +- [`the-power-of-storytelling`](library/the-power-of-storytelling/DESIGN.md) The Power of Storytelling +- [`u-x-machina`](library/u-x-machina/DESIGN.md) U x Machina +- [`unseen-studio-2025-wrapped`](library/unseen-studio-2025-wrapped/DESIGN.md) Unseen Studio Year in Review 2025 +- [`voku-studiotm`](library/voku-studiotm/DESIGN.md) Voku.Studio™ +- [`wieden-kennedy`](library/wieden-kennedy/DESIGN.md) Wieden+Kennedy +- [`wolff-olins`](library/wolff-olins/DESIGN.md) Wolff Olins +- [`work-co`](library/work-co/DESIGN.md) Work & Co +- [`wpp`](library/wpp/DESIGN.md) WPP + +## AI (17) + +- [`anthropic`](library/anthropic/DESIGN.md) Anthropic +- [`baidu`](library/baidu/DESIGN.md) Baidu +- [`character-ai`](library/character-ai/DESIGN.md) Character.AI +- [`databricks`](library/databricks/DESIGN.md) Databricks +- [`gemini`](library/gemini/DESIGN.md) Google Gemini +- [`google`](library/google/DESIGN.md) Google +- [`google-deepmind`](library/google-deepmind/DESIGN.md) Google DeepMind +- [`huggingface`](library/huggingface/DESIGN.md) Hugging Face +- [`jasper`](library/jasper/DESIGN.md) Jasper +- [`midjourney`](library/midjourney/DESIGN.md) Midjourney +- [`palantir`](library/palantir/DESIGN.md) Palantir +- [`perplexity`](library/perplexity/DESIGN.md) Perplexity +- [`scale-ai`](library/scale-ai/DESIGN.md) Scale AI +- [`snowflake`](library/snowflake/DESIGN.md) Snowflake +- [`stability-ai`](library/stability-ai/DESIGN.md) Stability AI +- [`synthesia`](library/synthesia/DESIGN.md) Synthesia +- [`v0`](library/v0/DESIGN.md) v0 + +## AI & LLM (1) + +- [`openai`](library/openai/DESIGN.md) OpenAI + +## AI & LLM Platforms (14) + +- [`claude`](library/claude/DESIGN.md) Claude +- [`cohere`](library/cohere/DESIGN.md) Cohere +- [`elevenlabs`](library/elevenlabs/DESIGN.md) ElevenLabs +- [`groq`](library/groq/DESIGN.md) Groq +- [`minimax`](library/minimax/DESIGN.md) MiniMax +- [`mistral-ai`](library/mistral-ai/DESIGN.md) Mistral AI +- [`ollama`](library/ollama/DESIGN.md) Ollama +- [`opencode-ai`](library/opencode-ai/DESIGN.md) OpenCode +- [`replicate`](library/replicate/DESIGN.md) Replicate +- [`runwayml`](library/runwayml/DESIGN.md) Runway +- [`together-ai`](library/together-ai/DESIGN.md) Together AI +- [`voltagent`](library/voltagent/DESIGN.md) VoltAgent +- [`weights-and-biases`](library/weights-and-biases/DESIGN.md) Weights & Biases +- [`x-ai`](library/x-ai/DESIGN.md) SpaceXAI (x.ai) + +## Airlines (21) + +- [`air-france`](library/air-france/DESIGN.md) Air France +- [`air-new-zealand`](library/air-new-zealand/DESIGN.md) Air New Zealand +- [`airbus`](library/airbus/DESIGN.md) Airbus +- [`american-airlines`](library/american-airlines/DESIGN.md) American Airlines +- [`ana`](library/ana/DESIGN.md) ANA (All Nippon Airways) — US English site +- [`boeing`](library/boeing/DESIGN.md) Boeing +- [`cathay-pacific-g`](library/cathay-pacific-g/DESIGN.md) Cathay Pacific +- [`delta`](library/delta/DESIGN.md) Delta Air Lines +- [`emirates`](library/emirates/DESIGN.md) Emirates +- [`finnair`](library/finnair/DESIGN.md) Finnair +- [`jetblue`](library/jetblue/DESIGN.md) JetBlue +- [`klm`](library/klm/DESIGN.md) KLM Royal Dutch Airlines +- [`lufthansa`](library/lufthansa/DESIGN.md) Lufthansa +- [`qantas`](library/qantas/DESIGN.md) Qantas +- [`qatar-airways`](library/qatar-airways/DESIGN.md) Qatar Airways +- [`ryanair`](library/ryanair/DESIGN.md) Ryanair +- [`singapore-airlines`](library/singapore-airlines/DESIGN.md) Singapore Airlines +- [`southwest-airlines`](library/southwest-airlines/DESIGN.md) Southwest Airlines +- [`turkish-airlines`](library/turkish-airlines/DESIGN.md) Turkish Airlines +- [`united-airlines-g`](library/united-airlines-g/DESIGN.md) United Airlines +- [`virgin-atlantic`](library/virgin-atlantic/DESIGN.md) Virgin Atlantic + +## Architecture & Interiors (43) + +- [`anuc-home`](library/anuc-home/DESIGN.md) Anuc Home +- [`arqui9-visualisation`](library/arqui9-visualisation/DESIGN.md) Arqui9 Visualisation +- [`brand-in-the-open`](library/brand-in-the-open/DESIGN.md) Base Brand Guidelines +- [`cominvi`](library/cominvi/DESIGN.md) CoMinVi +- [`creative-giants`](library/creative-giants/DESIGN.md) Creative Giants +- [`dhk-architects`](library/dhk-architects/DESIGN.md) dhk Architects +- [`digital-design-days-x`](library/digital-design-days-x/DESIGN.md) Digital Design Days Palermo (DDDx) +- [`era-residence`](library/era-residence/DESIGN.md) ERA Residence +- [`explore-primland`](library/explore-primland/DESIGN.md) Primland Residences +- [`fluid-glass`](library/fluid-glass/DESIGN.md) Fluid Glass +- [`gkc-architecture-design`](library/gkc-architecture-design/DESIGN.md) GKC Architecture & Design +- [`house-of-honey-1`](library/house-of-honey-1/DESIGN.md) House of Honey +- [`hubtown`](library/hubtown/DESIGN.md) Hubtown +- [`illoca`](library/illoca/DESIGN.md) illoca +- [`impronta`](library/impronta/DESIGN.md) Impronta +- [`internalities`](library/internalities/DESIGN.md) Internalities +- [`joby`](library/joby/DESIGN.md) Joby Aviation +- [`jonite`](library/jonite/DESIGN.md) Jonite +- [`kaleida`](library/kaleida/DESIGN.md) Kaleida +- [`kononenko-architectural-bureau`](library/kononenko-architectural-bureau/DESIGN.md) Kononenko Architectural Bureau +- [`l-i-s-a`](library/l-i-s-a/DESIGN.md) L.I.S.A. by Locomotive +- [`ledger-brandbook`](library/ledger-brandbook/DESIGN.md) Ledger Brandbook +- [`lightship-1`](library/lightship-1/DESIGN.md) Lightship +- [`likova`](library/likova/DESIGN.md) LIKOVA +- [`lusano`](library/lusano/DESIGN.md) Lusano +- [`marvell-tile-stone`](library/marvell-tile-stone/DESIGN.md) Marvell Tile & Stone +- [`mosbys-files`](library/mosbys-files/DESIGN.md) Mosby's Files +- [`native`](library/native/DESIGN.md) Native +- [`nine-to-five`](library/nine-to-five/DESIGN.md) Nine To Five Studio +- [`outsource-consultants-inc`](library/outsource-consultants-inc/DESIGN.md) Outsource Consultants, Inc. +- [`paisana-house`](library/paisana-house/DESIGN.md) PAISANA(House) +- [`quiet-cubes`](library/quiet-cubes/DESIGN.md) QuietCubes +- [`sculpting-harmony`](library/sculpting-harmony/DESIGN.md) Sculpting Harmony +- [`shed`](library/shed/DESIGN.md) Shed +- [`silver-pinewood-residences`](library/silver-pinewood-residences/DESIGN.md) Silver Pinewood Residences +- [`springs`](library/springs/DESIGN.md) Springs +- [`studio-dado`](library/studio-dado/DESIGN.md) Studio DADO +- [`studio-x`](library/studio-x/DESIGN.md) Studio X +- [`sui`](library/sui/DESIGN.md) Sui +- [`telha-clarke`](library/telha-clarke/DESIGN.md) Telha Clarke +- [`trawelt`](library/trawelt/DESIGN.md) Trawelt +- [`vaulk`](library/vaulk/DESIGN.md) Vaulk +- [`watson`](library/watson/DESIGN.md) Watson + +## Atomic CSS & Utilities (4) + +- [`open-props`](library/open-props/DESIGN.md) Open Props +- [`pico-css`](library/pico-css/DESIGN.md) Pico CSS +- [`tremor`](library/tremor/DESIGN.md) Tremor +- [`unocss`](library/unocss/DESIGN.md) UnoCSS + +## Automotive (32) + +- [`audi`](library/audi/DESIGN.md) Audi (audi.com corporate site) +- [`bmw`](library/bmw/DESIGN.md) BMW +- [`bmw-m`](library/bmw-m/DESIGN.md) BMW M +- [`bosch`](library/bosch/DESIGN.md) Bosch +- [`bugatti`](library/bugatti/DESIGN.md) Bugatti +- [`byd`](library/byd/DESIGN.md) BYD USA +- [`continental`](library/continental/DESIGN.md) Continental +- [`ducati`](library/ducati/DESIGN.md) Ducati +- [`ferrari`](library/ferrari/DESIGN.md) Ferrari +- [`ford`](library/ford/DESIGN.md) Ford +- [`genesis`](library/genesis/DESIGN.md) Genesis +- [`harley-davidson`](library/harley-davidson/DESIGN.md) Harley-Davidson +- [`honda`](library/honda/DESIGN.md) Honda Global Corporate Website +- [`hyundai`](library/hyundai/DESIGN.md) Hyundai Mobility Thailand +- [`jaguar`](library/jaguar/DESIGN.md) Jaguar +- [`jeep-g`](library/jeep-g/DESIGN.md) Jeep +- [`kia`](library/kia/DESIGN.md) Kia America +- [`lamborghini`](library/lamborghini/DESIGN.md) Lamborghini +- [`land-rover`](library/land-rover/DESIGN.md) Land Rover (UK site) +- [`lexus`](library/lexus/DESIGN.md) Lexus +- [`lucid-motors`](library/lucid-motors/DESIGN.md) Lucid Motors +- [`mazda`](library/mazda/DESIGN.md) Mazda USA +- [`mercedes-benz`](library/mercedes-benz/DESIGN.md) Mercedes-Benz +- [`mini`](library/mini/DESIGN.md) MINI +- [`polestar`](library/polestar/DESIGN.md) Polestar +- [`renault`](library/renault/DESIGN.md) Renault Group +- [`subaru`](library/subaru/DESIGN.md) Subaru of America +- [`tesla`](library/tesla/DESIGN.md) Tesla +- [`toyota`](library/toyota/DESIGN.md) Toyota +- [`volkswagen`](library/volkswagen/DESIGN.md) Volkswagen +- [`volvo-cars`](library/volvo-cars/DESIGN.md) Volvo Cars +- [`yamaha-motor`](library/yamaha-motor/DESIGN.md) Yamaha Motorsports USA + +## Backend, Database & DevOps (28) + +- [`appwrite`](library/appwrite/DESIGN.md) Appwrite +- [`axiom`](library/axiom/DESIGN.md) Axiom +- [`clickhouse`](library/clickhouse/DESIGN.md) ClickHouse +- [`cockroach-labs`](library/cockroach-labs/DESIGN.md) Cockroach Labs +- [`composio`](library/composio/DESIGN.md) Composio +- [`confluent`](library/confluent/DESIGN.md) Confluent +- [`convex`](library/convex/DESIGN.md) Convex +- [`digitalocean`](library/digitalocean/DESIGN.md) DigitalOcean +- [`drizzle`](library/drizzle/DESIGN.md) Drizzle ORM +- [`fastly`](library/fastly/DESIGN.md) Fastly +- [`flyio`](library/flyio/DESIGN.md) Fly.io +- [`hashicorp`](library/hashicorp/DESIGN.md) HashiCorp +- [`mongodb`](library/mongodb/DESIGN.md) MongoDB +- [`neon`](library/neon/DESIGN.md) Neon +- [`pinecone`](library/pinecone/DESIGN.md) Pinecone +- [`planetscale`](library/planetscale/DESIGN.md) PlanetScale +- [`posthog`](library/posthog/DESIGN.md) PostHog +- [`prisma`](library/prisma/DESIGN.md) Prisma +- [`railway`](library/railway/DESIGN.md) Railway +- [`redis`](library/redis/DESIGN.md) Redis +- [`render`](library/render/DESIGN.md) Render +- [`sanity`](library/sanity/DESIGN.md) Sanity +- [`sentry`](library/sentry/DESIGN.md) Sentry +- [`supabase`](library/supabase/DESIGN.md) Supabase +- [`temporal`](library/temporal/DESIGN.md) Temporal +- [`tinybird`](library/tinybird/DESIGN.md) Tinybird +- [`turso`](library/turso/DESIGN.md) Turso +- [`upstash`](library/upstash/DESIGN.md) Upstash + +## Banking & Insurance (49) + +- [`affirm`](library/affirm/DESIGN.md) Affirm +- [`aig`](library/aig/DESIGN.md) AIG +- [`allianz`](library/allianz/DESIGN.md) Allianz +- [`amex`](library/amex/DESIGN.md) American Express +- [`ant-group`](library/ant-group/DESIGN.md) Ant Group +- [`axa`](library/axa/DESIGN.md) AXA +- [`bank-of-america`](library/bank-of-america/DESIGN.md) Bank of America +- [`barclays`](library/barclays/DESIGN.md) Barclays +- [`berkshire-hathaway`](library/berkshire-hathaway/DESIGN.md) Berkshire Hathaway Inc. +- [`blackrock`](library/blackrock/DESIGN.md) BlackRock +- [`brex`](library/brex/DESIGN.md) Brex +- [`capital-one`](library/capital-one/DESIGN.md) Capital One +- [`charles-schwab`](library/charles-schwab/DESIGN.md) Charles Schwab +- [`chubb`](library/chubb/DESIGN.md) Chubb +- [`citi`](library/citi/DESIGN.md) Citi (Citigroup corporate site) +- [`credit-agricole`](library/credit-agricole/DESIGN.md) Crédit Agricole +- [`dbs`](library/dbs/DESIGN.md) DBS +- [`deutsche-bank`](library/deutsche-bank/DESIGN.md) Deutsche Bank +- [`emirates-nbd`](library/emirates-nbd/DESIGN.md) Emirates NBD +- [`geico`](library/geico/DESIGN.md) GEICO +- [`generali`](library/generali/DESIGN.md) Generali Group +- [`goldman-sachs`](library/goldman-sachs/DESIGN.md) Goldman Sachs +- [`hsbc`](library/hsbc/DESIGN.md) HSBC Group +- [`icbc`](library/icbc/DESIGN.md) 中国工商银行 (ICBC Ltd corporate site) +- [`ing`](library/ing/DESIGN.md) ING +- [`jpmorgan-chase`](library/jpmorgan-chase/DESIGN.md) JPMorganChase +- [`klarna`](library/klarna/DESIGN.md) Klarna (US home) +- [`mercury`](library/mercury/DESIGN.md) Mercury +- [`metlife`](library/metlife/DESIGN.md) MetLife +- [`mitsubishi-ufj`](library/mitsubishi-ufj/DESIGN.md) Mitsubishi UFJ Financial Group (MUFG) +- [`monzo`](library/monzo/DESIGN.md) Monzo +- [`morgan-stanley-g`](library/morgan-stanley-g/DESIGN.md) Morgan Stanley +- [`munich-re`](library/munich-re/DESIGN.md) Munich Re +- [`n26`](library/n26/DESIGN.md) N26 +- [`nerdwallet`](library/nerdwallet/DESIGN.md) NerdWallet +- [`nubank`](library/nubank/DESIGN.md) Nubank +- [`paypal`](library/paypal/DESIGN.md) PayPal +- [`ping-an`](library/ping-an/DESIGN.md) Ping An Group +- [`plaid`](library/plaid/DESIGN.md) Plaid +- [`prudential`](library/prudential/DESIGN.md) Prudential Financial +- [`ramp`](library/ramp/DESIGN.md) Ramp +- [`robinhood`](library/robinhood/DESIGN.md) Robinhood +- [`royal-bank-of-canada`](library/royal-bank-of-canada/DESIGN.md) Royal Bank of Canada (RBC corporate site) +- [`santander`](library/santander/DESIGN.md) Santander +- [`starling`](library/starling/DESIGN.md) Starling Bank +- [`swiss-re`](library/swiss-re/DESIGN.md) Swiss Re +- [`td-bank`](library/td-bank/DESIGN.md) TD Canada Trust +- [`ubs`](library/ubs/DESIGN.md) UBS +- [`vanguard`](library/vanguard/DESIGN.md) Vanguard + +## Beauty & Personal Care (23) + +- [`aesop`](library/aesop/DESIGN.md) Aesop +- [`byredo`](library/byredo/DESIGN.md) Byredo +- [`cerave`](library/cerave/DESIGN.md) CeraVe +- [`charlotte-tilbury`](library/charlotte-tilbury/DESIGN.md) Charlotte Tilbury +- [`clinique`](library/clinique/DESIGN.md) Clinique +- [`dove`](library/dove/DESIGN.md) Dove +- [`drunk-elephant`](library/drunk-elephant/DESIGN.md) Drunk Elephant +- [`fenty-beauty`](library/fenty-beauty/DESIGN.md) Fenty Beauty +- [`glossier`](library/glossier/DESIGN.md) Glossier +- [`harrys`](library/harrys/DESIGN.md) Harry's +- [`kiehls`](library/kiehls/DESIGN.md) Kiehl's +- [`lush`](library/lush/DESIGN.md) LUSH +- [`mac-cosmetics`](library/mac-cosmetics/DESIGN.md) M·A·C Cosmetics +- [`maybelline`](library/maybelline/DESIGN.md) Maybelline New York +- [`nivea`](library/nivea/DESIGN.md) Nivea Thailand +- [`olay`](library/olay/DESIGN.md) OLAY +- [`procter-and-gamble`](library/procter-and-gamble/DESIGN.md) Procter & Gamble (P&G US) +- [`rare-beauty`](library/rare-beauty/DESIGN.md) Rare Beauty +- [`sephora`](library/sephora/DESIGN.md) Sephora +- [`shiseido`](library/shiseido/DESIGN.md) Shiseido +- [`the-ordinary`](library/the-ordinary/DESIGN.md) The Ordinary +- [`ulta-beauty`](library/ulta-beauty/DESIGN.md) Ulta Beauty +- [`unilever`](library/unilever/DESIGN.md) Unilever + +## Bold & Expressive (8) + +- [`bold`](library/bold/DESIGN.md) Bold +- [`brutalism`](library/brutalism/DESIGN.md) Brutalism +- [`colorful`](library/colorful/DESIGN.md) Colorful +- [`dramatic`](library/dramatic/DESIGN.md) Dramatic +- [`energetic`](library/energetic/DESIGN.md) Energetic +- [`expressive`](library/expressive/DESIGN.md) Expressive +- [`neobrutalism`](library/neobrutalism/DESIGN.md) Neobrutalism +- [`vibrant`](library/vibrant/DESIGN.md) Vibrant + +## Business & Corporate (25) + +- [`20-years-inspired-by-people`](library/20-years-inspired-by-people/DESIGN.md) 20 Years Inspired by People +- [`22-09-2000-he-was-born`](library/22-09-2000-he-was-born/DESIGN.md) Hardik Bhansali +- [`3m-g`](library/3m-g/DESIGN.md) 3M +- [`bcg`](library/bcg/DESIGN.md) Boston Consulting Group +- [`compsych-brand-hub`](library/compsych-brand-hub/DESIGN.md) ComPsych Brand Hub +- [`faint-film`](library/faint-film/DESIGN.md) Faint Film +- [`foudre-human-social-club`](library/foudre-human-social-club/DESIGN.md) Agence Foudre (Human Social Club) +- [`ge`](library/ge/DESIGN.md) GE +- [`immersive-garden-website`](library/immersive-garden-website/DESIGN.md) Immersive Garden +- [`jesper-landberg-4`](library/jesper-landberg-4/DESIGN.md) Jesper Landberg +- [`layrid`](library/layrid/DESIGN.md) Layrid +- [`mckinsey`](library/mckinsey/DESIGN.md) McKinsey & Company +- [`noho`](library/noho/DESIGN.md) Noho +- [`odyssee`](library/odyssee/DESIGN.md) Odyssée +- [`optikka`](library/optikka/DESIGN.md) Optikka +- [`pp-neue-montreal`](library/pp-neue-montreal/DESIGN.md) PP Neue Montreal +- [`revelatio-studio`](library/revelatio-studio/DESIGN.md) Revelatio Studio +- [`s-2k`](library/s-2k/DESIGN.md) S-2K (Honda S2000 tribute) +- [`stefan-vitasovic-portfolio25`](library/stefan-vitasovic-portfolio25/DESIGN.md) Stefan Vitasović \| Creative Developer +- [`the-creative-website-manualtm`](library/the-creative-website-manualtm/DESIGN.md) The Creative Website Manual™ +- [`the-house-of-wonders`](library/the-house-of-wonders/DESIGN.md) The House of Wonders (Audemars Piguet 150 years) +- [`the-obsidian-assembly`](library/the-obsidian-assembly/DESIGN.md) The Obsidian Assembly +- [`the-symphony-of-vines`](library/the-symphony-of-vines/DESIGN.md) The Symphony of Vines +- [`the-watch`](library/the-watch/DESIGN.md) FS 60P by 60fps +- [`turn-io`](library/turn-io/DESIGN.md) Turn.io + +## Consumer Electronics (31) + +- [`acer-g`](library/acer-g/DESIGN.md) Acer +- [`amd-g`](library/amd-g/DESIGN.md) AMD +- [`asus`](library/asus/DESIGN.md) ASUS +- [`bang-olufsen`](library/bang-olufsen/DESIGN.md) Bang & Olufsen +- [`canon`](library/canon/DESIGN.md) Canon Global +- [`dji`](library/dji/DESIGN.md) DJI +- [`dyson`](library/dyson/DESIGN.md) Dyson +- [`ecobee`](library/ecobee/DESIGN.md) ecobee +- [`fairphone`](library/fairphone/DESIGN.md) Fairphone +- [`fujifilm`](library/fujifilm/DESIGN.md) Fujifilm \[Global\] +- [`garmin`](library/garmin/DESIGN.md) Garmin +- [`gopro`](library/gopro/DESIGN.md) GoPro +- [`hasselblad`](library/hasselblad/DESIGN.md) Hasselblad +- [`hp`](library/hp/DESIGN.md) HP +- [`insta360`](library/insta360/DESIGN.md) Insta360 +- [`intel`](library/intel/DESIGN.md) Intel +- [`leica`](library/leica/DESIGN.md) Leica +- [`lenovo`](library/lenovo/DESIGN.md) Lenovo +- [`lg-g`](library/lg-g/DESIGN.md) LG USA +- [`nikon`](library/nikon/DESIGN.md) Nikon +- [`nothing`](library/nothing/DESIGN.md) Nothing +- [`oneplus`](library/oneplus/DESIGN.md) OnePlus +- [`panasonic`](library/panasonic/DESIGN.md) Panasonic North America +- [`philips-hue`](library/philips-hue/DESIGN.md) Philips Hue +- [`qualcomm`](library/qualcomm/DESIGN.md) Qualcomm +- [`remarkable`](library/remarkable/DESIGN.md) reMarkable +- [`ring`](library/ring/DESIGN.md) Ring +- [`samsung`](library/samsung/DESIGN.md) Samsung +- [`sony`](library/sony/DESIGN.md) Sony +- [`tsmc`](library/tsmc/DESIGN.md) TSMC +- [`xiaomi`](library/xiaomi/DESIGN.md) Xiaomi + +## Creative & Artistic (10) + +- [`artistic`](library/artistic/DESIGN.md) Artistic +- [`cafe`](library/cafe/DESIGN.md) Cafe +- [`cosmic`](library/cosmic/DESIGN.md) Cosmic +- [`creative`](library/creative/DESIGN.md) Creative +- [`doodle`](library/doodle/DESIGN.md) Doodle +- [`editorial`](library/editorial/DESIGN.md) Editorial +- [`friendly`](library/friendly/DESIGN.md) Friendly +- [`lingo`](library/lingo/DESIGN.md) Lingo +- [`publication`](library/publication/DESIGN.md) Publication +- [`storytelling`](library/storytelling/DESIGN.md) Storytelling + +## CSS-in-JS (5) + +- [`emotion`](library/emotion/DESIGN.md) Emotion +- [`panda-css`](library/panda-css/DESIGN.md) Panda CSS +- [`stitches`](library/stitches/DESIGN.md) Stitches +- [`styled-components`](library/styled-components/DESIGN.md) styled-components +- [`vanilla-extract`](library/vanilla-extract/DESIGN.md) Vanilla Extract + +## Culture & Events (59) + +- [`100-lost-species`](library/100-lost-species/DESIGN.md) 100 Lost Species +- [`21-hrs-on-the-moon`](library/21-hrs-on-the-moon/DESIGN.md) 21 Hrs On The Moon +- [`beings`](library/beings/DESIGN.md) Beings +- [`british-museum`](library/british-museum/DESIGN.md) British Museum +- [`coachella`](library/coachella/DESIGN.md) Coachella +- [`colonia-zacamil`](library/colonia-zacamil/DESIGN.md) Colonia Zacamil +- [`darkstar-fury-evo-i`](library/darkstar-fury-evo-i/DESIGN.md) Darkstar Fury: Evo I +- [`david-alaba`](library/david-alaba/DESIGN.md) David Alaba +- [`david-whyte-experience`](library/david-whyte-experience/DESIGN.md) David Whyte Experience +- [`depo-luxe`](library/depo-luxe/DESIGN.md) Depo Luxe +- [`electra-filmworks`](library/electra-filmworks/DESIGN.md) Electra Filmworks +- [`emilie-aubry`](library/emilie-aubry/DESIGN.md) Emilie Aubry +- [`flashlights`](library/flashlights/DESIGN.md) Flashlights - Our Roots (history of jailhouse lawyers) +- [`function`](library/function/DESIGN.md) FUNCTION +- [`gary-and-the-endless-forest`](library/gary-and-the-endless-forest/DESIGN.md) Gary et la forêt infinie (Garance) +- [`glastonbury`](library/glastonbury/DESIGN.md) Glastonbury Festival +- [`glenn-catteeuw-portfolio-1`](library/glenn-catteeuw-portfolio-1/DESIGN.md) Glenn Catteeuw - Interactive Art Director +- [`guggenheim`](library/guggenheim/DESIGN.md) Guggenheim +- [`ink-games`](library/ink-games/DESIGN.md) INK Games +- [`iventions`](library/iventions/DESIGN.md) Iventions +- [`joy-from-africa`](library/joy-from-africa/DESIGN.md) Joy from Africa to the World +- [`lando-norris`](library/lando-norris/DESIGN.md) Lando Norris +- [`louvre`](library/louvre/DESIGN.md) Musée du Louvre +- [`lxl-creative`](library/lxl-creative/DESIGN.md) LxL Creative +- [`maxima-therapy`](library/maxima-therapy/DESIGN.md) Maxima Therapy +- [`midlife-engineering`](library/midlife-engineering/DESIGN.md) Midlife Engineering +- [`mikki-sindhunata`](library/mikki-sindhunata/DESIGN.md) Mikki Sindhunata +- [`milledollars`](library/milledollars/DESIGN.md) MilleDollars +- [`mindmarket`](library/mindmarket/DESIGN.md) MindMarket +- [`moma`](library/moma/DESIGN.md) MoMA +- [`momoney`](library/momoney/DESIGN.md) MoMoney, the Museum of Money +- [`obys-design-books`](library/obys-design-books/DESIGN.md) Obys' Design Books +- [`ousmane-dembele-ballon-dor`](library/ousmane-dembele-ballon-dor/DESIGN.md) Ousmane Dembélé - Né Pour Briller +- [`ponpon-mania`](library/ponpon-mania/DESIGN.md) Ponpon Mania +- [`radical-face`](library/radical-face/DESIGN.md) Radical Face +- [`redwood-team`](library/redwood-team/DESIGN.md) Redwood Team +- [`rijksmuseum`](library/rijksmuseum/DESIGN.md) Rijksmuseum +- [`serpentine`](library/serpentine/DESIGN.md) Serpentine +- [`seventeen`](library/seventeen/DESIGN.md) Seventeen +- [`soil`](library/soil/DESIGN.md) SOIL +- [`studio-alphonse`](library/studio-alphonse/DESIGN.md) Studio Alphonse +- [`superlocal-design-festival-25`](library/superlocal-design-festival-25/DESIGN.md) Superlocal +- [`sxsw`](library/sxsw/DESIGN.md) SXSW +- [`tate`](library/tate/DESIGN.md) Tate +- [`ted`](library/ted/DESIGN.md) TED +- [`ten-years-away`](library/ten-years-away/DESIGN.md) Ten Years Away +- [`the-best-you-by-klook`](library/the-best-you-by-klook/DESIGN.md) The Best You by Klook +- [`the-met`](library/the-met/DESIGN.md) The Metropolitan Museum of Art +- [`the-monolith-project`](library/the-monolith-project/DESIGN.md) The Monolith Project +- [`the-pendragon-cycle`](library/the-pendragon-cycle/DESIGN.md) The Pendragon Cycle +- [`thorgal`](library/thorgal/DESIGN.md) Thorgal +- [`trevor-noah`](library/trevor-noah/DESIGN.md) Trevor Noah +- [`unesco-stolen-objects-museum`](library/unesco-stolen-objects-museum/DESIGN.md) UNESCO Virtual Museum of Stolen Cultural Objects +- [`utopia-tokyo`](library/utopia-tokyo/DESIGN.md) Utopia Tokyo +- [`wild-week-athens`](library/wild-week-athens/DESIGN.md) Wild Week – Athens (2026) +- [`won-j-you-studios-2`](library/won-j-you-studios-2/DESIGN.md) Won J. You Studios +- [`working-stiff-films`](library/working-stiff-films/DESIGN.md) Working Stiff Films +- [`xox`](library/xox/DESIGN.md) XOX by makemepulse +- [`yame-the-molazone`](library/yame-the-molazone/DESIGN.md) Molazone - Yamê Official Website + +## Design & Creative Tools (31) + +- [`affinity`](library/affinity/DESIGN.md) Affinity +- [`airtable`](library/airtable/DESIGN.md) Airtable +- [`blender`](library/blender/DESIGN.md) Blender +- [`carrd`](library/carrd/DESIGN.md) Carrd +- [`clay`](library/clay/DESIGN.md) Clay +- [`coolors`](library/coolors/DESIGN.md) Coolors +- [`cosmos`](library/cosmos/DESIGN.md) Cosmos +- [`descript`](library/descript/DESIGN.md) Descript +- [`envato`](library/envato/DESIGN.md) Envato +- [`excalidraw`](library/excalidraw/DESIGN.md) Excalidraw +- [`figma`](library/figma/DESIGN.md) Figma +- [`fontshare`](library/fontshare/DESIGN.md) Fontshare +- [`framer`](library/framer/DESIGN.md) Framer +- [`jitter`](library/jitter/DESIGN.md) Jitter +- [`lottiefiles`](library/lottiefiles/DESIGN.md) LottieFiles +- [`miro`](library/miro/DESIGN.md) Miro +- [`mobbin`](library/mobbin/DESIGN.md) Mobbin +- [`penpot`](library/penpot/DESIGN.md) Penpot +- [`pitch`](library/pitch/DESIGN.md) Pitch +- [`procreate`](library/procreate/DESIGN.md) Procreate +- [`readymag`](library/readymag/DESIGN.md) Readymag +- [`relume`](library/relume/DESIGN.md) Relume +- [`rive`](library/rive/DESIGN.md) Rive +- [`sketch`](library/sketch/DESIGN.md) Sketch +- [`spline`](library/spline/DESIGN.md) Spline +- [`tilda`](library/tilda/DESIGN.md) Tilda +- [`tldraw`](library/tldraw/DESIGN.md) tldraw +- [`uizard`](library/uizard/DESIGN.md) Uizard +- [`unsplash`](library/unsplash/DESIGN.md) Unsplash +- [`webflow`](library/webflow/DESIGN.md) Webflow +- [`whimsical`](library/whimsical/DESIGN.md) Whimsical + +## Design Systems (171) + +- [`aalto-university`](library/aalto-university/DESIGN.md) Aalto University +- [`adjust`](library/adjust/DESIGN.md) Adjust +- [`alberta`](library/alberta/DESIGN.md) Government of Alberta +- [`alibaba`](library/alibaba/DESIGN.md) Alibaba.com +- [`arco`](library/arco/DESIGN.md) ByteDance +- [`ariakit`](library/ariakit/DESIGN.md) Ariakit +- [`artsy`](library/artsy/DESIGN.md) Artsy +- [`asana`](library/asana/DESIGN.md) Asana +- [`astro-uxds`](library/astro-uxds/DESIGN.md) Astro UXDS (Rocket Communications) +- [`atlaskit`](library/atlaskit/DESIGN.md) Atlaskit +- [`atlassian-brand`](library/atlassian-brand/DESIGN.md) Atlassian +- [`atlassian-design`](library/atlassian-design/DESIGN.md) Atlassian Design +- [`autoguru`](library/autoguru/DESIGN.md) AutoGuru +- [`automattic`](library/automattic/DESIGN.md) Automattic +- [`aws-amplify`](library/aws-amplify/DESIGN.md) AWS Amplify +- [`axis-bank`](library/axis-bank/DESIGN.md) Axis Bank +- [`base-ui`](library/base-ui/DESIGN.md) Base UI +- [`base-web`](library/base-web/DESIGN.md) Base Web +- [`benevity`](library/benevity/DESIGN.md) Benevity +- [`bento`](library/bento/DESIGN.md) Bento DS +- [`bigcommerce`](library/bigcommerce/DESIGN.md) BigCommerce +- [`biings`](library/biings/DESIGN.md) Biings +- [`blip`](library/blip/DESIGN.md) Blip +- [`bloom-appearhere`](library/bloom-appearhere/DESIGN.md) Appear Here +- [`blueprint-js`](library/blueprint-js/DESIGN.md) Blueprint +- [`boltdesign`](library/boltdesign/DESIGN.md) Bolt Design System +- [`boston-gov`](library/boston-gov/DESIGN.md) City of Boston (Boston.gov) +- [`box-blueprint`](library/box-blueprint/DESIGN.md) Box +- [`brazil-gov`](library/brazil-gov/DESIGN.md) GOV.BR +- [`bridge-ufsc`](library/bridge-ufsc/DESIGN.md) Universidade Federal de Santa Catarina (UFSC) +- [`british-gas`](library/british-gas/DESIGN.md) British Gas +- [`buzzvil`](library/buzzvil/DESIGN.md) Buzzvil +- [`ca-gov`](library/ca-gov/DESIGN.md) State of California (CA.gov) +- [`ca-mineral`](library/ca-mineral/DESIGN.md) Broadcom +- [`cloudflare`](library/cloudflare/DESIGN.md) Cloudflare +- [`contentful`](library/contentful/DESIGN.md) Contentful +- [`culture-amp`](library/culture-amp/DESIGN.md) Culture Amp +- [`decathlon`](library/decathlon/DESIGN.md) Decathlon +- [`decentraland`](library/decentraland/DESIGN.md) Decentraland +- [`dell`](library/dell/DESIGN.md) Dell +- [`denmark-gov`](library/denmark-gov/DESIGN.md) Danish Government (Digitaliseringsstyrelsen) +- [`deque`](library/deque/DESIGN.md) Deque +- [`digital-agency-jp`](library/digital-agency-jp/DESIGN.md) デジタル庁 (Digital Agency, Japan) +- [`digital-gov`](library/digital-gov/DESIGN.md) U.S. Web Design System +- [`drawbotics`](library/drawbotics/DESIGN.md) Drawbotics +- [`duet`](library/duet/DESIGN.md) Duet Design System +- [`dutch-gov-rijkshuisstijl`](library/dutch-gov-rijkshuisstijl/DESIGN.md) Rijksoverheid +- [`ebay`](library/ebay/DESIGN.md) eBay +- [`elastic`](library/elastic/DESIGN.md) Elastic +- [`elementary`](library/elementary/DESIGN.md) elementary OS +- [`elisa`](library/elisa/DESIGN.md) Elisa +- [`enel-x`](library/enel-x/DESIGN.md) Enel X +- [`engie`](library/engie/DESIGN.md) ENGIE +- [`evergreen-ui`](library/evergreen-ui/DESIGN.md) Evergreen +- [`finland-gov`](library/finland-gov/DESIGN.md) Suomi.fi +- [`finland-toolbox`](library/finland-toolbox/DESIGN.md) Finland Toolbox +- [`firefox-acorn`](library/firefox-acorn/DESIGN.md) Firefox +- [`fluent-design`](library/fluent-design/DESIGN.md) Fluent UI React +- [`fluent-web-components`](library/fluent-web-components/DESIGN.md) Microsoft Learn +- [`foyer`](library/foyer/DESIGN.md) Foyer +- [`framework7`](library/framework7/DESIGN.md) Framework7 +- [`freee`](library/freee/DESIGN.md) freee +- [`fremtind`](library/fremtind/DESIGN.md) Fremtind +- [`frontier-familysearch`](library/frontier-familysearch/DESIGN.md) FamilySearch +- [`github`](library/github/DESIGN.md) GitHub +- [`gitlab`](library/gitlab/DESIGN.md) GitLab +- [`gojek`](library/gojek/DESIGN.md) Gojek +- [`google-material`](library/google-material/DESIGN.md) Google (about.google) +- [`grafana`](library/grafana/DESIGN.md) Grafana Labs +- [`gympass`](library/gympass/DESIGN.md) Gympass (Wellhub) +- [`haus`](library/haus/DESIGN.md) haus +- [`helsinki`](library/helsinki/DESIGN.md) City of Helsinki +- [`heroku`](library/heroku/DESIGN.md) Heroku +- [`ibm`](library/ibm/DESIGN.md) Carbon Design System +- [`inclusive-components`](library/inclusive-components/DESIGN.md) Inclusive Components +- [`infor`](library/infor/DESIGN.md) Infor +- [`instructure`](library/instructure/DESIGN.md) Instructure +- [`intuit`](library/intuit/DESIGN.md) Intuit +- [`italy-gov`](library/italy-gov/DESIGN.md) Governo Italiano +- [`jb-design`](library/jb-design/DESIGN.md) Seyed Mohammad Javad Bathaei Portfolio +- [`jetbrains`](library/jetbrains/DESIGN.md) JetBrains +- [`just-eat`](library/just-eat/DESIGN.md) Just Eat Takeaway.com +- [`kajabi`](library/kajabi/DESIGN.md) Kajabi +- [`kiwi-ds`](library/kiwi-ds/DESIGN.md) Kiwi.com +- [`kolibri`](library/kolibri/DESIGN.md) KoliBri (ITZBund) +- [`kontur`](library/kontur/DESIGN.md) Kontur +- [`korea-gov`](library/korea-gov/DESIGN.md) Korea Government (KRDS) +- [`lightning-design`](library/lightning-design/DESIGN.md) Lightning Design System +- [`logitech`](library/logitech/DESIGN.md) Logitech +- [`mailchimp`](library/mailchimp/DESIGN.md) Mailchimp +- [`mailru`](library/mailru/DESIGN.md) VK Mail.ru +- [`malaysia-gov`](library/malaysia-gov/DESIGN.md) MyGovernment +- [`material`](library/material/DESIGN.md) Material Design 3 +- [`material-minimal`](library/material-minimal/DESIGN.md) Material Minimal +- [`mercadolibre`](library/mercadolibre/DESIGN.md) Mercado Libre +- [`mercari`](library/mercari/DESIGN.md) Mercari +- [`mesh-ds`](library/mesh-ds/DESIGN.md) Mesh Design System +- [`microsoft-fluent`](library/microsoft-fluent/DESIGN.md) Microsoft +- [`monday`](library/monday/DESIGN.md) monday.com +- [`morningstar`](library/morningstar/DESIGN.md) Morningstar +- [`mutual-of-omaha`](library/mutual-of-omaha/DESIGN.md) Mutual of Omaha +- [`nasa`](library/nasa/DESIGN.md) NASA +- [`newskit`](library/newskit/DESIGN.md) NewsKit +- [`ngx`](library/ngx/DESIGN.md) Angular +- [`nordhealth`](library/nordhealth/DESIGN.md) Nordhealth +- [`norway-designsystemet`](library/norway-designsystemet/DESIGN.md) Digdir (Norwegian Digitalisation Agency) +- [`ns-nl`](library/ns-nl/DESIGN.md) NS Dutch Railways (NS) +- [`nulogy`](library/nulogy/DESIGN.md) Nulogy +- [`onsen`](library/onsen/DESIGN.md) Onsen UI +- [`openui5`](library/openui5/DESIGN.md) OpenUI5 +- [`oracle`](library/oracle/DESIGN.md) Oracle +- [`orange`](library/orange/DESIGN.md) Orange +- [`patternfly`](library/patternfly/DESIGN.md) Red Hat +- [`pega`](library/pega/DESIGN.md) Pega +- [`phonepe`](library/phonepe/DESIGN.md) PhonePe +- [`pluralsight`](library/pluralsight/DESIGN.md) Pluralsight +- [`polaris-design`](library/polaris-design/DESIGN.md) Shopify Polaris +- [`porsche`](library/porsche/DESIGN.md) Porsche +- [`primeng`](library/primeng/DESIGN.md) PrimeNG +- [`privy`](library/privy/DESIGN.md) Privy +- [`pusher`](library/pusher/DESIGN.md) Pusher +- [`quebec`](library/quebec/DESIGN.md) Québec.ca +- [`rambler`](library/rambler/DESIGN.md) Rambler +- [`rappi`](library/rappi/DESIGN.md) Rappi +- [`razorpay`](library/razorpay/DESIGN.md) Razorpay +- [`redhat-vanilla`](library/redhat-vanilla/DESIGN.md) Canonical Ubuntu +- [`reshaped`](library/reshaped/DESIGN.md) Reshaped +- [`sap-fundamental`](library/sap-fundamental/DESIGN.md) SAP (sap.com) +- [`scot-gov`](library/scot-gov/DESIGN.md) Scottish Government +- [`seb`](library/seb/DESIGN.md) SEB +- [`seek`](library/seek/DESIGN.md) SEEK +- [`semrush`](library/semrush/DESIGN.md) Semrush +- [`servicetitan`](library/servicetitan/DESIGN.md) ServiceTitan +- [`shoelace`](library/shoelace/DESIGN.md) Shoelace +- [`siemens-ix`](library/siemens-ix/DESIGN.md) Siemens +- [`singapore-gov`](library/singapore-gov/DESIGN.md) Singapore Government (gov.sg) +- [`sipgate`](library/sipgate/DESIGN.md) sipgate +- [`smarthr`](library/smarthr/DESIGN.md) SmartHR +- [`sparebank1`](library/sparebank1/DESIGN.md) SpareBank 1 +- [`spectrum-design`](library/spectrum-design/DESIGN.md) Adobe Spectrum +- [`splunk`](library/splunk/DESIGN.md) Splunk +- [`sproutsocial`](library/sproutsocial/DESIGN.md) Sprout Social +- [`strapi`](library/strapi/DESIGN.md) Strapi +- [`sweden-gov`](library/sweden-gov/DESIGN.md) Government Offices of Sweden +- [`swiss`](library/swiss/DESIGN.md) Swiss Post +- [`talend`](library/talend/DESIGN.md) Qlik Talend +- [`tdesign`](library/tdesign/DESIGN.md) Tencent +- [`teambition`](library/teambition/DESIGN.md) DingTalk Teambition +- [`telefonica`](library/telefonica/DESIGN.md) Telefónica +- [`telekom`](library/telekom/DESIGN.md) Deutsche Telekom +- [`theme-ui`](library/theme-ui/DESIGN.md) Theme UI +- [`thumbtack`](library/thumbtack/DESIGN.md) Thumbtack +- [`ui-kitten`](library/ui-kitten/DESIGN.md) UI Kitten +- [`untitled-ui`](library/untitled-ui/DESIGN.md) Untitled UI +- [`usva`](library/usva/DESIGN.md) usva +- [`uswds-cfpb`](library/uswds-cfpb/DESIGN.md) Consumer Financial Protection Bureau +- [`utrecht`](library/utrecht/DESIGN.md) Gemeente Utrecht +- [`va-gov`](library/va-gov/DESIGN.md) U.S. Department of Veterans Affairs (VA.gov) +- [`vant`](library/vant/DESIGN.md) Youzan (有赞) +- [`visa`](library/visa/DESIGN.md) Visa +- [`vmware-clarity`](library/vmware-clarity/DESIGN.md) VMware by Broadcom +- [`vtex-styleguide`](library/vtex-styleguide/DESIGN.md) VTEX +- [`vue-ds`](library/vue-ds/DESIGN.md) Vue Design System +- [`web-awesome`](library/web-awesome/DESIGN.md) Web Awesome +- [`welcome-ui`](library/welcome-ui/DESIGN.md) Welcome to the Jungle +- [`wmca`](library/wmca/DESIGN.md) West Midlands Combined Authority +- [`wonderflow`](library/wonderflow/DESIGN.md) Wonderflow +- [`wordpress`](library/wordpress/DESIGN.md) WordPress +- [`workday`](library/workday/DESIGN.md) Workday +- [`yahoo-japan`](library/yahoo-japan/DESIGN.md) LY Corporation +- [`zendesk`](library/zendesk/DESIGN.md) Zendesk + +## Developer Tools & IDEs (47) + +- [`algolia`](library/algolia/DESIGN.md) Algolia +- [`auth0`](library/auth0/DESIGN.md) Auth0 +- [`bitbucket`](library/bitbucket/DESIGN.md) Bitbucket +- [`bubble`](library/bubble/DESIGN.md) Bubble +- [`builderio`](library/builderio/DESIGN.md) Builder.io +- [`bun`](library/bun/DESIGN.md) Bun +- [`chromatic`](library/chromatic/DESIGN.md) Chromatic +- [`clerk`](library/clerk/DESIGN.md) Clerk +- [`codesandbox`](library/codesandbox/DESIGN.md) CodeSandbox +- [`cursor`](library/cursor/DESIGN.md) Cursor +- [`deno`](library/deno/DESIGN.md) Deno +- [`docker`](library/docker/DESIGN.md) Docker +- [`expo`](library/expo/DESIGN.md) Expo +- [`gitbook`](library/gitbook/DESIGN.md) GitBook +- [`graphite`](library/graphite/DESIGN.md) Graphite +- [`hashnode`](library/hashnode/DESIGN.md) Hashnode +- [`inngest`](library/inngest/DESIGN.md) Inngest +- [`knock`](library/knock/DESIGN.md) Knock +- [`launchdarkly`](library/launchdarkly/DESIGN.md) LaunchDarkly +- [`liveblocks`](library/liveblocks/DESIGN.md) Liveblocks +- [`logrocket`](library/logrocket/DESIGN.md) LogRocket +- [`lovable`](library/lovable/DESIGN.md) Lovable +- [`microsoft-fluentui`](library/microsoft-fluentui/DESIGN.md) Microsoft Developer +- [`openstatus`](library/openstatus/DESIGN.md) OpenStatus +- [`plasmic`](library/plasmic/DESIGN.md) Plasmic +- [`postman`](library/postman/DESIGN.md) Postman +- [`postmark`](library/postmark/DESIGN.md) Postmark +- [`raycast`](library/raycast/DESIGN.md) Raycast +- [`readme`](library/readme/DESIGN.md) ReadMe +- [`replit`](library/replit/DESIGN.md) Replit +- [`retool`](library/retool/DESIGN.md) Retool +- [`stackblitz`](library/stackblitz/DESIGN.md) StackBlitz +- [`storybook`](library/storybook/DESIGN.md) Storybook +- [`stytch`](library/stytch/DESIGN.md) Stytch +- [`superhuman`](library/superhuman/DESIGN.md) Superhuman +- [`tabnine`](library/tabnine/DESIGN.md) Tricentis +- [`triggerdev`](library/triggerdev/DESIGN.md) Trigger.dev +- [`turborepo`](library/turborepo/DESIGN.md) Turborepo +- [`unkey`](library/unkey/DESIGN.md) Unkey +- [`unreal-engine`](library/unreal-engine/DESIGN.md) Unreal Engine +- [`val-town`](library/val-town/DESIGN.md) Val Town +- [`vercel`](library/vercel/DESIGN.md) Vercel +- [`vite`](library/vite/DESIGN.md) Vite +- [`warp`](library/warp/DESIGN.md) Warp +- [`windsurf`](library/windsurf/DESIGN.md) Devin Desktop +- [`workos`](library/workos/DESIGN.md) WorkOS +- [`zed`](library/zed/DESIGN.md) Zed Industries + +## E-commerce & Retail (9) + +- [`airbnb`](library/airbnb/DESIGN.md) Airbnb +- [`asos`](library/asos/DESIGN.md) ASOS +- [`meta`](library/meta/DESIGN.md) Meta +- [`nike`](library/nike/DESIGN.md) Nike +- [`shein`](library/shein/DESIGN.md) SHEIN +- [`shopify`](library/shopify/DESIGN.md) Shopify +- [`starbucks`](library/starbucks/DESIGN.md) Starbucks +- [`temu-g`](library/temu-g/DESIGN.md) Temu +- [`zappos`](library/zappos/DESIGN.md) Zappos + +## Editorial & Print (1) + +- [`kami`](library/kami/DESIGN.md) kami (紙 / 纸) + +## Editorial · Studio (1) + +- [`atelier-zero`](library/atelier-zero/DESIGN.md) Atelier Zero + +## Education (23) + +- [`babbel`](library/babbel/DESIGN.md) Babbel +- [`brilliant`](library/brilliant/DESIGN.md) Brilliant +- [`cambridge-university`](library/cambridge-university/DESIGN.md) University of Cambridge +- [`carnegie-mellon`](library/carnegie-mellon/DESIGN.md) Carnegie Mellon University +- [`chegg`](library/chegg/DESIGN.md) Chegg +- [`codecademy`](library/codecademy/DESIGN.md) Codecademy +- [`coursera`](library/coursera/DESIGN.md) Coursera +- [`duolingo`](library/duolingo/DESIGN.md) Duolingo +- [`edx`](library/edx/DESIGN.md) edX +- [`eth-zurich`](library/eth-zurich/DESIGN.md) ETH Zurich +- [`harvard-university`](library/harvard-university/DESIGN.md) Harvard University +- [`imperial-college-london`](library/imperial-college-london/DESIGN.md) Imperial College London +- [`khan-academy`](library/khan-academy/DESIGN.md) Khan Academy +- [`masterclass`](library/masterclass/DESIGN.md) MasterClass +- [`mit`](library/mit/DESIGN.md) MIT (Massachusetts Institute of Technology) +- [`national-university-of-singapore`](library/national-university-of-singapore/DESIGN.md) National University of Singapore +- [`oxford-university`](library/oxford-university/DESIGN.md) University of Oxford +- [`quizlet`](library/quizlet/DESIGN.md) Quizlet +- [`skillshare`](library/skillshare/DESIGN.md) Skillshare +- [`stanford-university`](library/stanford-university/DESIGN.md) Stanford University +- [`uc-berkeley`](library/uc-berkeley/DESIGN.md) University of California, Berkeley +- [`udemy`](library/udemy/DESIGN.md) Udemy +- [`yale-university`](library/yale-university/DESIGN.md) Yale University + +## Energy & Climate (32) + +- [`arcadia`](library/arcadia/DESIGN.md) Arcadia +- [`bp`](library/bp/DESIGN.md) bp +- [`chargepoint`](library/chargepoint/DESIGN.md) ChargePoint +- [`climeworks`](library/climeworks/DESIGN.md) Climeworks +- [`commonwealth-fusion-systems`](library/commonwealth-fusion-systems/DESIGN.md) Commonwealth Fusion Systems +- [`conocophillips`](library/conocophillips/DESIGN.md) ConocoPhillips +- [`electrify-america`](library/electrify-america/DESIGN.md) Electrify America +- [`enel`](library/enel/DESIGN.md) Enel Group +- [`enphase`](library/enphase/DESIGN.md) Enphase +- [`equinor`](library/equinor/DESIGN.md) Equinor +- [`exxonmobil`](library/exxonmobil/DESIGN.md) ExxonMobil +- [`first-solar`](library/first-solar/DESIGN.md) First Solar +- [`form-energy`](library/form-energy/DESIGN.md) Form Energy +- [`ge-vernova`](library/ge-vernova/DESIGN.md) GE Vernova +- [`ionity`](library/ionity/DESIGN.md) IONITY +- [`john-deere`](library/john-deere/DESIGN.md) John Deere +- [`lockheed-martin`](library/lockheed-martin/DESIGN.md) Lockheed Martin +- [`nextera-energy`](library/nextera-energy/DESIGN.md) NextEra Energy +- [`northvolt`](library/northvolt/DESIGN.md) Northvolt +- [`octopus-energy`](library/octopus-energy/DESIGN.md) Octopus Energy +- [`orsted`](library/orsted/DESIGN.md) Ørsted +- [`palmetto`](library/palmetto/DESIGN.md) Palmetto +- [`petrobras`](library/petrobras/DESIGN.md) Petrobras +- [`ptt`](library/ptt/DESIGN.md) PTT Public Company Limited +- [`rivian`](library/rivian/DESIGN.md) Rivian +- [`schneider-electric`](library/schneider-electric/DESIGN.md) Schneider Electric +- [`shell`](library/shell/DESIGN.md) Shell Global +- [`siemens-energy`](library/siemens-energy/DESIGN.md) Siemens Energy +- [`sunrun`](library/sunrun/DESIGN.md) Sunrun +- [`totalenergies`](library/totalenergies/DESIGN.md) TotalEnergies +- [`vestas`](library/vestas/DESIGN.md) Vestas +- [`watershed`](library/watershed/DESIGN.md) Watershed + +## Fashion & Apparel (42) + +- [`adcker`](library/adcker/DESIGN.md) Adcker +- [`aim-ai-modernism-of-kharkiv`](library/aim-ai-modernism-of-kharkiv/DESIGN.md) AIM — AI Modernism of Kharkiv +- [`allbirds`](library/allbirds/DESIGN.md) Allbirds +- [`arcteryx`](library/arcteryx/DESIGN.md) Arc'teryx +- [`arket`](library/arket/DESIGN.md) ARKET +- [`balmoral`](library/balmoral/DESIGN.md) Balmoral Running +- [`banana-republic`](library/banana-republic/DESIGN.md) Banana Republic +- [`becane-paris`](library/becane-paris/DESIGN.md) Bécane Paris +- [`bennett-clive`](library/bennett-clive/DESIGN.md) Bennett & Clive +- [`capitolium`](library/capitolium/DESIGN.md) Capitolium +- [`carhartt`](library/carhartt/DESIGN.md) Carhartt +- [`cos`](library/cos/DESIGN.md) COS +- [`detroit-paris`](library/detroit-paris/DESIGN.md) Detroit (Detroit Paris) +- [`dichtm-fashion`](library/dichtm-fashion/DESIGN.md) DICH™ Fashion +- [`dime-mtl`](library/dime-mtl/DESIGN.md) Dime MTL +- [`dulcedo`](library/dulcedo/DESIGN.md) Dulcedo +- [`everlane`](library/everlane/DESIGN.md) Everlane +- [`freshman`](library/freshman/DESIGN.md) Freshman +- [`gap`](library/gap/DESIGN.md) Gap +- [`gavin-schneider-productions`](library/gavin-schneider-productions/DESIGN.md) Gavin Schneider Productions +- [`handm`](library/handm/DESIGN.md) H&M +- [`hugo-boss`](library/hugo-boss/DESIGN.md) HUGO BOSS +- [`indigo-laboratory`](library/indigo-laboratory/DESIGN.md) Indigo +- [`lululemon`](library/lululemon/DESIGN.md) lululemon +- [`max-mara-jacket-circle`](library/max-mara-jacket-circle/DESIGN.md) Max Mara Jacket Circle +- [`max-mara-untamed-heroine`](library/max-mara-untamed-heroine/DESIGN.md) Max Mara Untamed Heroine +- [`meech213`](library/meech213/DESIGN.md) Meech213 +- [`nitex`](library/nitex/DESIGN.md) NITEX +- [`odd-ritual`](library/odd-ritual/DESIGN.md) Odd Ritual +- [`oflyn`](library/oflyn/DESIGN.md) Oflyn +- [`ogaki`](library/ogaki/DESIGN.md) OGAKI +- [`old-navy`](library/old-navy/DESIGN.md) Old Navy +- [`on-running`](library/on-running/DESIGN.md) On +- [`outfit`](library/outfit/DESIGN.md) OUTFIT by ++hellohello +- [`patagonia`](library/patagonia/DESIGN.md) Patagonia +- [`permian`](library/permian/DESIGN.md) Permian +- [`pop-up-10-ans-la-rosee`](library/pop-up-10-ans-la-rosee/DESIGN.md) Pop-up 10 ans La Rosée +- [`solk`](library/solk/DESIGN.md) SOLK +- [`somefolk-r`](library/somefolk-r/DESIGN.md) Somefolk® +- [`urban-jurgensen`](library/urban-jurgensen/DESIGN.md) Urban Jürgensen +- [`wolverine-worldwide`](library/wolverine-worldwide/DESIGN.md) Wolverine Worldwide +- [`zara`](library/zara/DESIGN.md) Zara + +## Fintech & Crypto (14) + +- [`adyen`](library/adyen/DESIGN.md) Adyen +- [`binance`](library/binance/DESIGN.md) Binance +- [`coinbase`](library/coinbase/DESIGN.md) Coinbase +- [`copilot-money`](library/copilot-money/DESIGN.md) Copilot Money +- [`kraken`](library/kraken/DESIGN.md) Kraken +- [`lunch-money`](library/lunch-money/DESIGN.md) Lunch Money +- [`mastercard`](library/mastercard/DESIGN.md) Mastercard +- [`monarch-money`](library/monarch-money/DESIGN.md) Monarch +- [`paddle`](library/paddle/DESIGN.md) Paddle +- [`revolut`](library/revolut/DESIGN.md) Revolut +- [`stripe`](library/stripe/DESIGN.md) Stripe +- [`venmo`](library/venmo/DESIGN.md) Venmo +- [`wise`](library/wise/DESIGN.md) Wise +- [`ynab`](library/ynab/DESIGN.md) YNAB + +## Food & Beverage (61) + +- [`activehop`](library/activehop/DESIGN.md) ActiveHop +- [`amrit-palace`](library/amrit-palace/DESIGN.md) Amrit Palace +- [`ben-and-jerrys`](library/ben-and-jerrys/DESIGN.md) Ben & Jerry's +- [`blue-bottle`](library/blue-bottle/DESIGN.md) Blue Bottle Coffee +- [`bucks-sauce`](library/bucks-sauce/DESIGN.md) Bucks Sauce +- [`burger-king`](library/burger-king/DESIGN.md) Burger King +- [`cadbury`](library/cadbury/DESIGN.md) Cadbury +- [`chipotle`](library/chipotle/DESIGN.md) Chipotle +- [`ciao-energy-launch-website`](library/ciao-energy-launch-website/DESIGN.md) Ciao Energy +- [`coca-cola`](library/coca-cola/DESIGN.md) Coca-Cola +- [`crav-burgers`](library/crav-burgers/DESIGN.md) Crav Burgers +- [`danone`](library/danone/DESIGN.md) Danone +- [`dominos`](library/dominos/DESIGN.md) Domino's Pizza Thailand +- [`don-molinico`](library/don-molinico/DESIGN.md) Don Molinico +- [`duroc-1`](library/duroc-1/DESIGN.md) Duroc +- [`easy-tomorrow-brand-website`](library/easy-tomorrow-brand-website/DESIGN.md) EASY TOMORROW +- [`ethical-life`](library/ethical-life/DESIGN.md) Ethical Life +- [`example`](library/example/DESIGN.md) Example +- [`ferrero`](library/ferrero/DESIGN.md) Ferrero Group +- [`godiva`](library/godiva/DESIGN.md) GODIVA +- [`graza`](library/graza/DESIGN.md) Graza +- [`guinness`](library/guinness/DESIGN.md) Guinness +- [`haribo`](library/haribo/DESIGN.md) HARIBO +- [`heinz`](library/heinz/DESIGN.md) Heinz +- [`hersheys`](library/hersheys/DESIGN.md) Hersheyland +- [`hungry-tiger`](library/hungry-tiger/DESIGN.md) Hungry Tiger +- [`instacart`](library/instacart/DESIGN.md) Instacart +- [`ironhill`](library/ironhill/DESIGN.md) Ironhill +- [`kraft-heinz`](library/kraft-heinz/DESIGN.md) The Kraft Heinz Company +- [`lays`](library/lays/DESIGN.md) Lay's +- [`lindt`](library/lindt/DESIGN.md) Lindt +- [`mandms`](library/mandms/DESIGN.md) M&M'S +- [`mars`](library/mars/DESIGN.md) Mars, Incorporated +- [`mcdonalds`](library/mcdonalds/DESIGN.md) McDonald's +- [`mondelez`](library/mondelez/DESIGN.md) Mondelēz International +- [`more-nutrition`](library/more-nutrition/DESIGN.md) More Nutrition +- [`nespresso`](library/nespresso/DESIGN.md) Nespresso +- [`nutella`](library/nutella/DESIGN.md) Nutella +- [`oatly`](library/oatly/DESIGN.md) Oatly +- [`olipop`](library/olipop/DESIGN.md) OLIPOP +- [`oreo`](library/oreo/DESIGN.md) OREO +- [`palmer`](library/palmer/DESIGN.md) Palmer +- [`pepsi`](library/pepsi/DESIGN.md) Pepsi +- [`pepsico`](library/pepsico/DESIGN.md) PepsiCo +- [`planetono`](library/planetono/DESIGN.md) Planetoño +- [`red-bull`](library/red-bull/DESIGN.md) Red Bull +- [`sakazuki`](library/sakazuki/DESIGN.md) SAKAZUKI +- [`savor`](library/savor/DESIGN.md) Savor +- [`shake-shack`](library/shake-shack/DESIGN.md) Shake Shack +- [`snickers`](library/snickers/DESIGN.md) Snickers +- [`som`](library/som/DESIGN.md) SŌM +- [`son-daven`](library/son-daven/DESIGN.md) Son Daven +- [`starbucks-reserve`](library/starbucks-reserve/DESIGN.md) Starbucks Reserve +- [`sweetgreen`](library/sweetgreen/DESIGN.md) sweetgreen +- [`tengile-malamala-collection`](library/tengile-malamala-collection/DESIGN.md) Tengile MalaMala Collection +- [`the-drake-hotel`](library/the-drake-hotel/DESIGN.md) The Drake Hotel +- [`tyson-foods`](library/tyson-foods/DESIGN.md) Tyson Foods +- [`units`](library/units/DESIGN.md) Units +- [`white-desert`](library/white-desert/DESIGN.md) White Desert +- [`yucca-packaging`](library/yucca-packaging/DESIGN.md) Yucca Packaging +- [`zeroz-brand-site`](library/zeroz-brand-site/DESIGN.md) /zeroz Official Site (Otsuka Pharmaceutical) + +## Frontend Frameworks (28) + +- [`ant`](library/ant/DESIGN.md) Ant Design +- [`arco-design`](library/arco-design/DESIGN.md) Arco Design +- [`astro`](library/astro/DESIGN.md) Astro +- [`bootstrap`](library/bootstrap/DESIGN.md) Bootstrap +- [`bulma`](library/bulma/DESIGN.md) Bulma +- [`chakra-ui`](library/chakra-ui/DESIGN.md) Chakra UI +- [`daisyui`](library/daisyui/DESIGN.md) daisyUI +- [`element-plus`](library/element-plus/DESIGN.md) Element Plus +- [`emberjs`](library/emberjs/DESIGN.md) Ember.js +- [`flowbite`](library/flowbite/DESIGN.md) Flowbite +- [`foundation`](library/foundation/DESIGN.md) Foundation +- [`framer-motion`](library/framer-motion/DESIGN.md) Motion +- [`grommet`](library/grommet/DESIGN.md) Grommet +- [`heroui`](library/heroui/DESIGN.md) HeroUI +- [`lit`](library/lit/DESIGN.md) Lit +- [`mantine`](library/mantine/DESIGN.md) Mantine +- [`mui`](library/mui/DESIGN.md) Material UI +- [`naive-ui`](library/naive-ui/DESIGN.md) Naive UI +- [`preact`](library/preact/DESIGN.md) Preact +- [`preline-ui`](library/preline-ui/DESIGN.md) Preline UI +- [`primereact`](library/primereact/DESIGN.md) PrimeReact +- [`quasar`](library/quasar/DESIGN.md) Quasar +- [`qwik`](library/qwik/DESIGN.md) Qwik +- [`remix`](library/remix/DESIGN.md) Remix +- [`semantic-ui`](library/semantic-ui/DESIGN.md) Semantic UI +- [`solidjs`](library/solidjs/DESIGN.md) SolidJS +- [`tailwindcss`](library/tailwindcss/DESIGN.md) Tailwind CSS +- [`vuetify`](library/vuetify/DESIGN.md) Vuetify + +## Gaming (25) + +- [`bandai-namco`](library/bandai-namco/DESIGN.md) Bandai Namco Entertainment America +- [`bethesda`](library/bethesda/DESIGN.md) Bethesda.net +- [`blizzard`](library/blizzard/DESIGN.md) Blizzard Entertainment +- [`capcom`](library/capcom/DESIGN.md) Capcom USA +- [`cd-projekt-red`](library/cd-projekt-red/DESIGN.md) CD PROJEKT RED +- [`corsair`](library/corsair/DESIGN.md) CORSAIR +- [`disney`](library/disney/DESIGN.md) Disney Thailand +- [`electronic-arts`](library/electronic-arts/DESIGN.md) Electronic Arts +- [`epic-games`](library/epic-games/DESIGN.md) Epic Games Store +- [`fromsoftware`](library/fromsoftware/DESIGN.md) FromSoftware +- [`itch-io`](library/itch-io/DESIGN.md) itch.io +- [`konami`](library/konami/DESIGN.md) KONAMI GROUP CORPORATION +- [`nintendo`](library/nintendo/DESIGN.md) Nintendo +- [`razer`](library/razer/DESIGN.md) Razer +- [`riot-games`](library/riot-games/DESIGN.md) Riot Games +- [`roblox`](library/roblox/DESIGN.md) Roblox +- [`rockstar-games`](library/rockstar-games/DESIGN.md) Rockstar Games +- [`sega`](library/sega/DESIGN.md) SEGA +- [`square-enix`](library/square-enix/DESIGN.md) Square Enix +- [`steam`](library/steam/DESIGN.md) Steam +- [`supercell`](library/supercell/DESIGN.md) Supercell +- [`take-two`](library/take-two/DESIGN.md) Take-Two Interactive +- [`unity`](library/unity/DESIGN.md) Unity +- [`valve`](library/valve/DESIGN.md) Valve Corporation +- [`xbox`](library/xbox/DESIGN.md) Xbox + +## Government & Nonprofit (22) + +- [`australia-gov-au`](library/australia-gov-au/DESIGN.md) myGov +- [`canada-ca`](library/canada-ca/DESIGN.md) Canada.ca +- [`charity-water`](library/charity-water/DESIGN.md) charity: water +- [`esa`](library/esa/DESIGN.md) ESA +- [`estonia-e-residency`](library/estonia-e-residency/DESIGN.md) e-Residency of Estonia +- [`european-union`](library/european-union/DESIGN.md) European Union +- [`gov-uk`](library/gov-uk/DESIGN.md) GOV.UK +- [`greenpeace`](library/greenpeace/DESIGN.md) Greenpeace International +- [`mozilla`](library/mozilla/DESIGN.md) Mozilla +- [`nhs`](library/nhs/DESIGN.md) NHS +- [`nsw-gov`](library/nsw-gov/DESIGN.md) NSW Government +- [`red-cross`](library/red-cross/DESIGN.md) American Red Cross +- [`unhcr`](library/unhcr/DESIGN.md) UNHCR +- [`unicef`](library/unicef/DESIGN.md) UNICEF +- [`united-nations`](library/united-nations/DESIGN.md) United Nations +- [`usa-gov`](library/usa-gov/DESIGN.md) USAGov +- [`white-house`](library/white-house/DESIGN.md) The White House +- [`who`](library/who/DESIGN.md) World Health Organization (WHO) +- [`wikipedia`](library/wikipedia/DESIGN.md) Wikipedia +- [`world-bank`](library/world-bank/DESIGN.md) World Bank Group +- [`world-economic-forum`](library/world-economic-forum/DESIGN.md) World Economic Forum +- [`wwf`](library/wwf/DESIGN.md) WWF + +## Headless UI (6) + +- [`ark-ui`](library/ark-ui/DESIGN.md) Ark UI +- [`headlessui`](library/headlessui/DESIGN.md) Headless UI +- [`kobalte`](library/kobalte/DESIGN.md) Kobalte +- [`park-ui`](library/park-ui/DESIGN.md) Park UI +- [`radix-ui`](library/radix-ui/DESIGN.md) Radix UI +- [`shadcn`](library/shadcn/DESIGN.md) shadcn/ui + +## Healthcare & Wellness (25) + +- [`bumrungrad`](library/bumrungrad/DESIGN.md) Bumrungrad International Hospital +- [`cigna`](library/cigna/DESIGN.md) Cigna Healthcare +- [`cleveland-clinic`](library/cleveland-clinic/DESIGN.md) Cleveland Clinic +- [`cvs-health`](library/cvs-health/DESIGN.md) CVS Health +- [`dexcom`](library/dexcom/DESIGN.md) Dexcom +- [`elevance-health`](library/elevance-health/DESIGN.md) Elevance Health +- [`function-health`](library/function-health/DESIGN.md) Function Health +- [`ge-healthcare`](library/ge-healthcare/DESIGN.md) GE HealthCare +- [`headspace`](library/headspace/DESIGN.md) Headspace +- [`illumina`](library/illumina/DESIGN.md) Illumina +- [`intuitive-surgical`](library/intuitive-surgical/DESIGN.md) Intuitive +- [`johns-hopkins-medicine`](library/johns-hopkins-medicine/DESIGN.md) Johns Hopkins Medicine +- [`kaiser-permanente`](library/kaiser-permanente/DESIGN.md) Kaiser Permanente +- [`massachusetts-general-hospital`](library/massachusetts-general-hospital/DESIGN.md) Mass General Brigham (Massachusetts General Hospital) +- [`mayo-clinic`](library/mayo-clinic/DESIGN.md) Mayo Clinic +- [`medtronic`](library/medtronic/DESIGN.md) Medtronic +- [`mount-sinai`](library/mount-sinai/DESIGN.md) Mount Sinai Health System +- [`one-medical`](library/one-medical/DESIGN.md) One Medical +- [`oscar-health`](library/oscar-health/DESIGN.md) Oscar Health +- [`oura`](library/oura/DESIGN.md) Oura +- [`philips`](library/philips/DESIGN.md) Philips (United States) +- [`siemens-healthineers`](library/siemens-healthineers/DESIGN.md) Siemens Healthineers +- [`thermo-fisher`](library/thermo-fisher/DESIGN.md) Thermo Fisher Scientific +- [`unitedhealth-group`](library/unitedhealth-group/DESIGN.md) UnitedHealth Group +- [`whoop`](library/whoop/DESIGN.md) WHOOP + +## Home & Furniture (20) + +- [`article`](library/article/DESIGN.md) Article +- [`bandb-italia`](library/bandb-italia/DESIGN.md) B&B Italia +- [`burrow`](library/burrow/DESIGN.md) Burrow +- [`casper`](library/casper/DESIGN.md) Casper +- [`crate-and-barrel`](library/crate-and-barrel/DESIGN.md) Crate & Barrel +- [`dwr`](library/dwr/DESIGN.md) Design Within Reach +- [`floyd`](library/floyd/DESIGN.md) Floyd +- [`fritz-hansen`](library/fritz-hansen/DESIGN.md) Fritz Hansen +- [`hay`](library/hay/DESIGN.md) HAY +- [`herman-miller`](library/herman-miller/DESIGN.md) Herman Miller +- [`ikea`](library/ikea/DESIGN.md) IKEA +- [`kartell`](library/kartell/DESIGN.md) Kartell +- [`knoll`](library/knoll/DESIGN.md) Knoll (Home shop) +- [`le-creuset`](library/le-creuset/DESIGN.md) Le Creuset +- [`ligne-roset`](library/ligne-roset/DESIGN.md) Ligne Roset +- [`muji`](library/muji/DESIGN.md) MUJI +- [`muuto`](library/muuto/DESIGN.md) Muuto +- [`smeg`](library/smeg/DESIGN.md) Smeg +- [`vitra`](library/vitra/DESIGN.md) Vitra +- [`west-elm`](library/west-elm/DESIGN.md) West Elm + +## Layout & Structure (3) + +- [`levels`](library/levels/DESIGN.md) Levels +- [`perspective`](library/perspective/DESIGN.md) Perspective +- [`spacious`](library/spacious/DESIGN.md) Spacious + +## Logistics & Mobility (20) + +- [`bolt`](library/bolt/DESIGN.md) Bolt +- [`db-schenker`](library/db-schenker/DESIGN.md) DSV +- [`deutsche-bahn`](library/deutsche-bahn/DESIGN.md) Deutsche Bahn +- [`dhl`](library/dhl/DESIGN.md) DHL +- [`didi`](library/didi/DESIGN.md) DiDi Global +- [`easypost`](library/easypost/DESIGN.md) EasyPost +- [`eurostar`](library/eurostar/DESIGN.md) Eurostar +- [`fedex`](library/fedex/DESIGN.md) FedEx +- [`flexport`](library/flexport/DESIGN.md) Flexport +- [`grab`](library/grab/DESIGN.md) Grab +- [`kuehne-nagel`](library/kuehne-nagel/DESIGN.md) Kuehne+Nagel +- [`lime`](library/lime/DESIGN.md) Lime +- [`lyft`](library/lyft/DESIGN.md) Lyft +- [`maersk`](library/maersk/DESIGN.md) Maersk +- [`shippo`](library/shippo/DESIGN.md) Shippo +- [`trainline`](library/trainline/DESIGN.md) Trainline +- [`uber-eats`](library/uber-eats/DESIGN.md) Uber Eats +- [`ups`](library/ups/DESIGN.md) UPS +- [`waymo`](library/waymo/DESIGN.md) Waymo +- [`zoox`](library/zoox/DESIGN.md) Zoox + +## Luxury (32) + +- [`aston-martin`](library/aston-martin/DESIGN.md) Aston Martin +- [`audemars-piguet`](library/audemars-piguet/DESIGN.md) Audemars Piguet +- [`balenciaga`](library/balenciaga/DESIGN.md) Balenciaga +- [`bentley`](library/bentley/DESIGN.md) Bentley Motors +- [`bottega-veneta`](library/bottega-veneta/DESIGN.md) Bottega Veneta +- [`breitling`](library/breitling/DESIGN.md) Breitling +- [`brunello-cucinelli`](library/brunello-cucinelli/DESIGN.md) Brunello Cucinelli +- [`burberry`](library/burberry/DESIGN.md) Burberry +- [`cartier`](library/cartier/DESIGN.md) Cartier +- [`chanel`](library/chanel/DESIGN.md) CHANEL +- [`chopard`](library/chopard/DESIGN.md) Chopard +- [`christian-louboutin`](library/christian-louboutin/DESIGN.md) Christian Louboutin +- [`graff`](library/graff/DESIGN.md) Graff +- [`gucci`](library/gucci/DESIGN.md) Gucci +- [`hermes`](library/hermes/DESIGN.md) Hermès +- [`iwc-schaffhausen`](library/iwc-schaffhausen/DESIGN.md) IWC Schaffhausen +- [`jaeger-lecoultre`](library/jaeger-lecoultre/DESIGN.md) Jaeger-LeCoultre +- [`loewe`](library/loewe/DESIGN.md) LOEWE +- [`maserati`](library/maserati/DESIGN.md) Maserati +- [`mclaren`](library/mclaren/DESIGN.md) McLaren Automotive +- [`moncler`](library/moncler/DESIGN.md) Moncler +- [`montblanc`](library/montblanc/DESIGN.md) Montblanc +- [`omega`](library/omega/DESIGN.md) OMEGA +- [`patek-philippe`](library/patek-philippe/DESIGN.md) Patek Philippe +- [`piaget`](library/piaget/DESIGN.md) Piaget +- [`prada`](library/prada/DESIGN.md) Prada +- [`rolex`](library/rolex/DESIGN.md) Rolex +- [`rolls-royce-motor-cars`](library/rolls-royce-motor-cars/DESIGN.md) Rolls-Royce Motor Cars +- [`tiffany-and-co`](library/tiffany-and-co/DESIGN.md) Tiffany & Co. +- [`vacheron-constantin`](library/vacheron-constantin/DESIGN.md) Vacheron Constantin +- [`valentino`](library/valentino/DESIGN.md) Valentino +- [`van-cleef-and-arpels`](library/van-cleef-and-arpels/DESIGN.md) Van Cleef & Arpels + +## Media & Consumer (1) + +- [`xiaohongshu`](library/xiaohongshu/DESIGN.md) Xiaohongshu + +## Media & Consumer Tech (21) + +- [`apple`](library/apple/DESIGN.md) Apple +- [`discord`](library/discord/DESIGN.md) Discord +- [`nvidia`](library/nvidia/DESIGN.md) NVIDIA +- [`patreon`](library/patreon/DESIGN.md) Patreon +- [`pinterest`](library/pinterest/DESIGN.md) Pinterest +- [`playstation`](library/playstation/DESIGN.md) PlayStation +- [`quora`](library/quora/DESIGN.md) Quora +- [`reddit`](library/reddit/DESIGN.md) Reddit, Inc. +- [`signal`](library/signal/DESIGN.md) Signal +- [`snap`](library/snap/DESIGN.md) Snap Inc. +- [`spacex`](library/spacex/DESIGN.md) SpaceX +- [`spotify`](library/spotify/DESIGN.md) Spotify +- [`telegram`](library/telegram/DESIGN.md) Telegram +- [`theverge`](library/theverge/DESIGN.md) The Verge +- [`tumblr`](library/tumblr/DESIGN.md) Tumblr +- [`twitch`](library/twitch/DESIGN.md) Twitch +- [`uber`](library/uber/DESIGN.md) Uber +- [`vimeo`](library/vimeo/DESIGN.md) Vimeo +- [`vodafone`](library/vodafone/DESIGN.md) Vodafone +- [`whatsapp`](library/whatsapp/DESIGN.md) WhatsApp +- [`wired`](library/wired/DESIGN.md) WIRED + +## Modern & Minimal (9) + +- [`clean`](library/clean/DESIGN.md) Clean +- [`contemporary`](library/contemporary/DESIGN.md) Contemporary +- [`flat`](library/flat/DESIGN.md) Flat +- [`minimal`](library/minimal/DESIGN.md) Minimal +- [`modern`](library/modern/DESIGN.md) Modern +- [`mono`](library/mono/DESIGN.md) Mono +- [`refined`](library/refined/DESIGN.md) Refined +- [`simple`](library/simple/DESIGN.md) Simple +- [`sleek`](library/sleek/DESIGN.md) Sleek + +## Morphism & Effects (5) + +- [`claymorphism`](library/claymorphism/DESIGN.md) Claymorphism +- [`glassmorphism`](library/glassmorphism/DESIGN.md) Glassmorphism +- [`gradient`](library/gradient/DESIGN.md) Gradient +- [`neumorphism`](library/neumorphism/DESIGN.md) Neumorphism +- [`skeumorphism`](library/skeumorphism/DESIGN.md) Skeumorphism + +## Music & Audio (24) + +- [`ableton`](library/ableton/DESIGN.md) Ableton +- [`apple-music`](library/apple-music/DESIGN.md) Apple Music +- [`audible`](library/audible/DESIGN.md) Audible +- [`bandcamp`](library/bandcamp/DESIGN.md) Bandcamp +- [`beats-by-dre`](library/beats-by-dre/DESIGN.md) Beats by Dre +- [`bose`](library/bose/DESIGN.md) Bose +- [`deezer`](library/deezer/DESIGN.md) Deezer +- [`fender`](library/fender/DESIGN.md) Fender +- [`gibson`](library/gibson/DESIGN.md) Gibson +- [`iheartradio`](library/iheartradio/DESIGN.md) iHeartRadio +- [`jbl`](library/jbl/DESIGN.md) JBL Thailand +- [`marshall`](library/marshall/DESIGN.md) Marshall +- [`native-instruments`](library/native-instruments/DESIGN.md) Native Instruments +- [`netflix`](library/netflix/DESIGN.md) Netflix +- [`roland`](library/roland/DESIGN.md) Roland +- [`sennheiser`](library/sennheiser/DESIGN.md) Sennheiser +- [`shazam`](library/shazam/DESIGN.md) Shazam +- [`sonos`](library/sonos/DESIGN.md) Sonos +- [`soundcloud`](library/soundcloud/DESIGN.md) SoundCloud +- [`splice`](library/splice/DESIGN.md) Splice +- [`teenage-engineering`](library/teenage-engineering/DESIGN.md) teenage engineering +- [`universal-music-group`](library/universal-music-group/DESIGN.md) Universal Music Group +- [`yamaha`](library/yamaha/DESIGN.md) Yamaha Music USA +- [`youtube`](library/youtube/DESIGN.md) YouTube + +## News & Publishing (23) + +- [`al-jazeera`](library/al-jazeera/DESIGN.md) Al Jazeera +- [`associated-press`](library/associated-press/DESIGN.md) Associated Press (AP News) +- [`axios`](library/axios/DESIGN.md) Axios +- [`bbc`](library/bbc/DESIGN.md) BBC +- [`cnn`](library/cnn/DESIGN.md) CNN +- [`der-spiegel`](library/der-spiegel/DESIGN.md) DER SPIEGEL +- [`el-pais`](library/el-pais/DESIGN.md) EL PAÍS +- [`financial-times`](library/financial-times/DESIGN.md) Financial Times +- [`le-monde`](library/le-monde/DESIGN.md) Le Monde +- [`medium`](library/medium/DESIGN.md) Medium +- [`monocle`](library/monocle/DESIGN.md) Monocle +- [`national-geographic`](library/national-geographic/DESIGN.md) National Geographic +- [`npr`](library/npr/DESIGN.md) NPR +- [`politico`](library/politico/DESIGN.md) POLITICO +- [`south-china-morning-post`](library/south-china-morning-post/DESIGN.md) South China Morning Post +- [`substack`](library/substack/DESIGN.md) Substack +- [`the-atlantic`](library/the-atlantic/DESIGN.md) The Atlantic +- [`the-guardian`](library/the-guardian/DESIGN.md) The Guardian +- [`the-new-york-times`](library/the-new-york-times/DESIGN.md) The New York Times +- [`the-new-yorker`](library/the-new-yorker/DESIGN.md) The New Yorker +- [`the-washington-post`](library/the-washington-post/DESIGN.md) The Washington Post +- [`vogue`](library/vogue/DESIGN.md) Vogue +- [`vox`](library/vox/DESIGN.md) Vox + +## Pharma (19) + +- [`abbott`](library/abbott/DESIGN.md) Abbott +- [`abbvie`](library/abbvie/DESIGN.md) AbbVie +- [`amgen`](library/amgen/DESIGN.md) Amgen +- [`astrazeneca`](library/astrazeneca/DESIGN.md) AstraZeneca +- [`bayer`](library/bayer/DESIGN.md) Bayer +- [`bristol-myers-squibb`](library/bristol-myers-squibb/DESIGN.md) Bristol Myers Squibb +- [`eli-lilly`](library/eli-lilly/DESIGN.md) Eli Lilly and Company +- [`gilead`](library/gilead/DESIGN.md) Gilead Sciences +- [`gsk`](library/gsk/DESIGN.md) GSK +- [`johnson-and-johnson`](library/johnson-and-johnson/DESIGN.md) Johnson & Johnson +- [`merck`](library/merck/DESIGN.md) Merck +- [`moderna`](library/moderna/DESIGN.md) Moderna +- [`novartis`](library/novartis/DESIGN.md) Novartis +- [`novo-nordisk`](library/novo-nordisk/DESIGN.md) Novo Nordisk +- [`pfizer`](library/pfizer/DESIGN.md) Pfizer +- [`regeneron`](library/regeneron/DESIGN.md) Regeneron +- [`roche`](library/roche/DESIGN.md) Roche +- [`sanofi`](library/sanofi/DESIGN.md) Sanofi +- [`takeda`](library/takeda/DESIGN.md) Takeda + +## Portfolio (80) + +- [`1820-productions`](library/1820-productions/DESIGN.md) 1820 Productions +- [`adam-bricker`](library/adam-bricker/DESIGN.md) Adam Bricker +- [`adovasio`](library/adovasio/DESIGN.md) Adovasio +- [`aino-agency`](library/aino-agency/DESIGN.md) Aino +- [`artefakt`](library/artefakt/DESIGN.md) Artefakt +- [`artem-shcherbakov`](library/artem-shcherbakov/DESIGN.md) Artem Shcherbakov +- [`artiom-yakushev`](library/artiom-yakushev/DESIGN.md) Artiom Yakushev +- [`ava-srg`](library/ava-srg/DESIGN.md) AVA SRG +- [`beyond-design-into-experience`](library/beyond-design-into-experience/DESIGN.md) Beyond Design Into Experience (Plus X 15th Anniversary) +- [`bitter-creek`](library/bitter-creek/DESIGN.md) Bitter Creek +- [`c-design-by-dylan`](library/c-design-by-dylan/DESIGN.md) Design by Dylan +- [`cathy-dolle-portfolio-1`](library/cathy-dolle-portfolio-1/DESIGN.md) Cathy Dolle +- [`chew-productions`](library/chew-productions/DESIGN.md) CHEW +- [`cipher`](library/cipher/DESIGN.md) CIPHER +- [`clou-agency-portfolio`](library/clou-agency-portfolio/DESIGN.md) Clou Werbeagentur Luzern +- [`corentin-bernadou-portfolio`](library/corentin-bernadou-portfolio/DESIGN.md) Corentin Bernadou Portfolio +- [`cyphr`](library/cyphr/DESIGN.md) Cyphr +- [`edoardo-lunardi`](library/edoardo-lunardi/DESIGN.md) Edoardo Lunardi +- [`eduard-bodak-portfolio`](library/eduard-bodak-portfolio/DESIGN.md) Eduard Bodak — Portfolio +- [`elliott-mangham`](library/elliott-mangham/DESIGN.md) Elliott Mangham +- [`emele-collab`](library/emele-collab/DESIGN.md) Emele Collab +- [`ethan-tom`](library/ethan-tom/DESIGN.md) Ethan & Tom +- [`etienne-planeix`](library/etienne-planeix/DESIGN.md) Etienne Planeix +- [`fine-thought-site`](library/fine-thought-site/DESIGN.md) Fine Thought +- [`flabbergast-agency`](library/flabbergast-agency/DESIGN.md) Flabbergast Agency +- [`form-fun-studio`](library/form-fun-studio/DESIGN.md) Form&Fun Studio +- [`fromanother-love`](library/fromanother-love/DESIGN.md) fromanother +- [`gil-huybrecht`](library/gil-huybrecht/DESIGN.md) Gil Huybrecht — Freelance designer & art director +- [`glitch-grit`](library/glitch-grit/DESIGN.md) Glitch&Grit +- [`griflan-2`](library/griflan-2/DESIGN.md) Griflan +- [`haoqi-design`](library/haoqi-design/DESIGN.md) HAOQI.DESIGN +- [`il-capo-production`](library/il-capo-production/DESIGN.md) IL CAPO PRODUCTION +- [`jam-area`](library/jam-area/DESIGN.md) Jam Area +- [`jasmine-gunarto`](library/jasmine-gunarto/DESIGN.md) Jasmine Gunarto +- [`jason-bergh`](library/jason-bergh/DESIGN.md) Jason Bergh +- [`julien-calot`](library/julien-calot/DESIGN.md) Julien Calot +- [`lacrapule-studio`](library/lacrapule-studio/DESIGN.md) LaCrapule Studio +- [`lo2s`](library/lo2s/DESIGN.md) LO2S +- [`mantis`](library/mantis/DESIGN.md) Mantis +- [`max-milkin-portfolio`](library/max-milkin-portfolio/DESIGN.md) Max Milkin Portfolio +- [`naughtyduk-c-1`](library/naughtyduk-c-1/DESIGN.md) NaughtyDuk +- [`new-genre-studio`](library/new-genre-studio/DESIGN.md) New Genre +- [`nicola-romeitm`](library/nicola-romeitm/DESIGN.md) Nicola Romei +- [`ning-huang-digital-designer`](library/ning-huang-digital-designer/DESIGN.md) Ning Huang +- [`nothin`](library/nothin/DESIGN.md) NOTHIN' +- [`obys-2`](library/obys-2/DESIGN.md) Obys Agency +- [`off-menu`](library/off-menu/DESIGN.md) Off Menu +- [`oimachi`](library/oimachi/DESIGN.md) Oimachi +- [`olha-lazarieva`](library/olha-lazarieva/DESIGN.md) Olha Lazarieva +- [`pacome-pertant-portfolio`](library/pacome-pertant-portfolio/DESIGN.md) Pacôme Pertant Portfolio +- [`paolo-vendramini`](library/paolo-vendramini/DESIGN.md) Paolo Vendramini +- [`paper-tiger`](library/paper-tiger/DESIGN.md) Paper Tiger +- [`partizan`](library/partizan/DESIGN.md) Partizan +- [`paul-kalkbrenner`](library/paul-kalkbrenner/DESIGN.md) Paul Kalkbrenner +- [`pensatori-irrazionali`](library/pensatori-irrazionali/DESIGN.md) Pensatori Irrazionali +- [`pictoric`](library/pictoric/DESIGN.md) Pictoric +- [`podium`](library/podium/DESIGN.md) Podium +- [`prototype-3`](library/prototype-3/DESIGN.md) Prototype (Prototype Studio) +- [`px-push`](library/px-push/DESIGN.md) PX PUSH +- [`ravi-klaassens`](library/ravi-klaassens/DESIGN.md) Ravi Klaassens (R—K Design & Code) +- [`ref-digital`](library/ref-digital/DESIGN.md) REF Digital +- [`reform-collective-5`](library/reform-collective-5/DESIGN.md) Reform Collective +- [`robot`](library/robot/DESIGN.md) Robot +- [`san-rita`](library/san-rita/DESIGN.md) Atelier San Rita +- [`shader-development-studio`](library/shader-development-studio/DESIGN.md) Shader Development Studio +- [`sidewave`](library/sidewave/DESIGN.md) Sidewave +- [`sileent`](library/sileent/DESIGN.md) Sileent +- [`silent-house`](library/silent-house/DESIGN.md) Silent House +- [`simonholm-studio`](library/simonholm-studio/DESIGN.md) Simon Holm Larsen - Brand Designer (simonholm.studio) +- [`sohub`](library/sohub/DESIGN.md) SOHub +- [`studio-k95-3`](library/studio-k95-3/DESIGN.md) Studio K95 +- [`studio-namma`](library/studio-namma/DESIGN.md) Studio Namma +- [`studio-tyrsa`](library/studio-tyrsa/DESIGN.md) Studio Tyrsa +- [`studio375-2`](library/studio375-2/DESIGN.md) Studio375 +- [`trionn-2`](library/trionn-2/DESIGN.md) TRIONN +- [`truus`](library/truus/DESIGN.md) Truus +- [`twks-1`](library/twks-1/DESIGN.md) twks +- [`up-up`](library/up-up/DESIGN.md) The Up&Up Group +- [`warm-fuzzy`](library/warm-fuzzy/DESIGN.md) Warm & Fuzzy +- [`wildy-riftian-portfolio`](library/wildy-riftian-portfolio/DESIGN.md) Wildy Riftian + +## Product & SaaS (73) + +- [`adobe`](library/adobe/DESIGN.md) Adobe +- [`alethia`](library/alethia/DESIGN.md) Alethia +- [`amplitude`](library/amplitude/DESIGN.md) Amplitude +- [`apollo`](library/apollo/DESIGN.md) Apollo +- [`attio`](library/attio/DESIGN.md) Attio +- [`aventura-dental-arts`](library/aventura-dental-arts/DESIGN.md) Aventura Dental Arts +- [`beehiiv`](library/beehiiv/DESIGN.md) beehiiv +- [`brevo`](library/brevo/DESIGN.md) Brevo +- [`buffer`](library/buffer/DESIGN.md) Buffer +- [`butter`](library/butter/DESIGN.md) Butter +- [`canva`](library/canva/DESIGN.md) Canva +- [`champions-for-good`](library/champions-for-good/DESIGN.md) Champions for Good Club +- [`cisco`](library/cisco/DESIGN.md) Cisco +- [`convertkit`](library/convertkit/DESIGN.md) Kit +- [`customerio`](library/customerio/DESIGN.md) Customer.io +- [`damn-good-brands-2`](library/damn-good-brands-2/DESIGN.md) Damn Good Brands +- [`datadog`](library/datadog/DESIGN.md) Datadog +- [`deel`](library/deel/DESIGN.md) Deel +- [`documenso`](library/documenso/DESIGN.md) Documenso +- [`dont-board-me`](library/dont-board-me/DESIGN.md) Don't Board Me +- [`dropbox`](library/dropbox/DESIGN.md) Dropbox +- [`dub`](library/dub/DESIGN.md) Dub +- [`enerblock`](library/enerblock/DESIGN.md) Enerblock +- [`fathom-analytics`](library/fathom-analytics/DESIGN.md) Fathom Analytics +- [`freshworks-g`](library/freshworks-g/DESIGN.md) Freshworks +- [`fullstory`](library/fullstory/DESIGN.md) Fullstory +- [`get-hyped`](library/get-hyped/DESIGN.md) Get Hyped +- [`gumroad`](library/gumroad/DESIGN.md) Gumroad +- [`gusto`](library/gusto/DESIGN.md) Gusto +- [`hilden-kaira`](library/hilden-kaira/DESIGN.md) Hildén & Kaira +- [`hootsuite`](library/hootsuite/DESIGN.md) Hootsuite +- [`hotjar`](library/hotjar/DESIGN.md) Contentsquare +- [`hubspot`](library/hubspot/DESIGN.md) HubSpot +- [`hut-8`](library/hut-8/DESIGN.md) Hut 8 +- [`instagram`](library/instagram/DESIGN.md) Instagram +- [`instantly`](library/instantly/DESIGN.md) Instantly +- [`izanami`](library/izanami/DESIGN.md) Izanami +- [`jacques-cie`](library/jacques-cie/DESIGN.md) Jacques + Cie +- [`jesko-jets`](library/jesko-jets/DESIGN.md) Jesko Jets +- [`later`](library/later/DESIGN.md) Later +- [`lemlist`](library/lemlist/DESIGN.md) lemlist +- [`lemon-squeezy`](library/lemon-squeezy/DESIGN.md) Lemon Squeezy +- [`linktree`](library/linktree/DESIGN.md) Linktree +- [`loops`](library/loops/DESIGN.md) Loops +- [`medusmo`](library/medusmo/DESIGN.md) Medusmo +- [`mixpanel`](library/mixpanel/DESIGN.md) Mixpanel +- [`montfort`](library/montfort/DESIGN.md) Montfort Group +- [`myhealthprac`](library/myhealthprac/DESIGN.md) MyHealthPrac +- [`netlify`](library/netlify/DESIGN.md) Netlify +- [`nk-studio`](library/nk-studio/DESIGN.md) /nk.studio +- [`pantheon-media-group`](library/pantheon-media-group/DESIGN.md) Pantheon Media Group +- [`phive-clubs`](library/phive-clubs/DESIGN.md) Phive Clubs +- [`pieterkoopt-r`](library/pieterkoopt-r/DESIGN.md) PieterKoopt® +- [`pipedrive`](library/pipedrive/DESIGN.md) Pipedrive +- [`plausible`](library/plausible/DESIGN.md) Plausible Analytics +- [`remote`](library/remote/DESIGN.md) Remote +- [`rippling`](library/rippling/DESIGN.md) Rippling +- [`salesforce-g`](library/salesforce-g/DESIGN.md) Salesforce +- [`servicenow-g`](library/servicenow-g/DESIGN.md) ServiceNow +- [`sharplink`](library/sharplink/DESIGN.md) Sharplink +- [`simple-analytics`](library/simple-analytics/DESIGN.md) Simple Analytics +- [`square`](library/square/DESIGN.md) Square +- [`squarespace`](library/squarespace/DESIGN.md) Squarespace +- [`surveymonkey`](library/surveymonkey/DESIGN.md) SurveyMonkey +- [`tiktok`](library/tiktok/DESIGN.md) TikTok +- [`truckn-roll-r`](library/truckn-roll-r/DESIGN.md) Truck'N Roll +- [`twenty`](library/twenty/DESIGN.md) Twenty +- [`twilio`](library/twilio/DESIGN.md) Twilio +- [`typeform`](library/typeform/DESIGN.md) Typeform +- [`umami`](library/umami/DESIGN.md) Umami +- [`united-carriers`](library/united-carriers/DESIGN.md) United Carriers +- [`wix`](library/wix/DESIGN.md) Wix +- [`zoom`](library/zoom/DESIGN.md) Zoom + +## Productivity & SaaS (34) + +- [`affine`](library/affine/DESIGN.md) AFFiNE +- [`anytype`](library/anytype/DESIGN.md) Anytype +- [`arc`](library/arc/DESIGN.md) Arc +- [`basecamp`](library/basecamp/DESIGN.md) Basecamp +- [`bear`](library/bear/DESIGN.md) Bear +- [`cal`](library/cal/DESIGN.md) Cal.com +- [`calendly`](library/calendly/DESIGN.md) Calendly +- [`capacities`](library/capacities/DESIGN.md) Capacities +- [`clickup`](library/clickup/DESIGN.md) ClickUp +- [`craft`](library/craft/DESIGN.md) Craft +- [`cron`](library/cron/DESIGN.md) Cron +- [`docusign`](library/docusign/DESIGN.md) Docusign +- [`evernote`](library/evernote/DESIGN.md) Evernote +- [`grammarly`](library/grammarly/DESIGN.md) Grammarly +- [`heptabase`](library/heptabase/DESIGN.md) Heptabase +- [`intercom`](library/intercom/DESIGN.md) Intercom +- [`linear-app`](library/linear-app/DESIGN.md) Linear +- [`logseq`](library/logseq/DESIGN.md) Logseq +- [`loom`](library/loom/DESIGN.md) Loom +- [`lucid`](library/lucid/DESIGN.md) Lucid +- [`make`](library/make/DESIGN.md) Make +- [`mintlify`](library/mintlify/DESIGN.md) Mintlify +- [`mural`](library/mural/DESIGN.md) Mural +- [`mymind`](library/mymind/DESIGN.md) mymind +- [`notion`](library/notion/DESIGN.md) Notion +- [`obsidian`](library/obsidian/DESIGN.md) Obsidian +- [`plane`](library/plane/DESIGN.md) Plane +- [`resend`](library/resend/DESIGN.md) Resend +- [`slack`](library/slack/DESIGN.md) Slack +- [`tana`](library/tana/DESIGN.md) Tana +- [`things`](library/things/DESIGN.md) Things +- [`todoist`](library/todoist/DESIGN.md) Todoist +- [`trello`](library/trello/DESIGN.md) Trello +- [`zapier`](library/zapier/DESIGN.md) Zapier + +## Professional & Corporate (8) + +- [`application`](library/application/DESIGN.md) Application +- [`corporate`](library/corporate/DESIGN.md) Corporate +- [`dashboard`](library/dashboard/DESIGN.md) Dashboard +- [`elegant`](library/elegant/DESIGN.md) Elegant +- [`enterprise`](library/enterprise/DESIGN.md) Enterprise +- [`luxury`](library/luxury/DESIGN.md) Luxury +- [`premium`](library/premium/DESIGN.md) Premium +- [`professional`](library/professional/DESIGN.md) Professional + +## Real Estate & PropTech (15) + +- [`cbre`](library/cbre/DESIGN.md) CBRE +- [`century-21`](library/century-21/DESIGN.md) Century 21 +- [`christies-international-real-estate`](library/christies-international-real-estate/DESIGN.md) Christie's International Real Estate +- [`coldwell-banker`](library/coldwell-banker/DESIGN.md) Coldwell Banker +- [`compass`](library/compass/DESIGN.md) Compass +- [`cushman-and-wakefield`](library/cushman-and-wakefield/DESIGN.md) Cushman & Wakefield +- [`jll`](library/jll/DESIGN.md) JLL +- [`knight-frank`](library/knight-frank/DESIGN.md) Knight Frank +- [`opendoor`](library/opendoor/DESIGN.md) Opendoor +- [`re-max`](library/re-max/DESIGN.md) RE/MAX (Thailand, remax.com) +- [`rightmove`](library/rightmove/DESIGN.md) Rightmove +- [`savills`](library/savills/DESIGN.md) Savills +- [`sothebys-realty`](library/sothebys-realty/DESIGN.md) Sotheby's International Realty +- [`wework`](library/wework/DESIGN.md) WeWork +- [`zillow`](library/zillow/DESIGN.md) Zillow + +## Retail & E-commerce (39) + +- [`aardvark-book-club`](library/aardvark-book-club/DESIGN.md) Aardvark Book Club +- [`akaru-2`](library/akaru-2/DESIGN.md) Akaru +- [`aldi`](library/aldi/DESIGN.md) Aldi +- [`aliexpress`](library/aliexpress/DESIGN.md) AliExpress +- [`amazon`](library/amazon/DESIGN.md) Amazon +- [`bright-biotech`](library/bright-biotech/DESIGN.md) Bright Biotech +- [`cdiscount-jumping-max`](library/cdiscount-jumping-max/DESIGN.md) Cdiscount +- [`costco`](library/costco/DESIGN.md) Costco +- [`damso`](library/damso/DESIGN.md) Damso +- [`decathlon-yestalgia`](library/decathlon-yestalgia/DESIGN.md) Decathlon Yestalgia +- [`farm-minerals`](library/farm-minerals/DESIGN.md) Farm Minerals +- [`fc-porto-memorial`](library/fc-porto-memorial/DESIGN.md) FC Porto Memorial +- [`flipkart`](library/flipkart/DESIGN.md) Flipkart +- [`floema`](library/floema/DESIGN.md) Floema +- [`hhhusher`](library/hhhusher/DESIGN.md) HHHusher +- [`house-of-corto`](library/house-of-corto/DESIGN.md) House of Corto +- [`iyo`](library/iyo/DESIGN.md) iyO +- [`jd-com`](library/jd-com/DESIGN.md) JD.com Global (京东全球版) +- [`lama-lama-2`](library/lama-lama-2/DESIGN.md) Lama Lama +- [`lidl`](library/lidl/DESIGN.md) Lidl +- [`luminaire-authentik`](library/luminaire-authentik/DESIGN.md) Luminaire Authentik +- [`make-it-real-foundation-merch`](library/make-it-real-foundation-merch/DESIGN.md) Make It Real Foundation Merch +- [`meituan`](library/meituan/DESIGN.md) Meituan (美团) +- [`mob-links`](library/mob-links/DESIGN.md) Moblinks +- [`neon-rated`](library/neon-rated/DESIGN.md) NEON Rated +- [`no-art`](library/no-art/DESIGN.md) No Art +- [`nordstrom`](library/nordstrom/DESIGN.md) Nordstrom +- [`opal-tadpole`](library/opal-tadpole/DESIGN.md) Opal Electronics +- [`pedestal`](library/pedestal/DESIGN.md) Pedestal +- [`radian`](library/radian/DESIGN.md) Radian +- [`rakuten`](library/rakuten/DESIGN.md) Rakuten +- [`shopify-supply-performance-pack`](library/shopify-supply-performance-pack/DESIGN.md) Shopify Supply (Performance Pack) +- [`sowieso-wero`](library/sowieso-wero/DESIGN.md) Sowieso Wero +- [`ssense`](library/ssense/DESIGN.md) SSENSE +- [`target`](library/target/DESIGN.md) Target +- [`vero-new-york`](library/vero-new-york/DESIGN.md) Vero +- [`walgreens`](library/walgreens/DESIGN.md) Walgreens +- [`walmart`](library/walmart/DESIGN.md) Walmart +- [`whole-foods`](library/whole-foods/DESIGN.md) Whole Foods Market + +## Retro & Nostalgic (4) + +- [`dithered`](library/dithered/DESIGN.md) Dithered +- [`paper`](library/paper/DESIGN.md) Paper +- [`retro`](library/retro/DESIGN.md) Retro +- [`vintage`](library/vintage/DESIGN.md) Vintage + +## Sports & Fitness (25) + +- [`barrys`](library/barrys/DESIGN.md) Barry's +- [`crossfit`](library/crossfit/DESIGN.md) CrossFit +- [`equinox`](library/equinox/DESIGN.md) Equinox +- [`espn`](library/espn/DESIGN.md) ESPN +- [`fifa`](library/fifa/DESIGN.md) FIFA +- [`formula1`](library/formula1/DESIGN.md) Formula 1 +- [`gymshark`](library/gymshark/DESIGN.md) Gymshark +- [`manchester-city`](library/manchester-city/DESIGN.md) Manchester City +- [`nba`](library/nba/DESIGN.md) NBA +- [`new-balance`](library/new-balance/DESIGN.md) New Balance +- [`nfl`](library/nfl/DESIGN.md) NFL +- [`olympics`](library/olympics/DESIGN.md) Olympics +- [`orangetheory`](library/orangetheory/DESIGN.md) Orangetheory Fitness +- [`peloton`](library/peloton/DESIGN.md) Peloton +- [`premier-league`](library/premier-league/DESIGN.md) Premier League +- [`puma`](library/puma/DESIGN.md) PUMA Thailand +- [`real-madrid`](library/real-madrid/DESIGN.md) Real Madrid +- [`reebok`](library/reebok/DESIGN.md) Reebok +- [`salomon`](library/salomon/DESIGN.md) Salomon +- [`soulcycle`](library/soulcycle/DESIGN.md) SoulCycle +- [`specialized`](library/specialized/DESIGN.md) Specialized +- [`strava`](library/strava/DESIGN.md) Strava +- [`trek-bicycles`](library/trek-bicycles/DESIGN.md) Trek Bicycles +- [`under-armour`](library/under-armour/DESIGN.md) Under Armour +- [`wimbledon`](library/wimbledon/DESIGN.md) Wimbledon + +## Starter (2) + +- [`default`](library/default/DESIGN.md) Neutral Modern +- [`warm-editorial`](library/warm-editorial/DESIGN.md) Warm Editorial + +## Tech & AI (88) + +- [`1password`](library/1password/DESIGN.md) 1Password +- [`35mm`](library/35mm/DESIGN.md) 35mm +- [`8bit-ai`](library/8bit-ai/DESIGN.md) 8bit.ai +- [`adaline`](library/adaline/DESIGN.md) Adaline +- [`aether-1`](library/aether-1/DESIGN.md) Aether 1 +- [`anime-js`](library/anime-js/DESIGN.md) Anime.js +- [`apechain`](library/apechain/DESIGN.md) ApeChain +- [`aspen-search`](library/aspen-search/DESIGN.md) Aspen Search +- [`astrodither`](library/astrodither/DESIGN.md) ASTRODITHER +- [`avatr-vision-xpectra`](library/avatr-vision-xpectra/DESIGN.md) AVATR Vision Xpectra +- [`avax-network-1`](library/avax-network-1/DESIGN.md) Avalanche +- [`bitwarden`](library/bitwarden/DESIGN.md) Bitwarden +- [`breakthrough-energy`](library/breakthrough-energy/DESIGN.md) Breakthrough Energy +- [`caeli-energie`](library/caeli-energie/DESIGN.md) Caeli Energie +- [`cerebrium`](library/cerebrium/DESIGN.md) Cerebrium +- [`ciridae`](library/ciridae/DESIGN.md) Ciridae +- [`clay-boan-25`](library/clay-boan-25/DESIGN.md) Clay Boan +- [`coffeetech-r`](library/coffeetech-r/DESIGN.md) CoffeeTech® +- [`crowdstrike`](library/crowdstrike/DESIGN.md) CrowdStrike +- [`d2c-life-science`](library/d2c-life-science/DESIGN.md) D2C Life Science +- [`darknode`](library/darknode/DESIGN.md) Darknode +- [`davincii`](library/davincii/DESIGN.md) DaVincii +- [`daydream-player`](library/daydream-player/DESIGN.md) Daydream Player +- [`der-baukasten`](library/der-baukasten/DESIGN.md) Der Baukasten +- [`digilab`](library/digilab/DESIGN.md) Digilab +- [`dragonfly-redux`](library/dragonfly-redux/DESIGN.md) Dragonfly Redux +- [`eddie`](library/eddie/DESIGN.md) Eddie +- [`edolus`](library/edolus/DESIGN.md) EDOLUS +- [`effortel`](library/effortel/DESIGN.md) Effortel +- [`everswap`](library/everswap/DESIGN.md) EverSwap +- [`fauna-robotics`](library/fauna-robotics/DESIGN.md) Fauna Robotics +- [`flim`](library/flim/DESIGN.md) Flim +- [`follow-art`](library/follow-art/DESIGN.md) FOLLOW.ART +- [`fourmula-ai`](library/fourmula-ai/DESIGN.md) Fourmula AI +- [`glyphic-biotechnologies`](library/glyphic-biotechnologies/DESIGN.md) Glyphic Biotechnologies +- [`good-fella`](library/good-fella/DESIGN.md) Good Fella +- [`heidelberg-ccus`](library/heidelberg-ccus/DESIGN.md) Heidelberg Materials CCUS Experience +- [`heimdall-power`](library/heimdall-power/DESIGN.md) Heimdall Power +- [`icomat`](library/icomat/DESIGN.md) ICOMAT +- [`integratedbio`](library/integratedbio/DESIGN.md) Integrated Biosciences +- [`ivress-spin-a-tale`](library/ivress-spin-a-tale/DESIGN.md) SPIN A TALE (IVRESS Brand Site) +- [`longbow`](library/longbow/DESIGN.md) Longbow +- [`madar`](library/madar/DESIGN.md) Madar +- [`made-with-gsap-1`](library/made-with-gsap-1/DESIGN.md) Made With GSAP +- [`metamask`](library/metamask/DESIGN.md) MetaMask +- [`metropolis-test-drive`](library/metropolis-test-drive/DESIGN.md) Metropolis Test Drive +- [`micro`](library/micro/DESIGN.md) Micro +- [`microsoft-ai`](library/microsoft-ai/DESIGN.md) Microsoft AI +- [`moto-finance`](library/moto-finance/DESIGN.md) Moto Card +- [`neverhack`](library/neverhack/DESIGN.md) NEVERHACK +- [`nfinite`](library/nfinite/DESIGN.md) Nfinite +- [`nordvpn`](library/nordvpn/DESIGN.md) NordVPN +- [`okta`](library/okta/DESIGN.md) Okta +- [`on-energy`](library/on-energy/DESIGN.md) ON.energy +- [`osmo-1`](library/osmo-1/DESIGN.md) Osmo +- [`ova-investment`](library/ova-investment/DESIGN.md) OVA Investment +- [`palo-alto-networks`](library/palo-alto-networks/DESIGN.md) Palo Alto Networks +- [`proton`](library/proton/DESIGN.md) Proton +- [`purpose-talent`](library/purpose-talent/DESIGN.md) Purpose Talent +- [`relats`](library/relats/DESIGN.md) Relats +- [`seasats`](library/seasats/DESIGN.md) Seasats +- [`serve-robotics`](library/serve-robotics/DESIGN.md) Serve Robotics +- [`shift-5`](library/shift-5/DESIGN.md) Shift5 +- [`slush`](library/slush/DESIGN.md) Slush +- [`smooothy`](library/smooothy/DESIGN.md) Smooothy +- [`sstr-friction-reduction`](library/sstr-friction-reduction/DESIGN.md) SSTR Friction Reduction Systems +- [`steven-com`](library/steven-com/DESIGN.md) Steven.com +- [`stringtune`](library/stringtune/DESIGN.md) StringTune +- [`sunday`](library/sunday/DESIGN.md) Sunday Robotics +- [`sutera`](library/sutera/DESIGN.md) Sutéra +- [`telescope`](library/telescope/DESIGN.md) Telescope +- [`telkom-ot`](library/telkom-ot/DESIGN.md) Telkom-OT +- [`terminal-industries`](library/terminal-industries/DESIGN.md) Terminal Industries +- [`tesoro-1`](library/tesoro-1/DESIGN.md) Tesoro +- [`the-state-of-the-gallery`](library/the-state-of-the-gallery/DESIGN.md) The state of the gallery +- [`thelinestudio-com`](library/thelinestudio-com/DESIGN.md) THE LINE Studio +- [`titangate-equity`](library/titangate-equity/DESIGN.md) TitanGate Equity +- [`tresmares-capital`](library/tresmares-capital/DESIGN.md) Tresmares Capital +- [`untold-1`](library/untold-1/DESIGN.md) Untold +- [`usavionix`](library/usavionix/DESIGN.md) USAvionix +- [`vast`](library/vast/DESIGN.md) Vast +- [`vectr`](library/vectr/DESIGN.md) Vectr +- [`vibrant-wellness`](library/vibrant-wellness/DESIGN.md) Vibrant Wellness +- [`waabi`](library/waabi/DESIGN.md) Waabi +- [`walrus`](library/walrus/DESIGN.md) Walrus +- [`wembi`](library/wembi/DESIGN.md) Wembi +- [`zentry`](library/zentry/DESIGN.md) Zentry +- [`zettajoule`](library/zettajoule/DESIGN.md) ZettaJoule + +## Telecom (18) + +- [`airtel`](library/airtel/DESIGN.md) Airtel +- [`atandt`](library/atandt/DESIGN.md) AT&T +- [`bell-canada`](library/bell-canada/DESIGN.md) Bell Canada +- [`bt-group`](library/bt-group/DESIGN.md) BT +- [`china-mobile`](library/china-mobile/DESIGN.md) China Mobile Limited +- [`huawei`](library/huawei/DESIGN.md) Huawei +- [`kddi`](library/kddi/DESIGN.md) KDDI +- [`ntt`](library/ntt/DESIGN.md) NTT +- [`reliance-jio`](library/reliance-jio/DESIGN.md) Jio +- [`rogers`](library/rogers/DESIGN.md) Rogers +- [`singtel`](library/singtel/DESIGN.md) Singtel +- [`sk-telecom`](library/sk-telecom/DESIGN.md) SK Telecom +- [`softbank`](library/softbank/DESIGN.md) SoftBank +- [`t-mobile`](library/t-mobile/DESIGN.md) T-Mobile +- [`telenor`](library/telenor/DESIGN.md) Telenor Group +- [`telstra`](library/telstra/DESIGN.md) Telstra +- [`true-corporation`](library/true-corporation/DESIGN.md) True Corporation (True-dtac) +- [`verizon`](library/verizon/DESIGN.md) Verizon + +## Thai Brands (564) + +- [`12go`](library/12go/DESIGN.md) 12Go +- [`1moby`](library/1moby/DESIGN.md) 1Moby +- [`2c2p`](library/2c2p/DESIGN.md) 2C2P by Antom +- [`3bb`](library/3bb/DESIGN.md) 3BB Fibre3 +- [`a-day`](library/a-day/DESIGN.md) a day magazine +- [`absolute-clean-energy`](library/absolute-clean-energy/DESIGN.md) Absolute Clean Energy +- [`advance-aviation-jet`](library/advance-aviation-jet/DESIGN.md) Advance Aviation +- [`advice`](library/advice/DESIGN.md) Advice IT +- [`aei`](library/aei/DESIGN.md) AI Energy +- [`agoda`](library/agoda/DESIGN.md) Agoda +- [`agricultural-land-reform-office`](library/agricultural-land-reform-office/DESIGN.md) Agricultural Land Reform Office service gateway (สำนักงานการปฏิรูปที่ดินเพื่อเกษตรกรรม, ส.ป.ก. / ALRO) +- [`agricultural-research-development-agency`](library/agricultural-research-development-agency/DESIGN.md) Agricultural Research Development Agency (สำนักงานพัฒนาการวิจัยการเกษตร, สวก.) +- [`aim-reit`](library/aim-reit/DESIGN.md) AIM Industrial Growth REIT (AIMIRT) +- [`ais`](library/ais/DESIGN.md) AIS +- [`aksorn-edu`](library/aksorn-edu/DESIGN.md) Aksorn Education +- [`alflow-ocr`](library/alflow-ocr/DESIGN.md) Alflow OCR +- [`all-energy-utilities`](library/all-energy-utilities/DESIGN.md) All Energy and Utilities +- [`ally-reit`](library/ally-reit/DESIGN.md) ALLY REIT +- [`amanah-leasing`](library/amanah-leasing/DESIGN.md) Amanah Leasing +- [`amarin-book`](library/amarin-book/DESIGN.md) Amarin Books +- [`amarin-corporations`](library/amarin-corporations/DESIGN.md) Amarin Group +- [`amata`](library/amata/DESIGN.md) AMATA +- [`amity-solutions`](library/amity-solutions/DESIGN.md) Amity Solutions +- [`ananda-development`](library/ananda-development/DESIGN.md) Ananda Development +- [`anantara`](library/anantara/DESIGN.md) Anantara Hotels & Resorts +- [`ants`](library/ants/DESIGN.md) ANTS +- [`aot`](library/aot/DESIGN.md) Airports of Thailand PLC (AOT) +- [`ap-property-perfect`](library/ap-property-perfect/DESIGN.md) Property Perfect +- [`ap-thailand`](library/ap-thailand/DESIGN.md) AP Thai +- [`areeya`](library/areeya/DESIGN.md) Areeya Property +- [`arinsiri`](library/arinsiri/DESIGN.md) Arinsiri Land +- [`arise-idc`](library/arise-idc/DESIGN.md) Arise IDC +- [`ascend-group`](library/ascend-group/DESIGN.md) Ascend Group +- [`ascend-money`](library/ascend-money/DESIGN.md) Ascend Money +- [`asia-biomass`](library/asia-biomass/DESIGN.md) Asia Biomass +- [`asia-books`](library/asia-books/DESIGN.md) Asia Books +- [`asia-green-energy`](library/asia-green-energy/DESIGN.md) Asia Green Energy +- [`asia-plus`](library/asia-plus/DESIGN.md) Asia Plus Securities +- [`asian-marine-services`](library/asian-marine-services/DESIGN.md) Asian Marine Services PCL. (Asimar) +- [`asiatique`](library/asiatique/DESIGN.md) Asiatique The Riverfront +- [`asset-five`](library/asset-five/DESIGN.md) Asset Five Group +- [`asset-world`](library/asset-world/DESIGN.md) Asset World Corporation +- [`assumption-university`](library/assumption-university/DESIGN.md) Assumption University of Thailand +- [`atlanta-hotel-bangkok`](library/atlanta-hotel-bangkok/DESIGN.md) The Atlanta Hotel Bangkok +- [`atlas-energy`](library/atlas-energy/DESIGN.md) Atlas Energy +- [`avani`](library/avani/DESIGN.md) Avani Hotels & Resorts +- [`b-grimm-power`](library/b-grimm-power/DESIGN.md) B.Grimm Power +- [`b2s`](library/b2s/DESIGN.md) B2S +- [`baac`](library/baac/DESIGN.md) BAAC +- [`bam`](library/bam/DESIGN.md) Bangkok Commercial Asset Management (BAM) +- [`banana-it`](library/banana-it/DESIGN.md) BaNANA (Banana IT) +- [`bangchak`](library/bangchak/DESIGN.md) Bangchak Corporation +- [`bangchak-green`](library/bangchak-green/DESIGN.md) Bangchak Sriracha +- [`bangkok-aviation-fuel-services-pcl`](library/bangkok-aviation-fuel-services-pcl/DESIGN.md) Bangkok Aviation Fuel Services (BAFS) +- [`bangkok-bank`](library/bangkok-bank/DESIGN.md) Bangkok Bank +- [`bangkok-dock-company`](library/bangkok-dock-company/DESIGN.md) Bangkok Dock Company +- [`bangkok-health-insurance`](library/bangkok-health-insurance/DESIGN.md) Bangkok Health Insurance (BHI) +- [`bangkok-hospital`](library/bangkok-hospital/DESIGN.md) Bangkok Hospital +- [`bangkok-insurance`](library/bangkok-insurance/DESIGN.md) Bangkok Insurance +- [`bangkok-land`](library/bangkok-land/DESIGN.md) Bangkok Land +- [`bangkok-life`](library/bangkok-life/DESIGN.md) Bangkok Life Assurance +- [`bangkok-post`](library/bangkok-post/DESIGN.md) Bangkok Post +- [`bangkok-university`](library/bangkok-university/DESIGN.md) Bangkok University +- [`bangmod-enterprise`](library/bangmod-enterprise/DESIGN.md) Bangmod Enterprise (Bangmod.Cloud) +- [`bank-of-china-thai`](library/bank-of-china-thai/DESIGN.md) Bank of China (Thai) +- [`banluesarn`](library/banluesarn/DESIGN.md) Banlue Group +- [`banpu-power`](library/banpu-power/DESIGN.md) Banpu Power +- [`bbtv-channel-7`](library/bbtv-channel-7/DESIGN.md) CH7ON (BBTV Channel 7) +- [`bcpg`](library/bcpg/DESIGN.md) BCPG +- [`beam-checkout`](library/beam-checkout/DESIGN.md) Beam +- [`beartai`](library/beartai/DESIGN.md) Beartai +- [`bem`](library/bem/DESIGN.md) Bangkok Expressway and Metro (BEM) +- [`best-idc`](library/best-idc/DESIGN.md) Best Internet Service Solution (Best IDC) +- [`better-world-green`](library/better-world-green/DESIGN.md) Better World Green +- [`beyond-securities`](library/beyond-securities/DESIGN.md) Beyond Securities +- [`big-c`](library/big-c/DESIGN.md) Big C Online +- [`bitkub`](library/bitkub/DESIGN.md) Bitkub Exchange +- [`bknix`](library/bknix/DESIGN.md) BKNIX (Bangkok Neutral Internet eXchange) +- [`black-ivory-coffee`](library/black-ivory-coffee/DESIGN.md) Black Ivory Coffee +- [`blcp`](library/blcp/DESIGN.md) BLCP Power +- [`boon-rawd`](library/boon-rawd/DESIGN.md) Boon Rawd Brewery +- [`boots-thailand`](library/boots-thailand/DESIGN.md) Boots Thailand +- [`bot`](library/bot/DESIGN.md) Bank of Thailand +- [`botanical-garden-organization`](library/botanical-garden-organization/DESIGN.md) องค์การสวนพฤกษศาสตร์ (The Botanic Garden Organization, bgo.qsbg.org) +- [`brokersthai`](library/brokersthai/DESIGN.md) BrokersThai +- [`bts-skytrain`](library/bts-skytrain/DESIGN.md) BTS Skytrain +- [`butterfly-book-house`](library/butterfly-book-house/DESIGN.md) Butterfly Book House (สำนักพิมพ์ผีเสื้อ) +- [`byteark`](library/byteark/DESIGN.md) ByteArk +- [`cableconnect`](library/cableconnect/DESIGN.md) Cable Connect (CConnect) +- [`cafe-amazon`](library/cafe-amazon/DESIGN.md) Café Amazon +- [`caltex-thailand`](library/caltex-thailand/DESIGN.md) Caltex Thailand +- [`carabao`](library/carabao/DESIGN.md) Carabao Group +- [`carasti-thailand`](library/carasti-thailand/DESIGN.md) Carasti Thailand +- [`cat-motors-motorbike-scooter-rentals`](library/cat-motors-motorbike-scooter-rentals/DESIGN.md) Cat Motors Motorbike & Scooter Rentals +- [`cdg-group`](library/cdg-group/DESIGN.md) CDG Group +- [`cea`](library/cea/DESIGN.md) Creative Economy Agency +- [`centara`](library/centara/DESIGN.md) Centara Hotels & Resorts +- [`centara-the1`](library/centara-the1/DESIGN.md) Centara The 1 +- [`central`](library/central/DESIGN.md) Central Online +- [`central-embassy`](library/central-embassy/DESIGN.md) Central Embassy +- [`central-food-retail`](library/central-food-retail/DESIGN.md) Tops +- [`central-group`](library/central-group/DESIGN.md) Central Group +- [`central-pattana`](library/central-pattana/DESIGN.md) Central Pattana +- [`central-tham`](library/central-tham/DESIGN.md) Central Tham +- [`centralworld`](library/centralworld/DESIGN.md) centralwOrld +- [`ch3-thailand`](library/ch3-thailand/DESIGN.md) Channel 3 Thailand (3Plus) +- [`channel-8`](library/channel-8/DESIGN.md) Channel 8 (thaich8.com) +- [`channel-9-mcot-hd`](library/channel-9-mcot-hd/DESIGN.md) MCOT TV (9 MCOT HD) +- [`channel-g`](library/channel-g/DESIGN.md) Channel G Company Limited +- [`chao-phraya-express-boat`](library/chao-phraya-express-boat/DESIGN.md) Chao Phraya Express Boat +- [`charan`](library/charan/DESIGN.md) Charan Insurance +- [`chatramue`](library/chatramue/DESIGN.md) ChaTraMue +- [`chatuchak`](library/chatuchak/DESIGN.md) Chatuchak Market +- [`chin-huay`](library/chin-huay/DESIGN.md) Chin Huay +- [`chulabook`](library/chulabook/DESIGN.md) Chulabook +- [`chulalongkorn-university`](library/chulalongkorn-university/DESIGN.md) Chulalongkorn University +- [`cimb-thai`](library/cimb-thai/DESIGN.md) CIMB Thai +- [`cj-more`](library/cj-more/DESIGN.md) CJ MORE +- [`ck-power`](library/ck-power/DESIGN.md) CKPower +- [`cloudforest`](library/cloudforest/DESIGN.md) CloudForest +- [`clover-power`](library/clover-power/DESIGN.md) Clover Power +- [`coffee-world`](library/coffee-world/DESIGN.md) Coffee World +- [`colodee-digital-network`](library/colodee-digital-network/DESIGN.md) COLODEE DIGITAL NETWORK +- [`com7`](library/com7/DESIGN.md) Comseven +- [`conicle`](library/conicle/DESIGN.md) Conicle +- [`cooperative-promotion-department`](library/cooperative-promotion-department/DESIGN.md) Cooperative Promotion Department (CPD) +- [`cp-all`](library/cp-all/DESIGN.md) CP ALL +- [`cp-axtra`](library/cp-axtra/DESIGN.md) CP Axtra +- [`cp-foods`](library/cp-foods/DESIGN.md) CPF (Charoen Pokphand Foods) +- [`cp-meiji`](library/cp-meiji/DESIGN.md) CP-Meiji +- [`cp-tower-reit`](library/cp-tower-reit/DESIGN.md) ซี.พี.ทาวเวอร์ (C.P. Tower) +- [`cpn-retail`](library/cpn-retail/DESIGN.md) CPN Retail Growth Leasehold REIT +- [`crea`](library/crea/DESIGN.md) CREA +- [`daily-news`](library/daily-news/DESIGN.md) Daily News (เดลินิวส์) +- [`data-zone`](library/data-zone/DESIGN.md) Data Zone Thailand +- [`datamossa`](library/datamossa/DESIGN.md) DataMossa Co., Ltd +- [`deestone-group`](library/deestone-group/DESIGN.md) Deestone Group +- [`demco`](library/demco/DESIGN.md) DEMCO +- [`department-of-medical-sciences`](library/department-of-medical-sciences/DESIGN.md) Department of Medical Sciences (DMSc) +- [`deutsche-bank-thailand`](library/deutsche-bank-thailand/DESIGN.md) Deutsche Bank +- [`dga`](library/dga/DESIGN.md) Digital Government Development Agency (DGA) +- [`dhipaya`](library/dhipaya/DESIGN.md) Dhipaya Insurance (ทิพยประกันภัย) +- [`digital-economy-promotion-agency`](library/digital-economy-promotion-agency/DESIGN.md) depa (Digital Economy Promotion Agency) +- [`disaya`](library/disaya/DESIGN.md) DISAYA +- [`dohome`](library/dohome/DESIGN.md) DoHome +- [`doi-chaang`](library/doi-chaang/DESIGN.md) Doi Chaang Coffee Co. +- [`don-mueang-international-airport`](library/don-mueang-international-airport/DESIGN.md) Don Mueang International Airport +- [`dot-property`](library/dot-property/DESIGN.md) Dot Property +- [`dtac`](library/dtac/DESIGN.md) dtac +- [`dusit-international-corporate`](library/dusit-international-corporate/DESIGN.md) Dusit International +- [`dusit-shop`](library/dusit-shop/DESIGN.md) Dusit Hotels & Resorts +- [`dutch-mill`](library/dutch-mill/DESIGN.md) Dutch Mill +- [`eastern-power`](library/eastern-power/DESIGN.md) Eastern Polymer Group (EPG) +- [`eflowsys`](library/eflowsys/DESIGN.md) Eflowsys +- [`egco`](library/egco/DESIGN.md) EGCO Group +- [`electronics-extreme`](library/electronics-extreme/DESIGN.md) Electronics Extreme +- [`emdistrict`](library/emdistrict/DESIGN.md) The EM District +- [`emporium`](library/emporium/DESIGN.md) Emporium +- [`emquartier`](library/emquartier/DESIGN.md) The EmQuartier +- [`emsphere`](library/emsphere/DESIGN.md) EmSphere +- [`etda`](library/etda/DESIGN.md) ETDA (Electronic Transactions Development Agency) +- [`eventpop`](library/eventpop/DESIGN.md) Eventpop +- [`everland`](library/everland/DESIGN.md) Everland +- [`exim-thailand`](library/exim-thailand/DESIGN.md) EXIM Thailand +- [`ezy-airlines`](library/ezy-airlines/DESIGN.md) Ezy Airlines +- [`farmhouse`](library/farmhouse/DESIGN.md) Farmhouse +- [`fashion-island`](library/fashion-island/DESIGN.md) Fashion Island +- [`fastwork`](library/fastwork/DESIGN.md) Fastwork +- [`finnomena`](library/finnomena/DESIGN.md) Finnomena +- [`flash-express`](library/flash-express/DESIGN.md) Flash Express +- [`flowaccount`](library/flowaccount/DESIGN.md) FlowAccount +- [`foodworld`](library/foodworld/DESIGN.md) Food World +- [`freshket`](library/freshket/DESIGN.md) Freshket (เฟรชเก็ต) +- [`future-park`](library/future-park/DESIGN.md) Future Park Rangsit +- [`fwd-thailand`](library/fwd-thailand/DESIGN.md) FWD Thailand +- [`g-capital`](library/g-capital/DESIGN.md) G Capital +- [`gdh-559`](library/gdh-559/DESIGN.md) GDH 559 +- [`generali-life-thailand`](library/generali-life-thailand/DESIGN.md) Generali Thailand +- [`ghb`](library/ghb/DESIGN.md) ธนาคารอาคารสงเคราะห์ (Government Housing Bank, GH Bank) +- [`giztix`](library/giztix/DESIGN.md) Giztix +- [`global-green-chemicals-th`](library/global-green-chemicals-th/DESIGN.md) Global Green Chemicals +- [`global-house`](library/global-house/DESIGN.md) Global House (โกลบอลเฮ้าส์) +- [`global-innovative-solutions`](library/global-innovative-solutions/DESIGN.md) Global Innovative Solutions Co., Ltd. +- [`global-power`](library/global-power/DESIGN.md) Global Power Synergy Public Company Limited (GPSC) +- [`globish-thailand`](library/globish-thailand/DESIGN.md) Globish Thailand +- [`globlex`](library/globlex/DESIGN.md) Globlex Securities +- [`glow-energy`](library/glow-energy/DESIGN.md) Glow Group +- [`gourmet-market`](library/gourmet-market/DESIGN.md) Gourmet Market +- [`government-pharmaceutical-organization`](library/government-pharmaceutical-organization/DESIGN.md) Government Pharmaceutical Organization (GPO) +- [`gowabi`](library/gowabi/DESIGN.md) GoWabi +- [`grandlinux-solution-co-ltd`](library/grandlinux-solution-co-ltd/DESIGN.md) Grandlinux Solution Co., Ltd (Saeree ERP) +- [`granmonte`](library/granmonte/DESIGN.md) GranMonte +- [`gsb`](library/gsb/DESIGN.md) Government Savings Bank (GSB) +- [`gulf`](library/gulf/DESIGN.md) Gulf Development +- [`gunkul`](library/gunkul/DESIGN.md) Gunkul Engineering +- [`guri-technologies`](library/guri-technologies/DESIGN.md) Guri Technologies +- [`gwm-thailand-great-wall-motors`](library/gwm-thailand-great-wall-motors/DESIGN.md) GWM Thailand (Great Wall Motors) +- [`harpers-bazaar-thailand`](library/harpers-bazaar-thailand/DESIGN.md) Harper's Bazaar Thailand +- [`hellokhunmor`](library/hellokhunmor/DESIGN.md) Hello Khunmor +- [`heng-leasing`](library/heng-leasing/DESIGN.md) Heng Leasing and Capital +- [`hgc-global-communications-thailand`](library/hgc-global-communications-thailand/DESIGN.md) HGC International Business +- [`hino-motors-sales-thailand`](library/hino-motors-sales-thailand/DESIGN.md) Hino Motors Sales Thailand +- [`homepro`](library/homepro/DESIGN.md) HomePro +- [`honda-automobile-thailand`](library/honda-automobile-thailand/DESIGN.md) Honda Automobile Thailand +- [`honda-motorcycle-thailand`](library/honda-motorcycle-thailand/DESIGN.md) Honda Motorcycle Thailand +- [`hsbc-thailand`](library/hsbc-thailand/DESIGN.md) HSBC Thailand +- [`huneety`](library/huneety/DESIGN.md) Huneety +- [`ibank`](library/ibank/DESIGN.md) Islamic Bank of Thailand +- [`icbc-thai`](library/icbc-thai/DESIGN.md) ICBC (Thai) +- [`ichitan`](library/ichitan/DESIGN.md) Ichitan Group +- [`iconsiam`](library/iconsiam/DESIGN.md) ICONSIAM +- [`impact-growth-reit`](library/impact-growth-reit/DESIGN.md) IMPACT Arena, Exhibition and Convention Center +- [`indara`](library/indara/DESIGN.md) Indara Insurance +- [`index-living-mall`](library/index-living-mall/DESIGN.md) Index Living Mall +- [`indorama-ventures`](library/indorama-ventures/DESIGN.md) Indorama Ventures +- [`ini3`](library/ini3/DESIGN.md) Ini3 Digital +- [`interlink-telecom`](library/interlink-telecom/DESIGN.md) Interlink Telecom +- [`international-gateway`](library/international-gateway/DESIGN.md) International Gateway +- [`intouch`](library/intouch/DESIGN.md) Intouch Holdings +- [`isuzu-motors-thailand`](library/isuzu-motors-thailand/DESIGN.md) ISUZU Group Thailand +- [`isuzu-thailand-tri-petch-isuzu`](library/isuzu-thailand-tri-petch-isuzu/DESIGN.md) Isuzu Thailand +- [`jao-chang`](library/jao-chang/DESIGN.md) จ้าวช้างไวไฟ +- [`jas-asset`](library/jas-asset/DESIGN.md) JAS Asset +- [`jaymart-group`](library/jaymart-group/DESIGN.md) Jaymart Group Holdings +- [`jaymart-insurance`](library/jaymart-insurance/DESIGN.md) Jaymart Insurance +- [`jib-computer`](library/jib-computer/DESIGN.md) JIB Computer Group +- [`jiffy`](library/jiffy/DESIGN.md) PTT Retail Management (Jiffy operator site) +- [`jim-thompson`](library/jim-thompson/DESIGN.md) Jim Thompson +- [`jobbkk`](library/jobbkk/DESIGN.md) JOBBKK +- [`jobsdb-thailand`](library/jobsdb-thailand/DESIGN.md) Jobsdb Thailand +- [`jobthai`](library/jobthai/DESIGN.md) JobThai +- [`jobtopgun`](library/jobtopgun/DESIGN.md) JobTopGun +- [`jpmorgan-thailand`](library/jpmorgan-thailand/DESIGN.md) J.P. Morgan Thailand +- [`jrw-utility`](library/jrw-utility/DESIGN.md) J.R.W. Utility +- [`jt-express-thailand`](library/jt-express-thailand/DESIGN.md) J&T Express Thailand +- [`jungceylon`](library/jungceylon/DESIGN.md) Jungceylon +- [`k-c-property`](library/k-c-property/DESIGN.md) K.C. Property +- [`kaidee`](library/kaidee/DESIGN.md) Kaidee +- [`kapook`](library/kapook/DESIGN.md) Kapook.com (กระปุกดอทคอม) +- [`karmart`](library/karmart/DESIGN.md) Karmarts +- [`karmarts`](library/karmarts/DESIGN.md) Karmarts Public Company Limited +- [`kazz-magazine`](library/kazz-magazine/DESIGN.md) KAZZ Magazine +- [`kbank`](library/kbank/DESIGN.md) KBank +- [`kbtg`](library/kbtg/DESIGN.md) KASIKORN Business-Technology Group (KBTG) +- [`khon-kaen-sugar`](library/khon-kaen-sugar/DESIGN.md) Khon Kaen Sugar Industry Public Company Limited +- [`khon-kaen-university`](library/khon-kaen-university/DESIGN.md) Khon Kaen University +- [`king-power`](library/king-power/DESIGN.md) King Power Online +- [`king-power-mahanakhon`](library/king-power-mahanakhon/DESIGN.md) King Power Mahanakhon +- [`kirz`](library/kirz/DESIGN.md) KIRZ +- [`kmutt`](library/kmutt/DESIGN.md) King Mongkut's University of Technology Thonburi (KMUTT) +- [`knight-club`](library/knight-club/DESIGN.md) Knight Club +- [`koh-kae`](library/koh-kae/DESIGN.md) Kohkae +- [`kom-chad-luek`](library/kom-chad-luek/DESIGN.md) Kom Chad Luek (komchadluek.net) +- [`kpi-insurance`](library/kpi-insurance/DESIGN.md) Krungthai Panich Insurance (KPI) +- [`krating-daeng`](library/krating-daeng/DESIGN.md) Krating Daeng (TCP Group) +- [`krungthai-axa`](library/krungthai-axa/DESIGN.md) Krungthai-AXA Life +- [`krungthai-card`](library/krungthai-card/DESIGN.md) KTC (Krungthai Card) +- [`kwi-insurance`](library/kwi-insurance/DESIGN.md) KWI Insurance Public Company Limited +- [`lalamove-thailand`](library/lalamove-thailand/DESIGN.md) Lalamove Thailand +- [`land-and-houses`](library/land-and-houses/DESIGN.md) Land and Houses +- [`lazada-thailand`](library/lazada-thailand/DESIGN.md) Lazada Thailand +- [`lh-bank`](library/lh-bank/DESIGN.md) LH Bank +- [`lightnet`](library/lightnet/DESIGN.md) Lightnet +- [`lotuss`](library/lotuss/DESIGN.md) Lotus's +- [`loxley-pacific`](library/loxley-pacific/DESIGN.md) Loxley +- [`lpn`](library/lpn/DESIGN.md) LPN Development +- [`mae-pranom`](library/mae-pranom/DESIGN.md) Maepranom +- [`major-cineplex`](library/major-cineplex/DESIGN.md) Major Cineplex +- [`major-development`](library/major-development/DESIGN.md) Major Development PCL. +- [`makesend`](library/makesend/DESIGN.md) Makesend +- [`makro`](library/makro/DESIGN.md) Makro PRO +- [`mama`](library/mama/DESIGN.md) Thai President Foods Plc (mama.co.th corporate site) +- [`manatal`](library/manatal/DESIGN.md) Manatal +- [`marsun-shipyard`](library/marsun-shipyard/DESIGN.md) MARSUN PUBLIC COMPANY LIMITED (Marsun Shipyard) +- [`mass-rapid-transit-authority-of-thailand`](library/mass-rapid-transit-authority-of-thailand/DESIGN.md) Mass Rapid Transit Authority of Thailand (MRTA) +- [`matichon`](library/matichon/DESIGN.md) Matichon Online +- [`matichon-publishing-house`](library/matichon-publishing-house/DESIGN.md) Matichon Publishing House (MatichonBook.com) +- [`maya-chiangmai`](library/maya-chiangmai/DESIGN.md) MAYA Lifestyle Shopping Center +- [`mazda-thailand`](library/mazda-thailand/DESIGN.md) Mazda Thailand (Mazda Sales (Thailand) Co., Ltd.) +- [`mbk-center`](library/mbk-center/DESIGN.md) MBK Center +- [`mc-jeans`](library/mc-jeans/DESIGN.md) Mc Jeans (mcshop) +- [`mcard-mall`](library/mcard-mall/DESIGN.md) M Card +- [`mcot-public-company`](library/mcot-public-company/DESIGN.md) MCOT Public Company Limited (MCOT) +- [`mea`](library/mea/DESIGN.md) Metropolitan Electricity Authority (MEA) +- [`meechok-plaza`](library/meechok-plaza/DESIGN.md) Meechok Plaza +- [`mega-bangna`](library/mega-bangna/DESIGN.md) Mega Bangna +- [`mekha-cloud`](library/mekha-cloud/DESIGN.md) Mekha Cloud +- [`metrabyte-datacenter`](library/metrabyte-datacenter/DESIGN.md) Metrabyte Cloud (เมทราไบต์ คลาวด์) +- [`mfc-asset-management`](library/mfc-asset-management/DESIGN.md) MFC Asset Management +- [`mg-thailand`](library/mg-thailand/DESIGN.md) MG Cars Thailand +- [`mgronline`](library/mgronline/DESIGN.md) Manager Online (MGR Online) +- [`ministry-of-commerce`](library/ministry-of-commerce/DESIGN.md) Ministry of Commerce (กระทรวงพาณิชย์) +- [`ministry-of-education`](library/ministry-of-education/DESIGN.md) Ministry of Education (กระทรวงศึกษาธิการ) +- [`ministry-of-energy`](library/ministry-of-energy/DESIGN.md) Ministry of Energy (กระทรวงพลังงาน) +- [`ministry-of-higher-education-science-research-and-innovation`](library/ministry-of-higher-education-science-research-and-innovation/DESIGN.md) Ministry of Higher Education, Science, Research and Innovation (กระทรวงการอุดมศึกษา วิทยาศาสตร์ วิจัยและนวัตกรรม, อว.) +- [`ministry-of-labour`](library/ministry-of-labour/DESIGN.md) Ministry of Labour (กระทรวงแรงงาน) +- [`minor-food`](library/minor-food/DESIGN.md) Minor Food +- [`minor-international`](library/minor-international/DESIGN.md) Minor International +- [`minor-smart-kids`](library/minor-smart-kids/DESIGN.md) Minor Smart Kids +- [`mitsib-leasing`](library/mitsib-leasing/DESIGN.md) Mitsib Leasing +- [`mitsubishi-motors-thailand`](library/mitsubishi-motors-thailand/DESIGN.md) Mitsubishi Motors Thailand +- [`mk-real-estate`](library/mk-real-estate/DESIGN.md) M.K. Real Estate Development +- [`mk-restaurants`](library/mk-restaurants/DESIGN.md) MK Restaurants +- [`mk1642`](library/mk1642/DESIGN.md) MK Delivery 1642 +- [`moneybuffalo`](library/moneybuffalo/DESIGN.md) Money Buffalo +- [`monix`](library/monix/DESIGN.md) Monix +- [`monomax`](library/monomax/DESIGN.md) Monomax +- [`movemax`](library/movemax/DESIGN.md) MoveMax +- [`movider`](library/movider/DESIGN.md) Movider +- [`msig-thailand`](library/msig-thailand/DESIGN.md) MSIG Insurance (Thailand) +- [`mthai`](library/mthai/DESIGN.md) MThai +- [`mu-space`](library/mu-space/DESIGN.md) mu Space Corp +- [`muang-thai-insurance`](library/muang-thai-insurance/DESIGN.md) Muang Thai Insurance +- [`muang-thai-life`](library/muang-thai-life/DESIGN.md) Muang Thai Life Assurance +- [`muangthai-capital`](library/muangthai-capital/DESIGN.md) Muangthai Capital (เมืองไทย แคปปิตอล) +- [`muvmi`](library/muvmi/DESIGN.md) MuvMi +- [`muzik-move-company-limited`](library/muzik-move-company-limited/DESIGN.md) Muzik Move +- [`mycloudfulfillment`](library/mycloudfulfillment/DESIGN.md) MyCloud Fulfillment +- [`naiin`](library/naiin/DESIGN.md) Naiin (นายอินทร์) +- [`nanmee-books`](library/nanmee-books/DESIGN.md) Nanmeebooks +- [`nanuanchun`](library/nanuanchun/DESIGN.md) Nanuanchun +- [`napasai`](library/napasai/DESIGN.md) Napasai Samui Residence +- [`narinthorn`](library/narinthorn/DESIGN.md) Narinthorn Co.,Ltd. +- [`nation-tv`](library/nation-tv/DESIGN.md) Nation TV +- [`national-electronics-and-computer-technology-center`](library/national-electronics-and-computer-technology-center/DESIGN.md) NECTEC (National Electronics and Computer Technology Center) +- [`national-health-security-office`](library/national-health-security-office/DESIGN.md) National Health Security Office (สำนักงานหลักประกันสุขภาพแห่งชาติ, สปสช.) +- [`national-vaccine-institute`](library/national-vaccine-institute/DESIGN.md) National Vaccine Institute (สถาบันวัคซีนแห่งชาติ, สวช.) +- [`natural-fruit`](library/natural-fruit/DESIGN.md) Natural Fruit Company +- [`navakij`](library/navakij/DESIGN.md) The Navakij Insurance Public Company Limited +- [`nexgenet`](library/nexgenet/DESIGN.md) NexGeNet +- [`next-capital`](library/next-capital/DESIGN.md) Next Capital +- [`ngern-tid-lor`](library/ngern-tid-lor/DESIGN.md) Ngern Tid Lor +- [`ninja-van-thailand`](library/ninja-van-thailand/DESIGN.md) Ninja Van Thailand +- [`nipa-cloud`](library/nipa-cloud/DESIGN.md) NIPA Cloud +- [`nirvana`](library/nirvana/DESIGN.md) Nirvana Development +- [`nissan-thailand`](library/nissan-thailand/DESIGN.md) Nissan Motor (Thailand) +- [`noble`](library/noble/DESIGN.md) Noble Development +- [`nok-air`](library/nok-air/DESIGN.md) Nok Air +- [`nok-mini`](library/nok-mini/DESIGN.md) Nok Mini Airlines +- [`northern-bangkok-monorail-mrt-pink-line`](library/northern-bangkok-monorail-mrt-pink-line/DESIGN.md) Northern Bangkok Monorail (MRT Pink Line) +- [`nt-thailand`](library/nt-thailand/DESIGN.md) NT (National Telecom) +- [`ocbc-thailand`](library/ocbc-thailand/DESIGN.md) OCBC Group +- [`office-of-agricultural-economics`](library/office-of-agricultural-economics/DESIGN.md) Office of Agricultural Economics (สำนักงานเศรษฐกิจการเกษตร, สศก.) +- [`officemate`](library/officemate/DESIGN.md) OfficeMate (OFM) +- [`omise`](library/omise/DESIGN.md) Omise +- [`onyx-hospitality`](library/onyx-hospitality/DESIGN.md) ONYX Hospitality Group +- [`ookbee`](library/ookbee/DESIGN.md) Ookbee +- [`origin-property`](library/origin-property/DESIGN.md) ORIGIN Property +- [`osotspa`](library/osotspa/DESIGN.md) Osotspa +- [`pace`](library/pace/DESIGN.md) Pace Development +- [`pacific-park`](library/pacific-park/DESIGN.md) Pacific Park Sriracha +- [`pantip`](library/pantip/DESIGN.md) Pantip +- [`panus-assembly`](library/panus-assembly/DESIGN.md) Panus Assembly +- [`paradise-park`](library/paradise-park/DESIGN.md) Paradise Park +- [`paragon-department-store`](library/paragon-department-store/DESIGN.md) Paragon Department Store +- [`passione`](library/passione/DESIGN.md) Passione Shopping Destination +- [`pea`](library/pea/DESIGN.md) Provincial Electricity Authority (PEA) +- [`peaencom`](library/peaencom/DESIGN.md) PEA ENCOM International +- [`plan-b-media`](library/plan-b-media/DESIGN.md) Plan B Media +- [`platinum-fashion-mall`](library/platinum-fashion-mall/DESIGN.md) Platinum Fashion Mall +- [`polyplus`](library/polyplus/DESIGN.md) Polyplus Entertainment +- [`pomelo-fashion`](library/pomelo-fashion/DESIGN.md) Pomelo Fashion +- [`prachatai`](library/prachatai/DESIGN.md) Prachatai (ประชาไท) +- [`priceza`](library/priceza/DESIGN.md) Priceza +- [`prime-road-power`](library/prime-road-power/DESIGN.md) Prime Road Power +- [`principal-thailand`](library/principal-thailand/DESIGN.md) Principal Thailand +- [`prinsiri`](library/prinsiri/DESIGN.md) Prinsiri +- [`proennet`](library/proennet/DESIGN.md) PROEN Corp Public Company Limited +- [`propertyscout-th`](library/propertyscout-th/DESIGN.md) PropertyScout +- [`prospect-logistics`](library/prospect-logistics/DESIGN.md) Prospect Logistics and Industrial Freehold and Leasehold REIT +- [`prudential-thailand`](library/prudential-thailand/DESIGN.md) Prudential Thailand +- [`pruksa`](library/pruksa/DESIGN.md) Pruksa Real Estate +- [`psu`](library/psu/DESIGN.md) Prince of Songkla University +- [`ptt-global-chemical`](library/ptt-global-chemical/DESIGN.md) PTT Global Chemical +- [`ptt-ngd`](library/ptt-ngd/DESIGN.md) PTT NGD +- [`ptt-oil-retail`](library/ptt-oil-retail/DESIGN.md) OR (PTT Oil and Retail Business) +- [`pttep`](library/pttep/DESIGN.md) PTTEP (PTT Exploration and Production) +- [`qtc-energy-th`](library/qtc-energy-th/DESIGN.md) QTC Energy +- [`quality-houses`](library/quality-houses/DESIGN.md) Quality Houses +- [`raimon-land`](library/raimon-land/DESIGN.md) Raimon Land +- [`ratchthani-leasing`](library/ratchthani-leasing/DESIGN.md) Ratchthani Leasing (ราชธานีลิสซิ่ง) +- [`readyidc`](library/readyidc/DESIGN.md) ReadyIDC +- [`red-planet-hotels`](library/red-planet-hotels/DESIGN.md) Red Planet Hotels +- [`regional-container-lines`](library/regional-container-lines/DESIGN.md) RCL Group +- [`rice-department`](library/rice-department/DESIGN.md) Rice Department (กรมการข้าว) +- [`ripples-commerce`](library/ripples-commerce/DESIGN.md) Ripples Commerce +- [`roojai`](library/roojai/DESIGN.md) Roojai +- [`rose-media-and-entertainment`](library/rose-media-and-entertainment/DESIGN.md) Rose Media and Entertainment +- [`rs-group`](library/rs-group/DESIGN.md) RS Group +- [`rs-music`](library/rs-music/DESIGN.md) RS Music +- [`rvp`](library/rvp/DESIGN.md) Road Accident Victims Protection Co., Ltd. (บริษัท กลางคุ้มครองผู้ประสบภัยจากรถ จำกัด) +- [`s-and-p`](library/s-and-p/DESIGN.md) S&P Syndicate +- [`safety-insurance`](library/safety-insurance/DESIGN.md) Tokio Marine Group Thailand +- [`sahapat-delivery`](library/sahapat-delivery/DESIGN.md) Sahapat Delivery +- [`sakol-energy`](library/sakol-energy/DESIGN.md) Sakol Energy +- [`saksiam-leasing`](library/saksiam-leasing/DESIGN.md) Saksiam Leasing Public Company Limited (ศักดิ์สยามลิสซิ่ง) +- [`salary-hero`](library/salary-hero/DESIGN.md) Salary Hero +- [`samart-group`](library/samart-group/DESIGN.md) Samart Group (Samart Corporation) +- [`samart-telcoms`](library/samart-telcoms/DESIGN.md) Samart Telcoms +- [`samitivej`](library/samitivej/DESIGN.md) Samitivej Hospital +- [`sammakorn`](library/sammakorn/DESIGN.md) Sammakorn +- [`sammitr-motors-manufacturing`](library/sammitr-motors-manufacturing/DESIGN.md) Sammitr Motors Manufacturing PLC +- [`sanook`](library/sanook/DESIGN.md) Sanook.com +- [`sansiri`](library/sansiri/DESIGN.md) Sansiri +- [`sanuk-games`](library/sanuk-games/DESIGN.md) Sanuk Games +- [`sappe`](library/sappe/DESIGN.md) SAPPE +- [`sarakadee-books-wiriyah-business`](library/sarakadee-books-wiriyah-business/DESIGN.md) Sarakadee Magazine +- [`sasom`](library/sasom/DESIGN.md) SASOM +- [`sc-asset`](library/sc-asset/DESIGN.md) SC Asset +- [`scania-thailand`](library/scania-thailand/DESIGN.md) Scania Thailand +- [`scb`](library/scb/DESIGN.md) SCB (Siam Commercial Bank) +- [`scbx`](library/scbx/DESIGN.md) SCBX Group +- [`scg-express`](library/scg-express/DESIGN.md) SCG Express +- [`se-ed`](library/se-ed/DESIGN.md) SE-ED (ร้านหนังสือออนไลน์ SE-ED) +- [`seacon`](library/seacon/DESIGN.md) Seacon Development +- [`seacon-bangkae`](library/seacon-bangkae/DESIGN.md) Seacon Bangkae +- [`seacon-square`](library/seacon-square/DESIGN.md) Seacon Square +- [`sena`](library/sena/DESIGN.md) Sena Development +- [`set-exchange`](library/set-exchange/DESIGN.md) The Stock Exchange of Thailand (SET) +- [`settrade`](library/settrade/DESIGN.md) Settrade (SETTRADE.COM) +- [`seven-eleven-th`](library/seven-eleven-th/DESIGN.md) 7-Eleven Thailand +- [`sf-cinema`](library/sf-cinema/DESIGN.md) SF Cinema +- [`sg-capital`](library/sg-capital/DESIGN.md) SG Capital +- [`shark-energy`](library/shark-energy/DESIGN.md) SHARK Energy +- [`shell-thailand`](library/shell-thailand/DESIGN.md) Shell Thailand +- [`shopat24`](library/shopat24/DESIGN.md) ALL Online +- [`shopeepay-thailand`](library/shopeepay-thailand/DESIGN.md) ShopeePay Thailand +- [`siam-cement-chemicals`](library/siam-cement-chemicals/DESIGN.md) SCG Chemicals +- [`siam-cement-group`](library/siam-cement-group/DESIGN.md) SCG (Siam Cement Group) +- [`siam-center`](library/siam-center/DESIGN.md) Siam Center +- [`siam-city-cement`](library/siam-city-cement/DESIGN.md) INSEE Group (Siam City Cement group site) +- [`siam-discovery`](library/siam-discovery/DESIGN.md) Siam Discovery +- [`siam-paragon`](library/siam-paragon/DESIGN.md) Siam Paragon +- [`siam-rath`](library/siam-rath/DESIGN.md) Siam Rath (สยามรัฐออนไลน์) +- [`siam-sport-syndicate`](library/siam-sport-syndicate/DESIGN.md) Siam Sport Syndicate (Siamsport Print) +- [`siamgas`](library/siamgas/DESIGN.md) Siam Gas +- [`siamsport`](library/siamsport/DESIGN.md) Siamsport (สยามกีฬา) +- [`silkspan`](library/silkspan/DESIGN.md) Silkspan +- [`silpakorn`](library/silpakorn/DESIGN.md) Silpakorn University +- [`sing-sian-yer-pao-daily-news`](library/sing-sian-yer-pao-daily-news/DESIGN.md) Sing Sian Yer Pao Daily News (星暹日报) +- [`singer-thailand`](library/singer-thailand/DESIGN.md) Singer Thailand +- [`singha-estate`](library/singha-estate/DESIGN.md) Singha Estate +- [`siripinyo-reit`](library/siripinyo-reit/DESIGN.md) SIRIPINYO BUILDING +- [`sizzler-thailand`](library/sizzler-thailand/DESIGN.md) Sizzler Thailand +- [`skooldio`](library/skooldio/DESIGN.md) Skooldio +- [`smallroom`](library/smallroom/DESIGN.md) Smallroom +- [`solartron`](library/solartron/DESIGN.md) Solartron +- [`somboon-advance-technology`](library/somboon-advance-technology/DESIGN.md) Somboon Advance Technology (SAT) +- [`spcg`](library/spcg/DESIGN.md) SPCG +- [`spring-news`](library/spring-news/DESIGN.md) Spring News +- [`squid-brand`](library/squid-brand/DESIGN.md) Squid Brand +- [`sri-panwa`](library/sri-panwa/DESIGN.md) Sri Panwa +- [`srt-electrified-train-airport-rail-link`](library/srt-electrified-train-airport-rail-link/DESIGN.md) SRT Electrified Train Co., Ltd. (SRTET) +- [`standard-chartered-thailand`](library/standard-chartered-thailand/DESIGN.md) Standard Chartered Thailand +- [`starmark`](library/starmark/DESIGN.md) STARMARK +- [`stars-microelectronics`](library/stars-microelectronics/DESIGN.md) Stars Microelectronics +- [`sunday-insurance`](library/sunday-insurance/DESIGN.md) Sunday Insurance +- [`supalai`](library/supalai/DESIGN.md) Supalai +- [`supersports`](library/supersports/DESIGN.md) Supersports +- [`susco`](library/susco/DESIGN.md) SUSCO +- [`suvarnabhumi-airport`](library/suvarnabhumi-airport/DESIGN.md) Suvarnabhumi Airport +- [`suzuki-motor-thailand`](library/suzuki-motor-thailand/DESIGN.md) Suzuki Motor (Thailand) +- [`symphony-communication`](library/symphony-communication/DESIGN.md) Symphony Communication +- [`tao-kae-noi`](library/tao-kae-noi/DESIGN.md) Tao Kae Noi +- [`tarad`](library/tarad/DESIGN.md) Tarad.com +- [`tata-motors-thailand`](library/tata-motors-thailand/DESIGN.md) Tata Motors Thailand +- [`tcdc`](library/tcdc/DESIGN.md) TCDC (Thailand Creative & Design Center) +- [`terminal21`](library/terminal21/DESIGN.md) Terminal21 +- [`tero-entertainment`](library/tero-entertainment/DESIGN.md) Tero Entertainment +- [`thachang-green`](library/thachang-green/DESIGN.md) Thachang Green Energy +- [`thai-airasia`](library/thai-airasia/DESIGN.md) AirAsia MOVE +- [`thai-credit-bank`](library/thai-credit-bank/DESIGN.md) Thai Credit Bank +- [`thai-denmark`](library/thai-denmark/DESIGN.md) Thai-Denmark Milk Shop +- [`thai-enquirer`](library/thai-enquirer/DESIGN.md) Thai Enquirer +- [`thai-global-network`](library/thai-global-network/DESIGN.md) ททบ. 5 TV5HD (Royal Thai Army Radio and Television) +- [`thai-health-insurance`](library/thai-health-insurance/DESIGN.md) Thai Health Insurance PLC (ไทยประกันสุขภาพ) +- [`thai-life`](library/thai-life/DESIGN.md) Thai Life Insurance (ไทยประกันชีวิต) +- [`thai-name-server`](library/thai-name-server/DESIGN.md) Thai Name Server +- [`thai-namthip`](library/thai-namthip/DESIGN.md) ThaiNamthip Coca-Cola +- [`thai-news-agency`](library/thai-news-agency/DESIGN.md) Thai News Agency (สำนักข่าวไทย อสมท) +- [`thai-oil`](library/thai-oil/DESIGN.md) Thai Oil +- [`thai-paiboon`](library/thai-paiboon/DESIGN.md) Thai Paiboon Insurance (ไทยไพบูลย์ประกันภัย) +- [`thai-parliament-television`](library/thai-parliament-television/DESIGN.md) Thai Parliament Television (TPCHANNEL) +- [`thai-post`](library/thai-post/DESIGN.md) Thai Post +- [`thai-rath`](library/thai-rath/DESIGN.md) Thairath (ไทยรัฐออนไลน์) +- [`thai-rung-ruang`](library/thai-rung-ruang/DESIGN.md) TRR Group +- [`thai-rung-union-car`](library/thai-rung-union-car/DESIGN.md) Thai Rung Union Car +- [`thai-setakij`](library/thai-setakij/DESIGN.md) Thai Setakij Insurance (TSI Insurance) +- [`thai-smile-bus`](library/thai-smile-bus/DESIGN.md) Thai Smile Group (Thai Smile Bus) +- [`thai-union`](library/thai-union/DESIGN.md) Thai Union Group +- [`thai-wah`](library/thai-wah/DESIGN.md) Thai Wah +- [`thai-watsadu`](library/thai-watsadu/DESIGN.md) Thai Watsadu (ไทวัสดุ) +- [`thaibma`](library/thaibma/DESIGN.md) The Thai Bond Market Association (ThaiBMA) +- [`thaibulksms`](library/thaibulksms/DESIGN.md) Thaibulksms +- [`thaijob`](library/thaijob/DESIGN.md) ThaiJob +- [`thailand-board-of-investment`](library/thailand-board-of-investment/DESIGN.md) Thailand Board of Investment (BOI) +- [`thailand-education-and-research-network-thairen`](library/thailand-education-and-research-network-thairen/DESIGN.md) ThaiREN (Thailand Education and Research Network Association) +- [`thailand-internet-exchange-th-ix`](library/thailand-internet-exchange-th-ix/DESIGN.md) Thailand Internet Exchange (TH-IX) +- [`thailand-post`](library/thailand-post/DESIGN.md) Thailand Post +- [`thailand-property`](library/thailand-property/DESIGN.md) Thailand-Property +- [`thailandpost-mart`](library/thailandpost-mart/DESIGN.md) Thailand Post Mart +- [`thaipat-insurance`](library/thaipat-insurance/DESIGN.md) Thaipat Insurance (ไทยพัฒนาประกันภัย) +- [`thaipbs`](library/thaipbs/DESIGN.md) Thai PBS +- [`thaire`](library/thaire/DESIGN.md) Thai Reinsurance +- [`thaivivat`](library/thaivivat/DESIGN.md) Thaivivat Insurance +- [`thaiware`](library/thaiware/DESIGN.md) Thaiware +- [`thammasat`](library/thammasat/DESIGN.md) Thammasat University +- [`thanachart-capital`](library/thanachart-capital/DESIGN.md) Thanachart Capital +- [`thansettakij`](library/thansettakij/DESIGN.md) Thansettakij +- [`thappline`](library/thappline/DESIGN.md) Thai Petroleum Pipeline Company Limited (Thappline) +- [`the-coffee-club-thailand`](library/the-coffee-club-thailand/DESIGN.md) The Coffee Club +- [`the-mall-group`](library/the-mall-group/DESIGN.md) The Mall Group +- [`the-mall-lifestore`](library/the-mall-lifestore/DESIGN.md) The Mall Lifestore +- [`the-matter`](library/the-matter/DESIGN.md) The Matter +- [`the-momentum`](library/the-momentum/DESIGN.md) The Momentum +- [`the-nation-thailand`](library/the-nation-thailand/DESIGN.md) The Nation Thailand +- [`the-one-enterprise`](library/the-one-enterprise/DESIGN.md) The One Enterprise +- [`the-peninsula-bangkok`](library/the-peninsula-bangkok/DESIGN.md) The Peninsula Bangkok +- [`the-pizza-company`](library/the-pizza-company/DESIGN.md) The Pizza Company +- [`the-standard`](library/the-standard/DESIGN.md) THE STANDARD +- [`the1`](library/the1/DESIGN.md) The 1 +- [`thitikorn`](library/thitikorn/DESIGN.md) Thitikorn +- [`thoresen-thai-agencies-public-company-limited`](library/thoresen-thai-agencies-public-company-limited/DESIGN.md) Thoresen Thai Agencies (TTA) +- [`tiparos`](library/tiparos/DESIGN.md) ทิพรส (Tiparos) +- [`tisco`](library/tisco/DESIGN.md) TISCO Bank +- [`tnn`](library/tnn/DESIGN.md) TNN Thailand +- [`tohome`](library/tohome/DESIGN.md) Tohome.com +- [`tokio-marine-thailand`](library/tokio-marine-thailand/DESIGN.md) Tokio Marine Thailand +- [`tonson`](library/tonson/DESIGN.md) Tonson Group +- [`top-news`](library/top-news/DESIGN.md) TOP NEWS +- [`tops`](library/tops/DESIGN.md) Tops Online +- [`tpc-power`](library/tpc-power/DESIGN.md) TPC Power Holding +- [`tpi-polene-power`](library/tpi-polene-power/DESIGN.md) TPI Polene Power +- [`traveloka-thailand`](library/traveloka-thailand/DESIGN.md) Traveloka Thailand +- [`true-digital`](library/true-digital/DESIGN.md) True Digital Group +- [`true-spark`](library/true-spark/DESIGN.md) TrueVisions NOW +- [`truemoney`](library/truemoney/DESIGN.md) TrueMoney (ทรูมันนี่) +- [`ttb`](library/ttb/DESIGN.md) ttb bank (TMBThanachart Bank) +- [`tukcom`](library/tukcom/DESIGN.md) Tukcom +- [`tune-protect`](library/tune-protect/DESIGN.md) Tune Protect Thailand +- [`tv-thunder`](library/tv-thunder/DESIGN.md) TV Thunder +- [`u-tapao-international-airport`](library/u-tapao-international-airport/DESIGN.md) U-Tapao Rayong-Pattaya International Airport +- [`ufm`](library/ufm/DESIGN.md) UFM Fuji Super +- [`uninet-thailand`](library/uninet-thailand/DESIGN.md) UniNet +- [`unisight-cdp`](library/unisight-cdp/DESIGN.md) UniSight +- [`united-information-highway-uih`](library/united-information-highway-uih/DESIGN.md) United Information Highway (UIH) +- [`uob-thailand`](library/uob-thailand/DESIGN.md) UOB Thailand +- [`villa-market`](library/villa-market/DESIGN.md) Villa Market +- [`viriyah`](library/viriyah/DESIGN.md) Viriyah Insurance +- [`vocom-international-telecommunication`](library/vocom-international-telecommunication/DESIGN.md) Vocom International Telecommunication +- [`voice-tv`](library/voice-tv/DESIGN.md) Voice TV +- [`vp-infotech-visperhost`](library/vp-infotech-visperhost/DESIGN.md) VisperHost +- [`wacoal-thailand`](library/wacoal-thailand/DESIGN.md) Wacoal Thailand (Thai Wacoal Public Company Limited) +- [`wai-wai`](library/wai-wai/DESIGN.md) Wai Wai (Thai Preserved Food Factory) +- [`what-the-duck`](library/what-the-duck/DESIGN.md) What The Duck +- [`wisesight`](library/wisesight/DESIGN.md) Wisesight +- [`wongnai`](library/wongnai/DESIGN.md) Wongnai +- [`wookco`](library/wookco/DESIGN.md) Wookco +- [`workloft`](library/workloft/DESIGN.md) The Work Loft +- [`workpoint`](library/workpoint/DESIGN.md) Workpoint Entertainment +- [`world-internetwork`](library/world-internetwork/DESIGN.md) InternetThai +- [`world-internetwork-corporation-otaro`](library/world-internetwork-corporation-otaro/DESIGN.md) OTARO +- [`y-u-t-corporate`](library/y-u-t-corporate/DESIGN.md) Y.U.T Corporate +- [`yayoi-thailand`](library/yayoi-thailand/DESIGN.md) ร้านอาหารญี่ปุ่นยาโยอิ (Yayoi Thailand) + +## Themed & Unique (4) + +- [`agentic`](library/agentic/DESIGN.md) Agentic +- [`futuristic`](library/futuristic/DESIGN.md) Futuristic +- [`pacman`](library/pacman/DESIGN.md) Pacman +- [`tetris`](library/tetris/DESIGN.md) Tetris + +## Travel & Hospitality (19) + +- [`accor`](library/accor/DESIGN.md) ALL Accor +- [`ace-hotel`](library/ace-hotel/DESIGN.md) Ace Hotel +- [`airalo`](library/airalo/DESIGN.md) Airalo +- [`aman`](library/aman/DESIGN.md) Aman +- [`booking`](library/booking/DESIGN.md) Booking.com +- [`club-med`](library/club-med/DESIGN.md) Club Med +- [`expedia`](library/expedia/DESIGN.md) Expedia +- [`four-seasons`](library/four-seasons/DESIGN.md) Four Seasons +- [`getyourguide`](library/getyourguide/DESIGN.md) GetYourGuide +- [`hopper`](library/hopper/DESIGN.md) Hopper +- [`kayak`](library/kayak/DESIGN.md) KAYAK +- [`mandarin-oriental`](library/mandarin-oriental/DESIGN.md) Mandarin Oriental +- [`raffles`](library/raffles/DESIGN.md) Raffles Hotels & Resorts +- [`ritz-carlton`](library/ritz-carlton/DESIGN.md) The Ritz-Carlton +- [`rosewood`](library/rosewood/DESIGN.md) Rosewood Hotels & Resorts +- [`shangri-la`](library/shangri-la/DESIGN.md) Shangri-La Hotels and Resorts +- [`six-senses`](library/six-senses/DESIGN.md) Six Senses +- [`tripcom`](library/tripcom/DESIGN.md) Trip.com +- [`wyndham`](library/wyndham/DESIGN.md) Wyndham Hotels & Resorts diff --git a/skills/scd-uiux/data/vendor/design-systems/crosswalk.md b/skills/scd-uiux/data/vendor/design-systems/crosswalk.md new file mode 100644 index 0000000..20b3a5e --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/crosswalk.md @@ -0,0 +1,91 @@ +# Design-System Crosswalks (curated) + +Concrete role mappings for the most-requested systems, applying the [Interop Protocol](./interop-protocol.md). Map by **role/intent**. For systems not listed, derive a mapping with the protocol's Crosswalk Method. + +--- + +## Color-role crosswalk (the universal spine) + +| Our semantic role | Material 3 | Apple HIG | Fluent 2 | Carbon | shadcn/ui | Radix Colors | +|-------------------|-----------|-----------|----------|--------|-----------|--------------| +| `action.primary` | `primary` | `tintColor` / accent | `brand` / `accent` | `interactive` / `$button-primary` | `--primary` | step `9` (solid) | +| `action.primary-hover` | `primary` + state layer | accent (pressed) | `brand hover` | `$button-primary-hover` | `--primary` (hover) | step `10` | +| `on-action` (text on primary) | `onPrimary` | label-on-accent | `text-on-accent` | `$text-on-color` | `--primary-foreground` | contrast step `12`/`1` | +| `surface.page` | `surface` / `background` | systemBackground | `neutralBackground1` | `$background` | `--background` | step `1`/`2` | +| `surface.card` | `surfaceContainer` | secondarySystemBackground | `neutralBackground2` | `$layer` | `--card` | step `2`/`3` | +| `border.default` | `outlineVariant` | separator | `neutralStroke2` | `$border-subtle` | `--border` | step `6` | +| `border.strong` | `outline` | opaqueSeparator | `neutralStroke1` | `$border-strong` | `--input` | step `7`/`8` | +| `text.primary` | `onSurface` | label | `neutralForeground1` | `$text-primary` | `--foreground` | step `12` | +| `text.secondary` | `onSurfaceVariant` | secondaryLabel | `neutralForeground2` | `$text-secondary` | `--muted-foreground` | step `11` | +| `feedback.error` | `error` | systemRed | `dangerForeground` | `$support-error` | `--destructive` | `red` step `9` | +| `feedback.success` | `tertiary`/custom | systemGreen | `successForeground` | `$support-success` | custom | `green` step `9` | +| `focus-ring` | `primary` outline | focusRing/keyboard | `strokeFocus` | `$focus` | `--ring` | step `8` (focus) | + +> Material 3 conveys hover/press via **state layers** (opacity overlays), not separate hex. Map our `-hover`/`-active` tokens to the equivalent state-layer opacity (`tokens/opacity.json`). Radius/elevation differ per system; see below. + +--- + +## Other axes + +| Axis | Material 3 | Apple HIG | Fluent 2 | Carbon | shadcn/ui | +|------|-----------|-----------|----------|--------|-----------| +| **Base grid** | 4dp | 8pt (4pt half-steps) | 4px | 8px (2x grid) | 4px (Tailwind) | +| **Type ramp** | Display/Headline/Title/Body/Label | Large Title→Caption (SF) | Display→Caption | Productive/Expressive | Tailwind text-* | +| **Radius** | xs-xl (`shape`) | continuous-corner, ~`8-14pt` | `borderRadius` 2-8px | `0-8px` (sharp-leaning) | `--radius` (0.5rem default) | +| **Elevation** | dp tonal + shadow (0-5) | thin shadows / materials | depth 4/8/16/64 | `01-05` boxshadow | `shadow-sm…lg` | + +--- + +## Per-system notes + +### Material Design 3 (Google) +Tokens are role-based and dynamic-color-driven. Map our semantics → MD3 roles above; for **dynamic color**, treat MD3's generated tonal palette as primitives and our semantics as the role layer. Use `tokens/opacity.json` for state layers. Built-in motion → our `tokens/motion.json`. For the **React implementation (MUI)**, theme via `createTheme` (see `frameworks/adapters/mui.md`). + +### Apple HIG (iOS/macOS) +No hex token file: uses semantic system colors that adapt to light/dark/accessibility automatically. Map our semantics → system colors; let the OS handle dark mode. See `frameworks/swiftui.md` for the asset-catalog mechanism. Respect Dynamic Type (our type scale → `@ScaledMetric`). + +### Fluent 2 (Microsoft) +Neutral-heavy with `brand` ramp + depth tokens. Map via the table; Fluent's `neutralBackground1..6` ladder → our `surface.*` elevation. Strong high-contrast-mode story; verify against our `accessibility` rules. + +### Carbon (IBM) +Sharp, grid-strict, enterprise. 2x grid (8px), restrained radius. Map `$layer`/`$field`/`$border-*` tokens; Carbon's token names are role-based already, near-1:1 with our semantics. + +### shadcn/ui +Copy-in components using CSS variables (`--primary`, `--background`, …): the **closest match to our model**. Re-point shadcn's `:root` variables to our token values and components inherit instantly. Built on Radix primitives (behavior + a11y). Best low-friction target for web. + +### Radix (Primitives + Colors) +Primitives = unstyled behavior/a11y; Colors = 12-step scales. Map roles to steps (table). Style entirely from our tokens. Ideal headless foundation. + +### Chakra / Mantine +Theme via their config (`createSystem` / `createTheme`). Both mirror our 3-tier model closely (Chakra has primitive **tokens** + **semanticTokens**; Mantine has primitive scales + `primaryColor`). Override base unit, radius, primary; keep our 8-state + a11y. See `frameworks/adapters/chakra.md` and `frameworks/adapters/mantine.md`. + +--- + +## Extended crosswalks (Ant · Polaris · Primer · Atlassian · Bootstrap) + +### Color-role crosswalk (extended) + +| Our semantic role | Ant Design 5 | Shopify Polaris | GitHub Primer | Atlassian (ADS) | Bootstrap 5 | +|-------------------|--------------|-----------------|---------------|-----------------|-------------| +| `action.primary` | `colorPrimary` | `--p-color-bg-fill-brand` | `--button-primary-bgColor-rest` / `accent.fg` | `color.background.brand.bold` | `--bs-primary` | +| `action.primary-hover` | `colorPrimaryHover` | `…bg-fill-brand-hover` | `…bgColor-hover` | `…brand.bold.hovered` | `--bs-primary` + `:hover` (shade) | +| `on-action` | `colorTextLightSolid` | `--p-color-text-brand-on-bg-fill` | `--button-primary-fgColor-rest` | `color.text.inverse` | `--bs-btn-color` (`#fff`) | +| `surface.page` | `colorBgLayout` | `--p-color-bg` | `--bgColor-default` / `canvas.default` | `color.background.surface` | `--bs-body-bg` | +| `surface.card` | `colorBgContainer` | `--p-color-bg-surface` | `--bgColor-muted` / `canvas.subtle` | `color.background.surface.raised` | `--bs-card-bg` | +| `border.default` | `colorBorderSecondary` | `--p-color-border` | `--borderColor-muted` | `color.border` | `--bs-border-color` | +| `border.strong` | `colorBorder` | `--p-color-border-strong` | `--borderColor-default` | `color.border.bold` | `--bs-border-color` (darker) | +| `text.primary` | `colorText` | `--p-color-text` | `--fgColor-default` / `fg.default` | `color.text` | `--bs-body-color` | +| `text.secondary` | `colorTextSecondary` | `--p-color-text-secondary` | `--fgColor-muted` | `color.text.subtle` | `--bs-secondary-color` | +| `feedback.error` | `colorError` | `--p-color-text-critical` | `--fgColor-danger` / `danger.fg` | `color.text.danger` | `--bs-danger` | +| `feedback.success` | `colorSuccess` | `--p-color-text-success` | `--fgColor-success` / `success.fg` | `color.text.success` | `--bs-success` | +| `focus-ring` | `colorPrimaryBorder` (+ outline) | `--p-color-border-focus` | `--focus-outlineColor` / `accent.emphasis` | `color.border.focused` | `--bs-focus-ring-color` | + +> Bootstrap also exposes `--bs-border-radius`, `--bs-body-font-family`, `$spacer`. Primer ships **both** functional vars (`--fgColor-*`, `--bgColor-*`) and the older `@primer/primitives` scale names (`fg.default`, `accent.emphasis`). Prefer the functional vars. + +### Per-system notes + +- **Ant Design 5 (`theme.token` + algorithm):** token-based theming via `ConfigProvider theme={{ token, algorithm }}`. Set `colorPrimary`, `borderRadius`, `fontFamily`, `controlHeight` from our tokens; `algorithm: theme.darkAlgorithm` for dark mode (align with `[data-theme]`). Component-level overrides under `theme.components`. Very opinionated motion/shadows: map to our `tokens/motion.json` + `tokens/shadows.json`. +- **Shopify Polaris (CSS custom properties):** consumes a fixed set of `--p-color-*` / `--p-space-*` / `--p-border-radius-*` design tokens. You theme by re-pointing those vars to our values within an `AppProvider`. Polaris is purpose-built for admin/commerce density, so respect its spacing rhythm. Strong a11y baseline; still validate against our checklist. +- **GitHub Primer (`@primer/primitives`):** ships CSS variables + a React lib. Map roles to the **functional** layer (`--fgColor-*`, `--bgColor-*`, `--borderColor-*`); `data-color-mode="dark"` + `data-dark-theme` drive theming; align with our `[data-theme]`. Primer's scale is GitHub-flavored; expect to override accent + radius. +- **Atlassian Design System (`@atlaskit/tokens`):** role/intent token names (`color.background.brand.bold`, `color.text.subtle`), near-1:1 with our semantics. Themed via the token package + `setGlobalTheme({ colorMode })`. Migration is mostly a name remap; keep the 8-state coverage where ADS components are sparse. +- **Bootstrap 5:** override Sass `$variables` (build-time) or `--bs-*` CSS vars (runtime); `data-bs-theme="dark"` for dark mode. Map base spacing (`$spacer`), `$border-radius`, `$primary`/`$danger`/etc., and `$font-family-base`. **Supplement focus-visible contrast and the error/loading/selected states** Bootstrap leaves thin. Full worked example: `frameworks/adapters/bootstrap.md`. diff --git a/skills/scd-uiux/data/vendor/design-systems/interop-protocol.md b/skills/scd-uiux/data/vendor/design-systems/interop-protocol.md new file mode 100644 index 0000000..e673d4b --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/interop-protocol.md @@ -0,0 +1,61 @@ +# Design-System Interop Protocol + +Map this token system **to or from** any external design system: Material Design 3, Apple HIG, Fluent, Carbon, Ant, Polaris, Primer, Radix, shadcn/ui, Chakra, Mantine, Bootstrap, or a bespoke brand system. Like the [Framework Adapter Protocol](../frameworks/adapter-protocol.md), this is a *method*, not one file per system. Curated concrete crosswalks for the most common targets live in [`crosswalk.md`](./crosswalk.md); the 138 brand specs in [`library/`](./library/) are sources you can map from. + +> Goal: adopt, migrate, or bridge, without a rewrite. You produce a **mapping**, then optionally a thin **bridge layer**, then **verify** nothing regressed (especially contrast and states). + +--- + +## The Crosswalk Method + +For any system, map these six axes. Match by **role/intent**, not by name. + +| Axis | Our side | What to find in the other system | +|------|----------|----------------------------------| +| **Color roles** | `semantic.action.*`, `surface.*`, `text.*`, `feedback.*` | their primary/secondary, surface/background, on-color, error/warning/success roles | +| **Type scale** | `tokens/typography.json` (Major Third) | their type ramp / "type scale" / text styles; map by step, not px | +| **Spacing unit** | 4px base scale | their base unit (4dp/8dp grids common); convert by ratio | +| **Radius** | `tokens/borders.json` | their shape/corner scale | +| **Elevation** | `tokens/shadows.json` (5 levels) | their elevation/shadow tiers (Material: dp; Fluent: depth) | +| **Motion** | `tokens/motion.json` | their duration/easing tokens | + +Output a table: *our token → their token → value note*. Flag any role they have that we don't (and vice-versa) as a gap to decide on. + +--- + +## Directions + +### A. Map FROM an external system → our tokens (adopt their look) +1. Pull their published tokens (or read the relevant `library//DESIGN.md`). +2. Re-point our **semantic** tokens to their values (primitives stay; see `tokens/colors.json` dark strategy). +3. Keep our **component** token structure. Only the resolved values change. +4. Verify contrast/state coverage (below). + +### B. Map TO an external system → our components on their foundation (adopt their stack) +1. Identify their component primitives (e.g. Radix unstyled, shadcn copy-in, MUI components). +2. Apply our token values as their theme (their `ThemeProvider` / CSS vars / config). +3. Keep our 8-state + a11y requirements; fill any state they omit. + +### C. Migrate between systems (replace one with another) +**Audit → Map → Bridge → Verify:** +1. **Audit**: inventory the current system's tokens + components in the codebase. +2. **Map**: build the crosswalk table; mark 1:1, approximate, and missing. +3. **Bridge**: introduce a compatibility layer that aliases old names to new tokens, so migration is incremental, not big-bang. Deprecate aliases over time. +4. **Verify**: see below; migrate screen-by-screen behind the bridge. + +--- + +## Headless vs. styled targets + +- **Headless (Radix, Headless UI, Ark, React Aria):** they provide behavior + a11y; you provide *all* styling from our tokens. Best fit, least conflict. +- **Copy-in (shadcn/ui):** components live in your repo; re-skin their Tailwind classes to our CSS-var tokens directly. See `crosswalk.md`. +- **Styled libraries (MUI, Ant, Chakra, Mantine, Bootstrap):** theme via their config object/CSS vars; accept their component API, override tokens. Watch for opinionated defaults that fight our spacing/radius; override globally. + +--- + +## Verification (every interop) +- **Contrast:** re-check every mapped color pair against `accessibility/wcag-checklist.md` (4.5:1 text, 3:1 UI). A brand value that fails must be adjusted: taste never overrides POUR. Use `scripts/contrast.py` / the `a11y-audit` skill. +- **State coverage:** confirm the target renders all applicable of the 8 states; add missing focus-visible/disabled/loading. +- **Dark mode:** verify the mapping swaps correctly at the semantic layer. +- **Density/RTL:** if the target supports them, confirm tokens flow through. +- **Visual + functional spot-check** per migrated screen. diff --git a/skills/scd-uiux/data/vendor/design-systems/library.json b/skills/scd-uiux/data/vendor/design-systems/library.json new file mode 100644 index 0000000..e008316 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library.json @@ -0,0 +1,2150 @@ +{ + "repo": "plugin87/ux-ui-agent-skills", + "ref": "v3.0.0", + "systems": { + "100-lost-species": {"name": "100 Lost Species", "category": "Culture & Events", "description": "Black memorial entry page for 100 Lost Species: Reckless Neue 72px weight 100 serif headline, Enduro 14px weight 300 body, white (#ffffff) Enter button on a #000000 canvas, 12px/24px/46px/60px spacing steps and a pill radius.", "sha256": "1176ae1f1e801585f8d31a7ed13baa8c92f6a9cface05b2d7cae6fa8a6cf92b8", "bytes": 9764}, + "12go": {"name": "12Go", "category": "Thai Brands", "description": "12Go (12go.asia) travel-booking site measured in system-ui sans: 24px/700 white hero line, 22px/700 section heads, 16px/400 body, a #4db84d green Find Tickets button with 4px radius and 52px height on a #f4f4f4 canvas with white cards.", "sha256": "f75f8659b501b174d5437f4d0b4bbab89fdd70601ea8d391e1a61f8b53ba7015", "bytes": 12487}, + "14islands": {"name": "14islands", "category": "Agencies & Studios", "description": "14islands' agency site is a near-monochrome editorial page: white #ffffff and #f2f2f2 grounds, almost-black #070707 text with grey #a2a2a9 and #797979 highlight words, Aften Screen at 160px/400 (-8px tracking) for the 'Design & Technology' headline and 23.7037px for captions, BentonSans 12px uppercase labels, a 3.7037px small radius and no shadows.", "sha256": "0fa2ce8faffbd567fed08a0ad624f409aa31ca2856401f52f519550ebd2865f0", "bytes": 12088}, + "18-years-of-buro": {"name": "18 Years of Büro", "category": "Agencies & Studios", "description": "18 Years of Büro (18.burocratik.com), the Burocratik studio retrospective: Commercial Gräphik Web grotesk with tight negative tracking at 57.9px, PP Editorial New weight 100 at 44.1px, black on white with a chapter palette of brown #402828, peach #efc09b, blue #2800f3 and purple #8574d0.", "sha256": "9c8075e196a6363a9594cdf638b4a702fda45c6f53aa6b3d14a25a82e3ed095f", "bytes": 10954}, + "1820-productions": {"name": "1820 Productions", "category": "Portfolio", "description": "1820 Productions (Irving, Texas video production company) site: near-black #0a0a0a canvas with #f7f7f7 text, 72px weight 600 Suisseintl Condensed headlines, Suisseintl 24px weight 300 body, uppercase 12.5px nav labels, 2.08px radius and full-bleed film stills.", "sha256": "94997f1942e4a4a06a3b44bb22bb7252d19d7953e1dca859bdde5e09ce0ebc0e", "bytes": 10573}, + "1moby": {"name": "1Moby", "category": "Thai Brands", "description": "1Moby (วันม๊อบบี้), Bangkok digital solutions company: MeroThai 700 headlines at 60px/48px on a #171717 canvas fading into cobalt #006bff, white pill CTAs with black label and a 4px trailing circle, 20px rounded cards and 14px #5e5e5e body copy.", "sha256": "a45fb1d89a7ecef851e5dcfb3a504c618da708d0749f1e44d2efebcf194ee3fb", "bytes": 13308}, + "1password": {"name": "1Password", "category": "Tech & AI", "description": "1Password's marketing site: agileSans at light weights (300 display at 88px/96.8px with -1.76px tracking, 350 body) on a near-black #1d1d21 canvas, a full-width #145fe4 blue band, white #ffffff sections with #303136 text, pill-shaped 9999px buttons 46px tall, and a sand #cbb88e announcement bar.", "sha256": "18cc4c146c5a9fec2910b5c819eab54ac86784168419a56e1252e4bbb5175c70", "bytes": 11075}, + "20-years-inspired-by-people": {"name": "20 Years Inspired by People", "category": "Business & Corporate", "description": "20 Years Inspired by People (inspiring.nk.studio, Spanish edition): Instrument Serif 100px hero over a dark teal scene of tilted #092524 cards, DM Sans 12px body, a #00ffc2 mint button with #041819 label and 3px radius, 10px card radius and #406c6c80 hairlines.", "sha256": "7aba3450360cce5782840b58827b4704b1b275c4c1587ccbf481702eb0d5cc0d", "bytes": 10057}, + "21-hrs-on-the-moon": {"name": "21 Hrs On The Moon", "category": "Culture & Events", "description": "21 Hrs On The Moon (21hrs.space), an Apollo 11 scroll story: black #000000 canvas, warm cream #fff3ea text, FuturaStd 700 uppercase titles with negative tracking, AkkuratMonoLL 300 10px labels, a #d9d9d9 giant MOON wordmark and #e4b592 copper viewfinder corners with a 10px radius.", "sha256": "98e889bd336bd5b4cb7841269839275eb16bee3f658dba27f741c1b581df8577", "bytes": 10140}, + "22-09-2000-he-was-born": {"name": "Hardik Bhansali", "category": "Business & Corporate", "description": "Hardik Bhansali portfolio (hardikbhansali.com, queued as 22.09.2000 - HE WAS BORN): near-black #030300 stage, electric yellow #ffea63 text and #e3ca54 buttons, Pixel monospace uppercase headlines at 24px and 57.3px with negative tracking, Helvetica 12px body, 6px radius.", "sha256": "e4e1b8fbe2437e2c77bdf28aabd3fc29f03328c6a30d7192b49b88a1bb775364", "bytes": 10168}, + "2c2p": {"name": "2C2P by Antom", "category": "Thai Brands", "description": "2C2P by Antom is a Southeast Asian payments brand whose homepage is a saturated #0088ff blue hero with white Poppins-SemiBold headlines at 60px, a white content body, an aqua #a7eaeb band and square outlined uppercase buttons, set in the Poppins family at regular weight 17px body.", "sha256": "e3ce2e528dfc85813428dfb30ae89d36cbc414814bd1bec4e868468932aeb5ff", "bytes": 11312}, + "2xa-studio": {"name": "2xA Studio", "category": "Agencies & Studios", "description": "2xA Studio (2xa.studio), a code-driven design studio between Amsterdam and Athens: #0f0f0f black canvas, #858585 ash body in 2XAMONOVF monospace at 19px, 128px HelveticaProRoman headline in #cecece, #fdfdfd paper sections, 1.6px corner radius and no shadows.", "sha256": "67862d3c62e9a4a08820e9fe9467ed5b0cf70d52c8f1eaa5212fbbab82403369", "bytes": 10997}, + "35mm": {"name": "35mm", "category": "Tech & AI", "description": "35mm, a Canon F-1 wireframe showcase served from lab.chakibmzn.com: #141414 charcoal canvas, B612 Mono throughout, a 145.92px bold uppercase TIMELESS CRAFT headline with -7.296px tracking, 11.5556px #c8c8c8 body, #bf6d15 orange accent, thin #555555 lines and no radius.", "sha256": "e4964de27dce39b74f7ceb0e19f9f9e4e2d1f66c34f62cf1c72971a71afb35e8", "bytes": 9581}, + "3bb": {"name": "3BB Fibre3", "category": "Thai Brands", "description": "3BB Fibre3 (fiber.3bb.co.th, AIS group home broadband, Thai): DB Heavent 62px bold brown #65260f section titles on white, #f5781e orange accent and hover, charcoal #414143 nav bar, 8px card radius and photographic promo banners.", "sha256": "7c6cc8e98237d86401d58cde40e88c8b2bb4dc7dd44a166799deea0c8a7154d6", "bytes": 12013}, + "3m-g": {"name": "3M", "category": "Business & Corporate", "description": "3M's US corporate home (3m.com) sets everything in the proprietary 3MCircular face, uses 3M red #d10411 for buttons and active tabs, a deep #8a041f burgundy band for news cards, #4b4b4b/#202024 text on white, 2px button corners and a 20px-radius search pill.", "sha256": "07e6f793035aa38dc16b16a28bd62cc38bd6f84ed3c74681db32f90f648e75a9", "bytes": 12970}, + "8bit-ai": {"name": "8bit.ai", "category": "Tech & AI", "description": "8bit.ai (8bit.ai Inc.) AI compute and Neutrino platform site: pure black #000000 canvas with white Roboto Condensed 20px/500 body, Helvetica display lines at 61.04px with -3.052px tracking in steel blue #8faab2, white 8px-radius buttons with #1a1a1a labels.", "sha256": "b80bad020756910dbdabce5ecfc7731db5b0d6200cf76c11cd36d4be421e6909", "bytes": 11032}, + "a-day": {"name": "a day magazine", "category": "Thai Brands", "description": "Thai lifestyle magazine and media brand (Day Poets Company Limited) measured at adaymagazine.com - warm off-white page #efeee7, black ink #000000, orange accent #fe552c, a single geometric Thai-Latin family lineSeedSansTH from 400 to 800, pill-shaped 9999px outline buttons, and full-bleed photographic tiles.", "sha256": "16b1b25d78da058b45b840cfd3968665b9c09ed2c81c565aa00a900ab4d62eba", "bytes": 10511}, + "aalto-university": {"name": "Aalto University", "category": "Design Systems", "description": "Aalto University's website is a Finnish-language, Inter-only editorial layout on white (#ffffff) with near-black ink (#2d2d2d), a 132px bold wordmark headline, full-width #151515 feature cards with white text, square zero-radius buttons 48px tall, and a yellow (#f7e159), red (#fd6360) and blue (#46a5ff) brand palette.", "sha256": "657e1866c17c7ca0586f72421db0eac379444742438cfa617fe3dc85158ccea4", "bytes": 12291}, + "aardvark-book-club": {"name": "Aardvark Book Club", "category": "Retail & E-commerce", "description": "Subscription book club for the USA and Canada, measured at aardvarkbookclub.com: white page, saturated yellow hero #ffd24a, magenta #ff008c membership button, black Champ 700 display headlines at 106.667px, Degular 600 body, tilted multicolour book cards and a handwritten script accent face.", "sha256": "5a74babdc77eded4e12111b748d071e63b3dfe161590fafb78e73b252286c105", "bytes": 11961}, + "abbott": {"name": "Abbott", "category": "Pharma", "description": "Global healthcare company homepage measured at abbott.com/en-us/homepage: deep navy #000075 canvas, periwinkle #97a3f5 hero, pale lavender #d6dbfc cards and buttons, Wallace Serif 400 headings at 64px with -1px tracking, Wallace Sans body 16px and 4px radii.", "sha256": "dca305747a6426fb3e765eebe5ee392554f077b52102b74648e12ab0e122a3c8", "bytes": 10225}, + "abbvie": {"name": "AbbVie", "category": "Pharma", "description": "Pharmaceutical company homepage measured at abbvie.com: white canvas, deep navy ink #071d49, vivid blue #0066f5 links, purple #8a2ecc headline emphasis, F37 Lineca Medium 800 display at 64px, Roboto body, large single-corner 40px and 80px radii and outlined white buttons on photography.", "sha256": "bedbe7013a76e2a0e24e944798b2170413a25461be14f8085b8009ed21e07a4e", "bytes": 10444}, + "ableton": {"name": "Ableton", "category": "Music & Audio", "description": "Ableton's site is a flat, square-cornered editorial grid set entirely in futura-pt (Futura PT, ParaType) at weights 400 and 700 — black #000000 type on a white #ffffff canvas, one pure electric blue #0000ff for every link and buy button, a light grey #eeeeee (\"dolphin\") for inputs and bands, and saturated category swatches like tiffany #00d2be and salmon #ff8389. Every radius is 0px.", "sha256": "9030f72fcfce536ef681a5130a29b8b3be2b574762b0c0c251018810902823f8", "bytes": 27772}, + "absolute-clean-energy": {"name": "Absolute Clean Energy", "category": "Thai Brands", "description": "Absolute Clean Energy (ACE) English homepage (ace-energy.co.th/en/home): Roboto Condensed throughout, navy #0d1f6e text on white, leaf green #52b78a pill buttons with 40px radius and a deeper #04a46d for tiles and hover, 60px bold uppercase hero headline on a translucent green band.", "sha256": "6ed19850d1c68b3b00f7004269fc4d1377091f91549be79ba61eed3a8285bbb0", "bytes": 10468}, + "accenture": {"name": "Accenture", "category": "Agencies & Studios", "description": "Accenture English homepage measured at accenture.com/en: black #000000 canvas with white text, uppercase Graphik 600 hero headline at 80px with -3px tracking, GT Sectra Fine 300 serif subheads, warm grey #f1f1ef story cards and flat purple #460073, blue #0041f0 and red #e2062e tiles.", "sha256": "c5c63c440a84001f81f41b9e624d87d479856af0f4dac6d0ed3b3c7ef8bd85fa", "bytes": 9895}, + "accor": {"name": "ALL Accor", "category": "Travel & Hospitality", "description": "Accor loyalty and hotel booking site measured at all.accor.com: pale #f7f9fb page, indigo #1e1852 pill buttons with #38326c hover, Montserrat 700 headings at 36px, Roboto body, white 16px-radius cards with a soft shadow and a three-tier --wel token system.", "sha256": "0fb69f03cf309a823593b7867dded45c91e6d30aa5f478c991e85b30618e5169", "bytes": 12102}, + "ace-hotel": {"name": "Ace Hotel", "category": "Travel & Hospitality", "description": "Ace Hotel's website is a warm, editorial hospitality system: near-black ink #231f20 on white, an orange BOOK NOW button (#ff944c) with square 0px corners, a condensed grotesque display face (Toronto Gothic, 140px light hero down to 28px) paired with Bianco Sans 14px body text, and photography-led carousels on pale grey bands.", "sha256": "8a342508415eb6c309d4143bba0cc3c4b8311d9f86d5886923852d953aa46e5c", "bytes": 19471}, + "acer-g": {"name": "Acer", "category": "Consumer Electronics", "description": "Acer United States home (acer.com/us-en): white #ffffff canvas, #222222 ink, Noto Sans throughout with 41.056px/600 section heads, Acer lime green #80c343 pill buttons (800px radius) with dark #222222 labels, #40810c green text links, a #333333 utility bar and a #f0f0f0 footer.", "sha256": "54048485f511d44892593c6eef7d396740f8b131adcb21e3e1a69c6992d6658d", "bytes": 10428}, + "activehop": {"name": "ActiveHop", "category": "Food & Beverage", "description": "Sparkling hop water brand measured at active-hop.com: white page, black Lekton 700 monospace type at 13.6px, a translucent white pill navigation with 80px radius over a rounded photographic hero, and giant Sora 700 flavour words at 240px in sage #e5e8d0 and light grey #eeeeee.", "sha256": "8e16e38fe3f0851287058885e081393c03566cdc65a4335d589684adf3d61ed4", "bytes": 9316}, + "adaline": {"name": "Adaline", "category": "Tech & AI", "description": "AI agent platform homepage measured at adaline.ai: pale green-white #f8f9f5 canvas, forest-green ink #2b390a and #203b14 pill buttons, light Akkurat headlines at 53px with -2.12px tracking, Fragment Mono caps for controls, and a painterly landscape behind a product window.", "sha256": "4557dfa63e949df74cec7c0eb20b9f20b1251bb2cf99eb62db5a8c721b0ffc36", "bytes": 12743}, + "adam-bricker": {"name": "Adam Bricker", "category": "Portfolio", "description": "Cinematographer portfolio measured at adambricker.com: full-bleed film footage, near-black #020202 and cool off-white #f0f2f1 text, huge uppercase NBInternationalPro 500 page labels at 143.25px with -2.865px tracking, small Chaps serif metadata labels and camera-style timecode readouts.", "sha256": "8367741b52f9d69c22757f2bacd15479765a81d1e74d675a43f75f2f29712bfe", "bytes": 9388}, + "adcker": {"name": "Adcker", "category": "Fashion & Apparel", "description": "Social media agency for beauty, fashion and wellness brands, measured at adcker.com: warm grey #efedea page with #191919 type, centred uppercase Kumbh Sans display lines at 165.6px with -8.28px tracking, small psl serif labels, an inline portrait inside the headline and square corners.", "sha256": "e1f1670198cac22aa6a452dc25f63a8a567128c49464772fba49e82e560d9b61", "bytes": 9169}, + "adjust": {"name": "Adjust", "category": "Design Systems", "description": "Adjust's marketing site and Atlas design system — a deep navy (#04182b) hero giving way to white and pale-blue (#f2faff) sections, set in TT Norms Pro (48px bold display, 21px body), with a vivid #005ff7 blue and 48px pill-shaped buttons; the product UI in Atlas uses system fonts, a #255eee primary and 4-8px radii.", "sha256": "dd00eeed0ebb9531940d4a0aec2a32f544313cf5372a796974da876d3183e2ae", "bytes": 15408}, + "adobe": {"name": "Adobe", "category": "Product & SaaS", "description": "Adobe.com marketing home: white #ffffff canvas with full-bleed dark product photography, pure black #000000 ink, Adobe Clean body type and Adobe Clean Display Black 900 headlines at 80px/76px with -3.2px tracking, #f3f3f3 rounded 16px cards, 999px pill buttons, and Adobe red #eb1000 reserved for the logo mark.", "sha256": "d6ce49b7ad2c9aefe14602253d6d0b95e4582c7aae17d2dd6e227536906a68a9", "bytes": 12389}, + "adovasio": {"name": "Adovasio", "category": "Portfolio", "description": "Italian luxury wedding photography studio measured at adovasio.it: warm cream #f5f2ed page, near-black #232323 band, white panels, a 192px light BerlingskeSerif 300 headline over full-bleed photography, Inter labels at 18px, 5px-radius buttons and asymmetric portrait layouts.", "sha256": "397e7ff47fe0cdfc499108c566c6716b33e14b2315af9fb4f82c5ea4699108e8", "bytes": 9832}, + "advance-aviation-jet": {"name": "Advance Aviation", "category": "Thai Brands", "description": "Thai private jet and helicopter charter operator measured at advanceaviation.co.th: light grey #eeeeee page, uppercase Kanit 300 and 400 type at 14px to 28px, orange #ff6600 accents with a #ff6413 hover, square photo tiles with thin white labels and a grey photographic footer band.", "sha256": "e7af2aee1e52e3ad9544a0eaa4c9eca5f2384e86a06b9a3f1aab5633ee567ec8", "bytes": 9617}, + "advice": {"name": "Advice IT", "category": "Thai Brands", "description": "Advice (advice.co.th), a Thai computer and electronics retailer: DBHeaventRounded type at 24px body, brand blue #00569c actions on a #f8f8f8 page, white cards with 16px radius and soft 0.08 shadow, dense banner and product-rail layout.", "sha256": "223eec3039c6806fc76efe2b5bf2dba39c50c4ea090b9948bd07b0a22a587d60", "bytes": 10622}, + "adyen": {"name": "Adyen", "category": "Fintech & Crypto", "description": "Adyen home page (adyen.com), measured — white #ffffff and deep navy #001222 sections, Adyen green #00d16a buttons with navy text and 6px radius, warm grey #f6f5f4 and #f4f5f6 surfaces, the custom Adyen sans at 32px/484 for headlines and 16px/500 for UI, AdyenMono 12px uppercase labels, no shadows.", "sha256": "d87453303c1983ddfbb358ed06c17b24e86aea560ffb4c210b5d1e1f0f655f06", "bytes": 12728}, + "aei": {"name": "AI Energy", "category": "Thai Brands", "description": "AI Energy (aienergy.co.th), a Thai palm-based biodiesel, glycerin and cooking-oil producer, uses white #ffffff pages with #ebebeb bands, warm grey text #685d5d, orange #f57d00 for the contact button, green #008c39 and #006e2d for hover and footer, and IBM Plex Sans with Kanit at 50px/600 hero and 14px/300 body.", "sha256": "31fc583134a5a5415f8fbeb6396538821bb62362486e49d4afd691b3affbefb7", "bytes": 11327}, + "aesop": {"name": "Aesop", "category": "Beauty & Personal Care", "description": "Aesop (Aēsop) storefront design language measured from aesop.com — a warm cream canvas \"#fffef2\" with graphite ink \"#333333\", SuisseIntl grotesque for almost everything (14px body, SuisseIntl-Medium 14px buttons) and Zapf-Humanist 31px for editorial section titles, hard 0px corners on every button, input and tile, 48px-tall solid graphite CTAs that darken to \"#252525\" on hover, a \"#252525\" footer, and amber-glass product photography on near-white tiles.", "sha256": "14edfcb5bb0e72706066a8718af51c079d28ce1452bcba0fc12b7eacfd635711", "bytes": 31626}, + "aether-1": {"name": "Aether 1", "category": "Tech & AI", "description": "Aether 1 Earbuds launch site: near-black navy #050d15 canvas, white Manrope 500 headlines at 48px, Azeret Mono 300 bracketed labels, #41a5ff blue glow edges, glass cards, pill buttons with 53.33px radius.", "sha256": "814625770bd3afaf2adc840d4cb3642b0e4611d91cd7b25763f4b043380f7d9c", "bytes": 10340}, + "affine": {"name": "AFFiNE", "category": "Productivity & SaaS", "description": "AFFiNE (affine.pro), open-source knowledge base software: a light #f8f8f7 page with Inter 500 headings at 48px/-1.92px and 36px/-1.44px, 19.6px/32.34px body copy, #1e96eb brand-blue 34px-radius Get Started buttons (hover 80% alpha), white 14.88px-radius cards with a 0 1px 4px shadow, and a solid #1e96eb footer.", "sha256": "e00dca07734a7efe48f8152c0cdfd94b6fc17f4c053138082952585c420b0da9", "bytes": 14723}, + "affinity": {"name": "Affinity", "category": "Design & Creative Tools", "description": "Affinity (affinity.studio, by Canva) is a black #000000 page with huge Affinity Serif Variable headlines (148px/700 display, 80px section titles), Canva Sans body at 24px/33.6px in #c4c4c4, lime #a7f175 'Free for individuals' buttons with dark #0e1318 labels and 12px radius (hover #96d969), stone #e0dcd6 secondary buttons and warm-black #211d1d panels.", "sha256": "d7d71fdb853658cb10b66a906d40c98dbe728cfa1326e5d7e0b4fb6fb55e6d6b", "bytes": 13273}, + "affirm": {"name": "Affirm", "category": "Banking & Insurance", "description": "Affirm (affirm.com), pay-over-time lender: dark #13131f canvas, light-weight 80px Axiforma headlines, white 96px-radius pill buttons with #9cadfc hover, 24px cards with a faint periwinkle inset ring.", "sha256": "5b0c5c15483bc158d5ca1d54bdafbb9463185f32c9e9b2e5b2f5ebcd6f5ff013", "bytes": 11386}, + "agentic": {"name": "Agentic", "category": "Themed & Unique", "description": "Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.", "sha256": "ce14e4eeab155ae072d31859a3a1867cc793ec2a725d0a5826ceaf417e919309", "bytes": 3056}, + "agoda": {"name": "Agoda", "category": "Thai Brands", "description": "Agoda's travel-booking homepage: white #ffffff canvas, Helvetica Neue throughout (24px/700 uppercase white hero 'SEE THE WORLD FOR LESS', 24px/600 #252c38 section heads, 14px/12px UI text), interaction blue #2067da for the 44px pill SEARCH button, active tabs and outlined pills, a #f8f7f9 16px-radius search panel with a soft shadow, #5e6b82 secondary text, #c53829 prices, 16px-radius result cards and 999px chips, plus the six-colour logo dots.", "sha256": "1960f057bc22d302e100771da2a614d68f99b34636949d43d7fd389dbdf57f68", "bytes": 25486}, + "agricultural-land-reform-office": {"name": "Agricultural Land Reform Office service gateway (สำนักงานการปฏิรูปที่ดินเพื่อเกษตรกรรม, ส.ป.ก. / ALRO)", "category": "Thai Brands", "description": "ALRO (ส.ป.ก.) Thai-language service gateway at alro.go.th/th/ set in Prompt-Light and Prompt-Medium, with a #ffffff and #f6f6f6 canvas, #23312d ink, #00ad6e green accents, white pill labels at 10px radius with a green glow shadow over photographic six-tile cards, and a #36403d footer bar.", "sha256": "02dcc680ab33e9962db5300d6b5ef2c965207067ac3a3192feded98f00578c41", "bytes": 10213}, + "agricultural-research-development-agency": {"name": "Agricultural Research Development Agency (สำนักงานพัฒนาการวิจัยการเกษตร, สวก.)", "category": "Thai Brands", "description": "ARDA research-funding portal (arda.or.th) set in IBM Plex Sans Thai on white and #f9f9f9, with #194569 ink, #00857d teal pill buttons (40px radius, white 18px weight 600 text), a #2c3e61 navy band, and a 48px weight 700 hero headline over agricultural photography.", "sha256": "e5574fe2c7f07d3014b2d4e4f4ee5fa1d476a67233512304a823488585cbf9fa", "bytes": 11527}, + "aig": {"name": "AIG", "category": "Banking & Insurance", "description": "AIG (aig.com) corporate insurance site: navy #001871 header and hero, #1352de blue links and hover fills, Futura PT headlines with Source Sans Pro body, square corners, one soft 0.16 card shadow.", "sha256": "bc45a9875fae641a6c433280a0cb57184db2ac7686ae7c60a62f80ee2d65139c", "bytes": 9528}, + "aim-ai-modernism-of-kharkiv": {"name": "AIM — AI Modernism of Kharkiv", "category": "Fashion & Apparel", "description": "AIM — AI Modernism of Kharkiv (Obys Agency project): warm paper #e7e4df, ink #141414, Khtekatrial 72.832px display and 12.16px labels, hairline rules, no radius, no shadow, opacity-only hovers.", "sha256": "62552ba2a9c6918c77aa80708a7d6c49fe98c8080c9760fc5ccfd60b9e3a1f75", "bytes": 9291}, + "aim-reit": {"name": "AIM Industrial Growth REIT (AIMIRT)", "category": "Thai Brands", "description": "Investor site of AIM Industrial Growth Freehold and Leasehold Real Estate Investment Trust (AIMIRT), measured at aimirt.com/en/home after aimreit.com redirected there. DB Helvethaica X at 14.4px to 32px, emerald #00a788 buttons and nav accents with 3px radius, slate #99a3a8 asset band, white canvas and a #f4f4f4 footer.", "sha256": "fccbcf67d56ce056dea08b0dfa1a1a676737a9530d095db16b07c9a39436bc13", "bytes": 10215}, + "aino-agency": {"name": "Aino", "category": "Portfolio", "description": "Aino (aino.agency), Scandinavian e-commerce design agency: warm #f5f5f0 canvas, #181818 ink, ABC Plus weight 720 36.8px statements, 12.27px uppercase labels, coded portfolio captions, no radius or shadow.", "sha256": "295af4a928cb24916adfdb130e71182871ab1d4d04db0483519e89e580b6e2c6", "bytes": 9958}, + "air-france": {"name": "Air France", "category": "Airlines", "description": "Air France's US booking site (wwws.airfrance.us), built on the Aero token system: navy #051039 text and brand panels, #0045b6 action blue, white #ffffff and #f6f6f7 grey surfaces, bold Excellence In Motion Display headings (20px/28px measured on the hero card) over Excellence In Motion Text 16px body, and small 2px/4px corners.", "sha256": "dd75c8d7aeef3f0d8755a108444a2d83139feea99544b5efae0247ea59ac1007", "bytes": 13856}, + "air-new-zealand": {"name": "Air New Zealand", "category": "Airlines", "description": "Air New Zealand's web system, built on its 'Unison' design system — black #000000 header and footer around white content, teal #008392 for actions and links (hover #00626e), Air New Zealand Sans (Klim's Söhne) at 17px/400 for body with 700 headings, the hero typeface Newzald Black Italic (served as 'airnewzald') for headlines and fares, a #262429 booking panel with #19181b fields, 8px action radius and round 222px fare roundels.", "sha256": "ca8f99565d0195f6e0bf5416ea688affee0153616fc7029f12a4be3046fcae2e", "bytes": 24290}, + "airalo": {"name": "Airalo", "category": "Travel & Hospitality", "description": "Airalo's website is a warm eSIM storefront: cream canvas #f4ebe2, black ink, an orange #ff8832 pill button, a sky-blue #85ccdb feature panel, Alexandria bold at 48px for headlines over Satoshi 18px body, and flat character illustrations with soft confetti shapes.", "sha256": "7b9684811b98be6e4198836b3a9a73c5214a4dec7c95ff44c1da95500ffc6d69", "bytes": 16619}, + "airbnb": {"name": "Airbnb", "category": "E-commerce & Retail", "description": "Airbnb's website is a photo-first marketplace in white with near-black #222222 text and secondary grey #6c6c6c, a Rausch red-pink #ff385c primary reserved for the logo and the search action, one custom typeface (Airbnb Cereal VF, 14px body, 20px 600 headings) and heavily rounded 20px photo cards.", "sha256": "9c1e04c5b9fad5a98cf78b8e4779c5b043cc57b98fc3e26862e8fa3f7a125033", "bytes": 17036}, + "airbus": {"name": "Airbus", "category": "Airlines", "description": "Airbus (airbus.com): navy #071a3d hero and #00205b headlines on white, Inter regular 48 to 52px headings, 700 weight 16px buttons with 3px radius, soft navy 0.15 shadows, awx- CSS variable system.", "sha256": "4afc2496912690cd761ca9589bd1212f144e15bd1a1956a3d3e6ee4447d29c4c", "bytes": 10626}, + "airtable": {"name": "Airtable", "category": "Design & Creative Tools", "description": "Airtable's marketing site is a calm, enterprise-ready product page: white canvas, near-black #161616 buttons with 4px corners, navy ink #181d26, a single link blue, ATSeasonSans at 550 weight (52px hero, 48px section titles), and large product screenshots set on a photographic sky.", "sha256": "16efa08cae476989b0ed7beccead05accdf9fa1733cc43e26929bf9da7803103", "bytes": 18875}, + "airtel": {"name": "Airtel", "category": "Telecom", "description": "Airtel (airtel.in), Indian telecom storefront: black #000000 buttons with #f6f6f6 labels and 8px radius, Tondo and TondoBold type, white and #f7f7fa bands, 16px cards with #e8e8eb borders, 32px wizard pills.", "sha256": "06411ba11feaf4027ef5159c1ce1e4178c36a31720ecd9da0e19cbb8fec5c033", "bytes": 9410}, + "ais": {"name": "AIS", "category": "Thai Brands", "description": "AIS (Advanced Info Service) consumer site ais.th: white #ffffff canvas under a two-tier muse-green header (#1e3d35 top bar, #25584f nav), kelly green #73c23a as the brand accent (nav hover, active carousel dots, --cms-btn-default), DB Heavent at large sizes (62px/64px h1 in #262626, 40px h3, 24px/28px body in #7b7b7b), 16px-radius white icon tiles on a #f5f5f5 band, 8px-radius imagery and soft rgba(27, 28, 25, 0.15) shadows.", "sha256": "9a3c985d29ec053f14d12c305d14e530484d2b09d048ff58af7299f32809ea0e", "bytes": 22677}, + "akaru-2": {"name": "Akaru", "category": "Retail & E-commerce", "description": "Akaru (akaru.fr), creative web agency in Lyon: beige #f1efeb canvas with #0e0e0e ink, Alliance Neue 85.33px section titles and Alliance Platt 8.89px labels, rotating blue, pink, green and terracotta panels, pill and circle controls.", "sha256": "b3d54f6ab6c8c42d1099f5335fa0b24863c29d8af6ddbe477369bf094a6331d7", "bytes": 9905}, + "akqa": {"name": "AKQA", "category": "Agencies & Studios", "description": "AKQA (akqa.com), frontier design and AI agency: black on white with seasonMix 97.36px uppercase display, seasonSerif 44px statements, gradient-clipped link text, translucent pill controls, one 0.05 shadow, Tailwind token system.", "sha256": "7968e0540b4119ea9a6abc37629d2f20102503938a6de0bb57718a14152e6466", "bytes": 11600}, + "aksorn-edu": {"name": "Aksorn Education", "category": "Thai Brands", "description": "Aksorn Education (บริษัท อักษร เอ็ดดูเคชั่น จำกัด มหาชน), Thai learning-materials publisher: Aksorn typeface, deep red #af1015 navigation band, white and #ebebeb surfaces, 8px cards with soft 1px shadow, a gradient login pill at 50px radius and colourful illustrated product banners.", "sha256": "50283e09055c4330f1235f4879ab0df9e42568c10d51210ea19872e427fbcb6a", "bytes": 10514}, + "al-jazeera": {"name": "Al Jazeera", "category": "News & Publishing", "description": "Al Jazeera English home page: white canvas, black ink, Roboto 300-900, red #c31833 BREAKING card, orange #fa9000 accent rules, black pill Sign up button with 18px radius, 10px card radius and flat shadows.", "sha256": "94f0c843c8f00b1994a66a3ac5b4923a20a80667ff54bcc335289f9a2caf92a7", "bytes": 10845}, + "alberta": {"name": "Government of Alberta", "category": "Design Systems", "description": "Government of Alberta (www.alberta.ca) is a civic services portal in Acumin Pro Semi Condensed with a single #006dcc blue for links, search and the Menu tab, #333333 text, a full-bleed photographic hero with white 48px bold headline, #f2f2f2 and #ffffff content bands, and square-edged cards.", "sha256": "00a3b526486db9b5ab672c2c254fe3c569c820b1900379491acb01fe65267c84", "bytes": 12073}, + "aldi": {"name": "Aldi", "category": "Retail & E-commerce", "description": "ALDI US storefront: navy #00005f header and buttons, white canvas, custom ALDI SUED VF typeface at 14px/600, 8px button radius, 12px pale blue #bcedfc cards, pill search field and a flat hairline-shadow header.", "sha256": "6c1974b5062cfe95923010b776fdb522232ab05e86181ea2a8ef85f790380502", "bytes": 10196}, + "alethia": {"name": "Alethia", "category": "Product & SaaS", "description": "Alethia home page: dark forest green #0f1f10 canvas, pale lime #c6f19d call-to-action with 8px radius, Geist headlines at 72px with -3.6px tracking, Geist Mono uppercase labels, cream and indigo bands.", "sha256": "3be82244209edd61251c5f5ec500b8b2068836dc87333c2dd7b449261d18dcf4", "bytes": 9960}, + "alflow-ocr": {"name": "Alflow OCR", "category": "Thai Brands", "description": "Alflow OCR Thai home page: deep teal #013c46 buttons and dark band, white canvas, Inter with Noto Sans Thai at 48.8px/700, 32px-radius buttons, 24px glass cards and bright teal #31cfcc accent.", "sha256": "85232b404977c9739a2059b162cd9196f46c8cfc55250ce7ec272538cca0fab4", "bytes": 11211}, + "algolia": {"name": "Algolia", "category": "Developer Tools & IDEs", "description": "Algolia's marketing site: Sora bold display at 70px with -4px tracking over deep navy #000033 and #06133d bands, Inter for navigation and UI, a #003dff blue Get started action and white-outlined Fix your search button at 56px tall with 8px radius, light #f6f6f6 content bands with #23263b headings and #2563eb card titles.", "sha256": "0d05b9c2e4c52c0f7a483617be7ec0736650e275f23cbf753769010caa7f45d0", "bytes": 14075}, + "alibaba": {"name": "Alibaba.com", "category": "Design Systems", "description": "Alibaba.com is a dense B2B marketplace set in Alibaba_B2B_Sans: white canvas, #222222 ink, Alibaba orange (#ff6600) pill buttons at 36px tall, promo tiles in #fff3ea tints, product cards with 8px radius and bold price lines, and its own --pc-* and --color-* token layer exposed as CSS variables on the page.", "sha256": "0aaec23fd2bd6b8ff38c9f344e47a6a7ffee919d70023af96052fdd511faca4e", "bytes": 12862}, + "aliexpress": {"name": "AliExpress", "category": "Retail & E-commerce", "description": "AliExpress Thai storefront: white canvas, TT Norms Pro 12-14px text, red #f00633 prices and #fd384f brand red, grey #f5f5f5 pill category button with 30px radius, black 40px buttons and 8px panels.", "sha256": "92442acbc7054b35caf74cb353c899bdcc464a9bc1694322c8a28a9930107eaf", "bytes": 11537}, + "all-energy-utilities": {"name": "All Energy and Utilities", "category": "Thai Brands", "description": "All Energy and Utilities (AE, aeu.co.th), a Thai renewable-energy and utilities group, uses plum #571731 and #4c192b surfaces, rose-gold #b58b76 accents, grey #a1a1a1 body text and Sukhumvit Set and Outfit stacks, with a 75px bold hero heading and 50px pill buttons.", "sha256": "740088bffe61851f6bce38ee2058aababf22e25de888d09e49b0271d7484f323", "bytes": 11370}, + "allbirds": {"name": "Allbirds", "category": "Fashion & Apparel", "description": "Allbirds' storefront is a warm oatmeal canvas (#ece9e2) carrying full-bleed lifestyle photography inside 16px-radius tiles, with all copy set in Klim's Geograph at small, quiet sizes (24px/400 hero h1, 14px body, 12px/500 uppercase labels with 0.3px tracking), Self Modern serif for 40px editorial tile headlines and the 30px product name, and Akkurat Mono for tracked uppercase eyebrows. Actions are full pills — a #212121 solid pill and a white pill on imagery, both 33px tall with 8px 16px padding — under a floating white header with a 12px radius and a #212121 footer.", "sha256": "0b1075ea48e0c234f5e7612e556506164412eb183e734248b3ff14d1dd63d59c", "bytes": 30121}, + "allianz": {"name": "Allianz", "category": "Banking & Insurance", "description": "Allianz Group global home page: Allianz Neo typeface at 18px/400, blue #003781 text and filled buttons with 8px radius, pale aqua #f1f9fa bands, navy #122b54 cards and flat shadowless layout.", "sha256": "295ebf03cae5a290d7df359d8d2bd66d55c0f9917e4ee6b7fa71629a4822ea7d", "bytes": 10538}, + "ally-reit": {"name": "ALLY REIT", "category": "Thai Brands", "description": "Thai-language investor site of ALLY Freehold and Leasehold Real Estate Investment Trust, set in Avenir LT Std with kohinoor-thai fallback, deep teal #056967 ink and footer, mint #4bcfab pill buttons (120px radius, 11px uppercase type), dark brown-black #35292b body text and a white canvas.", "sha256": "0672739c01ae5f498b0b33a62919f1d52e980f48492539814e5f7d0778cec293", "bytes": 10388}, + "aman": {"name": "Aman", "category": "Travel & Hospitality", "description": "Aman's site is a warm stone canvas (#f3eee7) with charcoal ink (#313131), serif Lyon Text and Lyon Display for headlines and body, tiny letter-spaced WhitneySSm for eyebrows and buttons, square 0px corners everywhere, and a single flat dark Reserve button.", "sha256": "ea658a5f25c556010166171c59cec23b016fc87632ec2848940200e250dc3639", "bytes": 17962}, + "amanah-leasing": {"name": "Amanah Leasing", "category": "Thai Brands", "description": "Amanah Leasing PCL (amanah.co.th), a Thai car-title and refinance lender built in Webflow: forest green #1a8732 and lime #3dae2b, dark green ink #1a5632, Athiti type at 400 to 600, 100px pill buttons with a soft 0 2px 5px shadow, 10px cards.", "sha256": "b9fadf0e340e5940d9a85ea295cf6a96975c4dc0a0c09ca5956a9849b5bbb0be", "bytes": 10839}, + "amarin-book": {"name": "Amarin Books", "category": "Thai Brands", "description": "Online bookstore of the Amarin publishing group in chuanpim-x type (13.6 to 25.6px, uppercase headings), on white with #334862 slate ink, #149f8e teal as the brand and action color, square 0px buttons, a #ffffffe6 frosted header and #777777 footer text, built on a Flatsome WooCommerce theme.", "sha256": "51c302f36d5ee5bf3d3b579789abf8e54e25f7d5d1960ea6129fa90b7c9da146", "bytes": 12540}, + "amarin-corporations": {"name": "Amarin Group", "category": "Thai Brands", "description": "Amarin Group English home page (amarin.co.th/en): white and #f6f6f6 sections, teal #00a08e brand panels and icons, grey #666666 Sarabun 15px body, anakotmai Thai headings at 42px, circular controls and flat layout.", "sha256": "6b6d830901a03590e9a5546fcd211196501119161a1fcbcac4eb4be9e5f4a992", "bytes": 9270}, + "amata": {"name": "AMATA", "category": "Thai Brands", "description": "AMATA Corporation home page: pale grey #e4e6e9 page with white cards, deep green #014b3a pill buttons with 100px radius, green #007852 figures, Montserrat headings at 45px and Yantramanav 18px body.", "sha256": "2a9b0cef2e9e70ab2e928fc085d799ccb860fff84d36782082e166d44e83f2f2", "bytes": 10006}, + "amazon": {"name": "Amazon", "category": "Retail & E-commerce", "description": "Amazon.com storefront system: white #ffffff canvas, near-black #0f1111 text, #131921 navigation bar, a yellow #ffd814 action button with 8px radius, Amazon Ember Modern Display 700 headlines over Arial 400 functional text, and dense bordered card grids where imagery carries all the colour.", "sha256": "d23b6655aef3b53248fcbff0b36fef5457685545db495013e8d4e93a2dd21e19", "bytes": 10985}, + "amd-g": {"name": "AMD", "category": "Consumer Electronics", "description": "AMD.com home: a black #000000 canvas lit by cyan light-trail imagery, Klavika 54.4px/600 headlines, Open Sans 16px/24px body in #f8f9fa, AMD cyan #00c2de for outlined 2px-radius buttons and accent words, #2899ff product links, and 12px-radius cards edged in translucent white.", "sha256": "6097ef85681942fd4928a28b12f775030c4cd77107d5df78476481b5abd2ee35", "bytes": 10522}, + "american-airlines": {"name": "American Airlines", "category": "Airlines", "description": "aa.com, American Airlines' booking site: white #ffffff canvas, slate #36495a body copy, #0078d2 link blue, #00467f navy headings and a #0860c4 Log in button set in AmericanSans Var 16px/700 with 3.5px corners, plus a cool grey #d0dae0 footer. Type runs through the proprietary AmericanSans, AmericanSansLight and AmericanSans Var families.", "sha256": "27c63f061f5cc16cc819f7f432f6f56320d2fd3dda362b38d3a56886312c3340", "bytes": 14430}, + "amex": {"name": "American Express", "category": "Banking & Insurance", "description": "American Express's site runs on its internal DLS (Design Language System): a white #ffffff canvas, Bright Blue #006fcf actions and links, Deep Blue #00175a for the darkest brand moments, and a six-step gray ramp from #f7f8f9 to #333333 (body ink). Type pairs BentonSans light (300) for 30px display lines with Helvetica Neue for UI and reading text (15px/22px, 16px/24px, 20px/26px). Buttons are 50px tall with 4px corners and 13px 30px padding (the header sign-in is 48px with 8px corners); cards are flat white with a 0 1px 1px rgba(0,0,0,.1) shadow, and focus is a 1px dashed #53565a outline offset by 3px.", "sha256": "79020262d6736686d3f9d4c22d23d06b74d102bb70fe939a3dda87ea90a1eb1d", "bytes": 27189}, + "amgen": {"name": "Amgen", "category": "Pharma", "description": "Amgen global home page: Amgen blue #0063c3 buttons and bands, pale #edf2f7 background, Poppins with 16px uppercase 700 buttons, 3px radius, photographic story tiles with blue gradient caption panels.", "sha256": "d00881040c0b4227d843d4176899fab0704295b1850820f513f77082b979a130", "bytes": 10110}, + "amity-solutions": {"name": "Amity Solutions", "category": "Thai Brands", "description": "Amity Solutions (Thai enterprise AI software) design system: Euclid Circular B 48px headings with Inter body, white canvas, green #1dc497 8px-radius buttons, mint #e6f9f4 tints, 32px glass cards and a #121419 footer.", "sha256": "985bd1ef10379294995c46e6a3afa2ab53cfbdb109e31b930bf8d644ad6558b7", "bytes": 10908}, + "amplitude": {"name": "Amplitude", "category": "Product & SaaS", "description": "Amplitude's analytics site: a white #ffffff canvas with black #000000 headlines in Gellix 72px/600 tracked -1px, Gray 70 #50565b body copy at 18px/24px, black pill 'Start for free' buttons, Amplitude Blue #0052f2 reserved for CTAs, links and eyebrows, #f5f7fa product panels and 13.5px-radius cards.", "sha256": "9da7eb0c96d39536627d82e414ee67a36ba93d51a882c3cfd667387e2c20e7f4", "bytes": 13604}, + "amrit-palace": {"name": "Amrit Palace", "category": "Food & Beverage", "description": "Amrit Palace home page: sand #d8cbb8 background, charcoal #2c2c2c text, saffron amber #d49653 menu panel and icon tiles, Satoshi 11px copy with TT Ramillas serif display, 2-4px radii and dark candle-lit photography.", "sha256": "0cbf0899d6875fa89951e1c94f844a92d448ef3490adf1f4464d639f3e793597", "bytes": 8853}, + "ana": {"name": "ANA (All Nippon Airways) — US English site", "category": "Airlines", "description": "ANA's US English home page measured live — a #f1f1f1 grey page with white #ffffff panels, ANA navy #00146e for every action, #333333 text, a pale booking blue #ccd4ea, and a Myriad Pro stack (Segoe UI, Helvetica, Arial fallbacks) set at 14px body with 600-weight headings; pill buttons at 18px and 100px radii, 15px and 20px card corners.", "sha256": "135098b2b102a35a09a4840fca0b8e1174b80afe6e046a0488572381687d7202", "bytes": 17946}, + "ananda-development": {"name": "Ananda Development", "category": "Thai Brands", "description": "Ananda Development English home page: cobalt blue #0032c8 pills and #0032c6 header, white canvas, Kanit and DB Helvethaica X Thai type, 8px cards, 20px See more button and per-project pastel card colors.", "sha256": "b4dce40171b0d03f608f9c30c230476510227c0977062f07f2238515ee5eac96", "bytes": 10256}, + "anantara": {"name": "Anantara Hotels & Resorts", "category": "Thai Brands", "description": "Anantara Hotels & Resorts: warm sand canvas #f9f5f3, taupe accent #a48e82, charcoal text #4a4a4a, Raleway ultra-light 100-weight display at 50px with Oswald letterspaced uppercase buttons, 2px corners, luxury resort portfolio.", "sha256": "0b1febb24cb8fa4b2f8c117b10d69e885761d22709eb0f667258b43c9a9b9c5f", "bytes": 10486}, + "anime-js": {"name": "Anime.js", "category": "Tech & AI", "description": "Anime.js: warm near-black canvas #252423, stone text #b4b1af, DIN 800 display and 64px 700 hero, uppercase Mono labels, lime #b7ff54 accent, square-cornered buttons with 1px hairline borders; a JavaScript animation engine site.", "sha256": "3874961a9f05a78f1598e430a033d26b258c85a1e2131f3950364c147a9a7eaa", "bytes": 10908}, + "ant": {"name": "Ant Design", "category": "Frontend Frameworks", "description": "Ant Design (antd) is Alibaba's enterprise React design system: a white canvas with one brand blue #1677ff, alpha-black text (#000000e0 down to #00000040), 14px/22px base type in the system stack with AlibabaSans on the marketing site, 32px controls with 6px radius (8px on large buttons and cards), and a faint 2px offset button shadow.", "sha256": "e340da1660710fff4d247a616d6f758756afa65302935116e926d4670ee3fb7a", "bytes": 22056}, + "ant-group": {"name": "Ant Group", "category": "Banking & Insurance", "description": "Ant Group (蚂蚁集团) corporate site: white canvas, #666666 body text, #333333 headings, Ant blue #1677ff for the active tab, deep navy #0c1f3a footer, AlibabaPuHuiTi display at 48px, full-bleed photography, 24px-radius ghost buttons.", "sha256": "b7ae732f9a7f3b67805d9eeb8f218963ae7104dfd36e765d4883ab5162d64ba4", "bytes": 10001}, + "anthropic": {"name": "Anthropic", "category": "AI", "description": "Anthropic home: ivory canvas #faf9f5 with oat page band #f0eee6, near-black ink #141413, Anthropic Sans 700 headlines at 57.7px, Anthropic Serif body and 71px display, oat #e3dacc cards with 24px radius, dark pill buttons.", "sha256": "9946fdd37649b00d5cc31f1c77b0fd87e5e24dd1b1b6e7190eafd42d5c72a9f8", "bytes": 10660}, + "ants": {"name": "ANTS", "category": "Thai Brands", "description": "ANTS (Advance Network Technology and Services), a Thai SMS, LINE and MarTech platform company: white #ffffff canvas, deep navy #19164f ink and buttons, orange #f26622 kicker labels, Poppins with Kanit for Thai, 64px hero headings, pill buttons with a 0 2px 10px shadow and 16px to 54px rounded cards on a calm, photo-led layout.", "sha256": "090346585bac47d83ee46f101d87659a8b37cb3ba52cd040517db7b30ae36f42", "bytes": 10426}, + "anuc-home": {"name": "Anuc Home", "category": "Architecture & Interiors", "description": "Anuc Home: Spanish-language interior design and Feng Shui studio; white canvas, #f0f0ef stone bands, ink #1a1a1e, Instrument Serif 68.5px display, Instrument Sans 17.5px body, five Feng Shui element accents, square-cornered stone-gray buttons.", "sha256": "dc2156822efc3eab5c00fd310e065ad5a308fced90661b0528514e1dd5f8713e", "bytes": 11472}, + "anytype": {"name": "Anytype", "category": "Productivity & SaaS", "description": "Anytype (anytype.io), \"a safe haven for digital collaboration\": a stark black-and-white grid site. Riccionets serif display type from 88px to 120px with tight negative tracking, Inter 300 18px/26px body, a #000000 6px-radius Download button, 1px #5b5b5b grid lines on black bands, and #ff6a7b coral and #3cd9b3 mint accents.", "sha256": "a42cc11c8a6080dbbe3a5d629caf29bd7f1219c262a58966447143b06126b33f", "bytes": 12471}, + "aot": {"name": "Airports of Thailand PLC (AOT)", "category": "Thai Brands", "description": "Airports of Thailand PLC (AOT) English home: white canvas, navy #032d5d headings, royal-blue #2f4791 menu band and Search button, deep navy #182852 footer, Kanit and Noto Sans Thai type, navy news cards with 25px radius.", "sha256": "ede1c0fbce5bede7cf858af86ad144c71a47f5f38d24c374cadfeee48a39854a", "bytes": 10329}, + "ap-property-perfect": {"name": "Property Perfect", "category": "Thai Brands", "description": "Property Perfect (pf.co.th) residential developer site, Thai-language, set in aktiv-grotesk-thai 400/500/700 with navy #003767 / #004b8d headings and actions on a white #ffffff canvas, corner-cut radii (single rounded top-left corner of 10px to 14px) and a red #ee2e24 hotline pill.", "sha256": "c52708455fa5c555bfe33238ed8f4b8257720b6537d0872c6c9c1de9fed7269f", "bytes": 11942}, + "ap-thailand": {"name": "AP Thai", "category": "Thai Brands", "description": "AP Thai (AP Thailand) Thai-language home: white canvas with #f5f5f7 bands, AP typeface, brand red #921d1e pill buttons at 9999px radius, 36px-radius project cards, gray #6b6b70 body text, warm #f5f0ea section surfaces, real-estate listings.", "sha256": "bb6a3465dd15bdfc7849cc5f4e03bc95a1a174baf4105f1b2dd8cc17cdbd579d", "bytes": 10946}, + "apechain": {"name": "ApeChain", "category": "Tech & AI", "description": "ApeChain: electric blue #0054fa hero, pale sky canvas #e2f0ff, midnight #030a21 page band, manuka condensed uppercase display (120px hero), DM Sans body 16px, DM Mono 12px uppercase buttons with 16px radius and gradient outlines.", "sha256": "6e4d9360f66ca15247e02b971782254da1205443e8d5817f662a92e8182c2701", "bytes": 9871}, + "apollo": {"name": "Apollo", "category": "Product & SaaS", "description": "Apollo.io's apollo.io site: a white #ffffff content sheet with 24px corners set inside a warm grey #ccc9c6 frame, black #000000 seasonMix serif headlines (64px/550), abcDiatype body text, an acid yellow #ebf212 8px-radius 'Sign up for free' button (hover #fcffa8), black and outlined secondary buttons, warm #f7f5f2 image panels and 24px-radius cards with #e4e5d9 borders.", "sha256": "33c2b941c89719f19089d6d67eae0a48a5f19b82cc3c0200cc30d21262e6342f", "bytes": 12393}, + "apple": {"name": "Apple", "category": "Media & Consumer Tech", "description": "apple.com is a cinematic product-tile gallery: alternating black #000000 and light #f5f5f7 tiles, SF Pro Display 56px/600 headlines with -0.28px tracking, SF Pro Text 17px buttons, a single blue #0071e3 on 44px full-pill (980px) CTAs, a 44px translucent nav #1d1d1fcc, and almost no shadow or border chrome.", "sha256": "a6c1439ef23bd29f6803faabba1df3de93a0500d05675e5ce870a3c192a4418d", "bytes": 17568}, + "apple-music": {"name": "Apple Music", "category": "Music & Audio", "description": "Apple Music marketing page (apple.com/apple-music): Apple's light gallery system — #f5f5f7 sections, #ffffff cards with an 18px radius, #1d1d1f text — set in SF Pro Display (128px/600 hero, -0.256px tracking) and SF Pro Text (17px/25px body, -0.374px). The action color is Apple Music red #fa243c on 980px pill buttons (11px 21px, 44px tall); the hero sits on a magenta-to-red gradient and links are #0066cc. The music.apple.com web player uses #d60017.", "sha256": "91e15b1f40a5a34837f3f1afd2fa7b14ee229301d627dd513017f9ffe7c04a2e", "bytes": 21411}, + "application": {"name": "Application", "category": "Professional & Corporate", "description": "App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.", "sha256": "129690c16ee13cc430e7fd4bbc310078ca058269990f800f7142f9c5c7628ed8", "bytes": 3132}, + "appwrite": {"name": "Appwrite", "category": "Backend, Database & DevOps", "description": "Appwrite's open-source cloud site: a white #ffffff canvas, zinc #71717b body text and #09090b headings, Appwrite Pink #fd366e buttons with 8px corners, light Aeonik Pro 76px/400 display headlines with a trailing underscore, system-UI body at 15px/24px, and frosted #ffffffcc product cards.", "sha256": "ee06efe5e77800ff3f3bda16fd175eed3b49d707e3eb20485809b82cd0097257", "bytes": 13521}, + "arc": {"name": "Arc", "category": "Productivity & SaaS", "description": "Arc's arc.net is a playful brand-blue site: #3139fb headings and full-bleed bands, an #fffcec off-white, Marlin Soft SQ 700 headlines with tight tracking (45.51px hero, 28px sections at -1.4px), ABC Oracle body, #2702c2 and white download buttons at 10px radius, and pastel browser screenshots as the main imagery.", "sha256": "ede287cb1597da59d7ad1f9db9d28f375a3e4b34a509cfa6ae8375dbce20638f", "bytes": 12792}, + "arcadia": {"name": "Arcadia", "category": "Energy & Climate", "description": "Arcadia (arcadia.com), the energy intelligence platform: deep Evening Sea greens (#0b2c24 full-bleed bands, #104336 cards and buttons) over a warm Pampas #f3f1ec page top, with Arcadia Green #0fff87 reserved for the primary call to action. Everything is set in DM Sans (served as __DMSans_cff41e), light 300 for 56px/61.6px hero headlines with +0.56px tracking, 16-20px regular body in cream #f9f3e8 on the dark canvas and #535e5d on the light Pampas top. Buttons are 8px-radius rectangles 42-48px tall; product cards use 16px corners and 24px padding.", "sha256": "f129a78d26f37e1b61bbf23edd51b557ea911ba87ead83bd461cddea38344241", "bytes": 25989}, + "arco": {"name": "ByteDance", "category": "Design Systems", "description": "ByteDance corporate site: solid blue #3c8cff navigation, near-black #333333 text on white, DouyinSans-Bold display (52px, falls back to a serif in capture) with DM Sans 22px body, 22px card radius, circular portraits and soft gradient circles.", "sha256": "329dd3b284a4fdb05fc88aa07015d32a20e989c9fb4e961139820ad8da5c16ff", "bytes": 9637}, + "arco-design": {"name": "Arco Design", "category": "Frontend Frameworks", "description": "Arco Design is ByteDance's open-source enterprise design system: Inter with CJK fallbacks at 14px, one cobalt blue #165dff on a white canvas, a cool grey ramp (#1d2129, #4e5969, #86909c, #e5e6eb, #f7f8fa), 32px controls with 2px radii, flat 1px-bordered surfaces and faint cool shadows.", "sha256": "59a7fcde431edb160027d7219b8072f16d4ff70e28079d3034f3ce9cd6215372", "bytes": 18442}, + "arcteryx": {"name": "Arc'teryx", "category": "Fashion & Apparel", "description": "Arc'teryx Canada home page (arcteryx.com/ca/en), measured — white #ffffff canvas, #1a1a1a black for copy, input and footer, full-bleed outdoor photography with Elan ITC Pro 32px uppercase titles, Helvetica Now Display 16px/400 body with 0.32px tracking, ghost buttons with #b2b2b2 borders, #f5f5f5 41px search pill.", "sha256": "6662c5a7cb347af7045252f56ce6df66c13adcb3b600330e3349445462ecff91", "bytes": 12691}, + "are-na": {"name": "Are.na", "category": "Agencies & Studios", "description": "Are.na's homepage is a quiet, document-like page: #ffffff canvas, #333333 ink, a single 568px text column set in Areal (Dinamo's custom Arial revival, served as areal, \"areal Fallback\", Arial) at 19.2px/400, and one deep navy #00075f used for the Sign up button and the footer. Buttons are 34px tall with a 3px radius and 700-weight 14.4px labels; surfaces are #f7f7f7 greys with #ededed hairlines and a soft 0 0 34px shadow.", "sha256": "12058364adc707a484ba00dc1ada950c9509466ae889dcc209907bb7ed8ce138", "bytes": 37289}, + "area-17": {"name": "AREA 17", "category": "Agencies & Studios", "description": "AREA 17's site is a restrained white #ffffff page in Suisse Intl: 55px/500 statements with -0.825px tracking, 16px/400 body (+0.064px), #1a1a1a ink, #949494 grey lists, light-grey #f2f2f2 buttons with 8px radius and 16px 24px padding, #e6e6e6 hairlines, full-bleed black #000000 media sections and no shadows.", "sha256": "dd1d7d3367be414ab60e5a38e9b2230ae7a6941ae3da214550f580c487222b8b", "bytes": 12569}, + "areeya": {"name": "Areeya Property", "category": "Thai Brands", "description": "Areeya Property (areeya.co.th) developer site: DB Gill Siam X Thai type with a 45px bold heading and 20px body, #101010 ink on a warm #f6f6f3 canvas, an olive #6e7c5d search button and footer band, square 0px controls, hairline-underlined form fields and calm architectural photography of Como, Aren and Nora homes.", "sha256": "b0a1bfe2b25bcd11d91befda6ea43a342593a95e002e97c09462ed6e3e26e49e", "bytes": 10863}, + "ariakit": {"name": "Ariakit", "category": "Design Systems", "description": "ariakit.com, the docs and showcase for an unstyled React accessibility toolkit: near-white #fcfdfd canvas with cool gray #edf0f3 cards, black type in a Geist Sans variable face (72px/800 hero, 24px body), a single blue #007acc primary with 8px radius and soft shadow, and 4px to 16px radii on example surfaces.", "sha256": "acf8e77acfbd3e142ea8bc5232ae4b7b1eeab3cab586552f40932bbf9a8300f8", "bytes": 12079}, + "arinsiri": {"name": "Arinsiri Land", "category": "Thai Brands", "description": "Arinsiri Land (arinsiri.com) Thai home developer site in Rethink Sans with Kanit Thai fallback: gold #ad8700 accents on deep navy #003b70, near-black #2c2c2c text on white #ffffff, 7px ghost links, 30px navy quote card and 15% rounded image frames.", "sha256": "235893024af217de85180bc47ec983fe006ef3581bd8dbe32263c30369e05b0a", "bytes": 10978}, + "arise-idc": {"name": "Arise IDC", "category": "Thai Brands", "description": "Arise IDC: Thailand's AI hyperscale data center provider; white canvas with #f8f8f8 bands, black buttons with 6px radius, gold-magenta-red gradient (#ffca00, #ff0099, #ff0000), brandFont 500-weight type at 50px display, 16px-radius white service cards.", "sha256": "51682258dc75d15064d4fa401a00518b752ccd8086eb1078d083d5f30973ec30", "bytes": 10557}, + "ark-ui": {"name": "Ark UI", "category": "Headless UI", "description": "Ark UI is Chakra Systems' headless component library (45+ components for React, Solid, Vue, Svelte on Zag.js). Its site uses Wix Madefor Text on a warm #fdfdfc canvas, warm greys (#21201c, #63635e, #e9e8e6), one coral accent #eb5e41 on 4px-radius buttons, 60px/700 hero type and a dark #191918 code panel.", "sha256": "b0b73805d5b893a0f0aacea87eb1392af79f0c4b355c674b74ab0887fcf5ec44", "bytes": 21835}, + "arket": {"name": "ARKET", "category": "Fashion & Apparel", "description": "ARKET's web store as measured on arket.com: a white #ffffff canvas, pure black #000000 text and buttons, and full-bleed editorial photography, set entirely in the brand's own monospaced arketSansMono (one weight, 400) with an arketSCSansMono small-caps companion for chips and badges. Corners are almost square — 2px buttons, 1px badges, 4px search field — with 12px pill-ish category chips in #eaeae8, a cream #fff3db 'New' badge and sale red #d80404 as the only accents.", "sha256": "ccaf3d6c72b62e5b1f7b2c0080a9a9cf26ef3bcf08019a27e90bb7be46651855", "bytes": 19462}, + "arqui9-visualisation": {"name": "Arqui9 Visualisation", "category": "Architecture & Interiors", "description": "Arqui9 Visualisation: London 3D architectural visualisation studio; pure black canvas #000000, white text, PPNeueMontreal 400 at 41.6px display and 17.3px body, MartianMono uppercase micro-labels, no radii, full-bleed CGI imagery.", "sha256": "0bfd3608e649dc39920bd1eec9ea718328c5da641251a57f1894037f93be37d0", "bytes": 9986}, + "artefakt": {"name": "Artefakt", "category": "Portfolio", "description": "Artefakt (artefakt.mov): Frankfurt hybrid film production studio; pure black canvas #000000, white text, DrukWide 700 uppercase at 42.67px with -1.78px tracking, TronicaMono 10.67px uppercase body, square corners, ASCII-glyph hero.", "sha256": "898e738fdc6703f11d5a3713853d8ec59445813fcce148fd688b4d53397b68f8", "bytes": 9656}, + "artem-shcherbakov": {"name": "Artem Shcherbakov", "category": "Portfolio", "description": "Artem Shcherbakov: director and creative lead portfolio; white canvas, near-black #0e0e0e ink, EaseDouble 900 display with -6.26px tracking at 78.2px, Arial Narrow body 21.3px, neon green #00fe40 accent, capsule-shaped media.", "sha256": "e2e9523bbf9c3dea3b9ddcc6b50e92bd274d4142f203c2c447f9376d47d1535c", "bytes": 10424}, + "article": {"name": "Article", "category": "Home & Furniture", "description": "Article's storefront (article.com) is a warm, photo-heavy modern-furniture shop set in Proxima Nova, served as separate files (proxima_nova_regular / proxima_nova_bold, all at computed weight 400): #2e2e2e ink on #ffffff, coral #ff6458 as the single accent for Add to cart pills (9999px radius, 1.6px uppercase tracking, hover #cc5046), white 100px-radius pills on photography, 32px bold headlines, 8px-radius cards with a 1px #c2c2c2 border, and a #2e2e2e footer.", "sha256": "c5edbb1944c94fab6dba956f3ae9c6d5bded70f89ca3d52b84127bd262f704e3", "bytes": 20678}, + "artiom-yakushev": {"name": "Artiom Yakushev", "category": "Portfolio", "description": "Black-canvas portfolio of a Yerevan-based digital designer: pure white text on #000000, Suisse grotesk at 70.4px headings and 16.64px body with tight negative tracking, Apparel serif italic accents at 24.32px, grey #8a8a8a secondary text, and no buttons or filled controls.", "sha256": "119a26c2494270fc846e18a63ae07100b110e0ca2cc006bc3888fef46e39a2fb", "bytes": 10117}, + "artistic": {"name": "Artistic", "category": "Creative & Artistic", "description": "High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.", "sha256": "93e7d039b0465848ca0c00ca0546552ad9c6c70bbb3f991e18a9303d7844f8fa", "bytes": 3066}, + "artsy": {"name": "Artsy", "category": "Design Systems", "description": "Artsy's marketplace site and its open Palette system — a near-monochrome gallery wall in ll-unica77 (Helvetica Neue fallback) with black text on white, grey ramp #707070 to #f7f7f7, black 15px-radius pill buttons that turn Artsy blue #1023d7 on hover, and 3px-radius search inputs; the art supplies all the colour.", "sha256": "b2392ff64cd628472f7430e4b1babc0059854a96cbfbdc6fd2f51ef1c5e1fdf3", "bytes": 13553}, + "asana": {"name": "Asana", "category": "Design Systems", "description": "asana.com home: white canvas, near-black #0d0d0d ink and pill buttons (100px radius), TWK Lausanne in light 300 weight at 102px with -2.55px tracking for the hero, 54px section headings, 20px body, and animated product-graph illustrations with a coral-to-fuchsia gradient on one hero phrase.", "sha256": "1224bdb882db65e519e8da7a8a383d791225b7c6aaceacdcb3689d1a5ff04b36", "bytes": 11095}, + "ascend-group": {"name": "Ascend Group", "category": "Thai Brands", "description": "Ascend Group is the Bangkok-based Ascend corporate site: Anuyart type (48px bold uppercase headlines, 14px body), a brand red #ed1c24 header and buttons with 3px radius, white and light-grey #e5e5e7 bands, rounded 20px image cards, and a page-wide grayscale(1) CSS filter on the live site at measurement time, removed for the colour capture.", "sha256": "2d2ec1e4ee82679c548e34da23733a7de7fa58911f416909221e827bb4bc22b3", "bytes": 10734}, + "ascend-money": {"name": "Ascend Money", "category": "Thai Brands", "description": "Ascend Money is the regional fintech arm of Ascend Group: a white header with the ascend money wordmark and a red active-link underline, deep red #8b0304 bands with white anuyart_light type at 21px body and 36px headlines, light grey #ececec sections and full-bleed portrait photography.", "sha256": "89ed545d7be66daf84f7fcb323921aa776487540fcabf218d8ae6f210185a215", "bytes": 10105}, + "ashley-brooke": {"name": "Ashley Brooke Creative Studio", "category": "Agencies & Studios", "description": "ABCS, the Ashley Brooke creative studio site: white #ffffff canvas, near-black #131410 ink, brand red #f63d18, pale blue-grey #d9e3e7 display words, Mosvita bold 36.6536px headlines with -1.09961px tracking, Universo 500 uppercase 94.5359px statements, 8px radius cards.", "sha256": "97a2479ed78f143b38e70351b348e6741ba84c6cb6f49b64421445018712556b", "bytes": 9764}, + "asia-biomass": {"name": "Asia Biomass", "category": "Thai Brands", "description": "Thai-language corporate site of Asia Biomass Public Company Limited (ABM), a biomass-fuel supplier. Prompt typeface at weight 500 and 600, brand green #1e8b44 for headings and the top bar, chocolate-brown #6d3c18 buttons with 5px radius, white canvas and a pale #f8fcff section tint.", "sha256": "2c0a28d08b752df8dd78b4f4a2ea3d73e5d074267255ac1486bf0315a5fd056b", "bytes": 11111}, + "asia-books": {"name": "Asia Books", "category": "Thai Brands", "description": "Asia Books (asiabooks.com) is a Thailand bookstore web shop set in DB Heavent at 16px to 24px, black on white with a Tailwind-style green brand (#00b54e fills, #22b25a links), a cream #fff8e7 New Releases band, red #da383f discount prices in pink-bordered pills, and 50px pill outline buttons around book-cover carousels.", "sha256": "b85592b4750d5e0bc962929fb4a9958342c3566682936d5c00345d46cefec2e6", "bytes": 11279}, + "asia-green-energy": {"name": "Asia Green Energy", "category": "Thai Brands", "description": "Asia Green Energy (AGE, age.co.th), a Thai clean-coal trader, logistics and sustainable-energy group, uses a white canvas #ffffff, charcoal ink #333333 and a single brand green #00a052 for buttons, headings and the top bar, with an #f5f6f7 footer, Prompt 500 at 16px/23.8px and TBold display headings.", "sha256": "e10ee40717ac0db8e95aa07514fb2c1fb371d0d97ed6bd0452deda3cdac8ddf5", "bytes": 10967}, + "asia-plus": {"name": "Asia Plus Securities", "category": "Thai Brands", "description": "Thai brokerage and research portal in DB Heavent: 86px weight-100 headings, navy #132a4b bands, teal #04a791 accents, white #ffffff research cards, 0px-radius navy submit button and 4px-radius cards with 50px pill outlines.", "sha256": "b672d36e488a58ce41356724d0e18494d131b6954291ab3b283a94a749aeedfb", "bytes": 10345}, + "asian-marine-services": {"name": "Asian Marine Services PCL. (Asimar)", "category": "Thai Brands", "description": "Asimar, Thailand's listed shipyard (page title 'Asian Marine Service PCL. - Most Awarded Shipyard in Thailand'): navy #273b7b bars and buttons, white #ffffff body, black #000000 hero, Avenir LT light 17px body, Avenir heavy 32px and 60px headings, flat square buttons.", "sha256": "0c9b24438690797b2714d5b40404f69127ab2e50d752dc463163b1427e5e0fba", "bytes": 10551}, + "asiatique": {"name": "Asiatique The Riverfront", "category": "Thai Brands", "description": "Asiatique The Riverfront (asiatiquethailand.com) is Bangkok's riverside night-market mall: a white canvas with Prompt at 16px for text and Taviraj 600 serif headlines at 32px to 48px, black ink, crimson #c60c46 as the single accent for the logo, active and hover navigation, and four tall cinematic photo columns at the top of the page.", "sha256": "30ed1bf3986641ee616febc43b8c980ef5253186fcbe247517ece8736574b46a", "bytes": 9342}, + "asos": {"name": "ASOS", "category": "E-commerce & Retail", "description": "ASOS's home page is black-and-white fashion retail set entirely in futura-pt: white #ffffff page, #000000 header, tiles and footer, square-cornered (0px) white 'SHOP WOMENS' buttons in 16px Bold with 2px letter-spacing, a navy #051a6e app CTA, and a 19px-radius search field.", "sha256": "7c1836e80041b91603b182bdc46f2b01db6be0e7535a526293b2b266163bf26c", "bytes": 12286}, + "aspen-search": {"name": "Aspen Search", "category": "Tech & AI", "description": "Executive search for quantitative finance and tech: white #ffffff grid of hairline-divided cells, near-black #232323 ink and panels, mint #a1ffcb accent, SuisseIntl at weight 450 with -4% tracking (161.339px display), SuisseIntl Mono 12px uppercase labels, halftone-dithered imagery, square 0px corners.", "sha256": "ff8b33e8ef9967fe1787c3f6cb8bf9051e06183dbd4705f2441422a3b63046c7", "bytes": 10981}, + "asset-five": {"name": "Asset Five Group", "category": "Thai Brands", "description": "Asset Five Group (A5, assetfive.co.th) Thai luxury-home developer site: burgundy #741032 ink and headings, gold #d39359 hover accent, black #000000 header and caption bars, Kanit Thai text with the arpona display face on a white #ffffff canvas, 5px and 100px radii.", "sha256": "8a0c00f84bce0d1e870afba375b7876eab65b3d3dc6d739ca934091acee5b529", "bytes": 8747}, + "asset-world": {"name": "Asset World Corporation", "category": "Thai Brands", "description": "Asset World Corporation (AWC), Thailand's integrated lifestyle real-estate group: white #ffffff canvas, charcoal #1a1a1a ink, burgundy #a32035 for section labels and hover, Arial throughout with 6px-tracked 30px uppercase statements, full-bleed hotel photography and 3px to 4px radii.", "sha256": "fa0e8a846cb8c041e6b8f7b660705036d0bc344a0c668bafb03ff0b2c1d2b9d5", "bytes": 9554}, + "associated-press": {"name": "Associated Press (AP News)", "category": "News & Publishing", "description": "AP News home page: white #ffffff canvas, ink #191919, AP red #da1026, black #000000 header and footer, grey #f2f2f2 modules, the proprietary AP typeface at 13px body and 23px/700 headlines, uppercase 30px section titles, 3px radii and a dense multi-column news grid.", "sha256": "3fbcfac3e890eb8b863804c62cb982924387f89d3e1bd677a7b77a3b2dd183bf", "bytes": 10051}, + "assumption-university": {"name": "Assumption University of Thailand", "category": "Thai Brands", "description": "Assumption University (AU) home page: white #ffffff canvas, black #000000 text, red #dd3333 buttons with 8px radius and drop shadow, crimson #aa1e23 and #a51818 headings, footer #e02826, Kanit 17.6px body with Monda 25px card titles, outlined pill header buttons.", "sha256": "9a3c114d6afee8e53682e3805f3b25846f64fbe4aac050ed884926511b00ab3d", "bytes": 10500}, + "aston-martin": {"name": "Aston Martin", "category": "Luxury", "description": "Aston Martin UK home page (astonmartin.com/en-gb): full-bleed car photography with near-black #161a11 hero fields, off-white #f4f4f2 news band, racing-green #00665e actions, AstonMartinFlare serif headlines at 54px and 32px, AstonMartinSans 14px body with 0.55px tracking, 2px-radius buttons.", "sha256": "793ae9d88525de0eeed07b9b12660d789f81795ca3bde5adb2229c6889cc8303", "bytes": 10681}, + "astrazeneca": {"name": "AstraZeneca", "category": "Pharma", "description": "AstraZeneca global home page: white #ffffff canvas, slate ink #3c4242, plum #830051 buttons with 2px radius, navy #003865 stat tile, dark #1b1b1b footer, lexia serif headlines (42px light, 28px, 23px) with positive tracking, Helvetica Neue navigation, science and people photography.", "sha256": "5a30c7e57d48b33b7b9acec8f2f34061a095dbb947b6e847d82f246d2995cb51", "bytes": 10610}, + "astro": {"name": "Astro", "category": "Frontend Frameworks", "description": "Astro's marketing site (astro.build) is a deep-night dark page: canvas #060913 with #0c0f19 panels, body copy in #bfc1c9 at weight 300, headlines in OH no Type's Obviously (48px/700 hero), a white #ffffff pill 'Get Started' CTA (9999px radius, 42px tall), 16px-radius cards with #23262d borders, and mint #4bf3c8 / amber #ffd493 eyebrow accents over purple-to-blue gradient art.", "sha256": "ba33d4c1223f8dc1e456897232f8fc949ca6e3ca00827bf302b58a71e02b7250", "bytes": 14838}, + "astro-uxds": {"name": "Astro UXDS (Rocket Communications)", "category": "Design Systems", "description": "Rocket Communications' site, creator of the Astro Space UX Design System, uses the Aglet Sans typeface in uppercase with wide tracking (80px display, 4px letter-spacing), a light #f4f4f4 canvas with #1f3345 ink, deep navy and #131313 bands, an orange #f6a10e accent, 30px-radius outlined buttons and curved section edges over space imagery.", "sha256": "8fa0113a006218b6390551789681b41dd0161ccf034cd6722ea904a75acfad1b", "bytes": 12146}, + "astrodither": {"name": "ASTRODITHER", "category": "Tech & AI", "description": "AstroDither by Robert Borghesi LAB, an audio-reactive Three.js and WebGPU dithering experiment: near-black #080808 canvas, off-white #f7f8f9 text, Azeret Mono at 11.9467px with -1.19467px tracking, and a 50%-black entry label over a pixel-glyph field in pink, violet and white.", "sha256": "c7409c6f2cf09ed40803cbdc6669be7a15be7e864398e9d1db05ea859b77c1c1", "bytes": 15578}, + "asus": {"name": "ASUS", "category": "Consumer Electronics", "description": "ASUS global home page: white #ffffff and light grey #f5f5f5 canvas with black #000000 product-campaign bands, slate ink #4d4d4d and #181818, ASUS blue #006ce1 for buttons and Learn more links, TT Norms Pro headings (52px condensed display, 42px/44px) over Roboto body, 8px button radius and 16px card radius.", "sha256": "872757992526025533fdda6307a4f799bf08bf775b5c96559528f4e9ffe91a45", "bytes": 10874}, + "atandt": {"name": "AT&T", "category": "Telecom", "description": "AT&T consumer home page: white #ffffff and cool grey #f3f4f6 surfaces with sky tint #f2fafd, ink #1d2329, brand cobalt #00388f pill buttons (28px radius, 48px tall), cyan #009fdb hero headline, bold sans at 48px with -1.44px tracking, card shadow 0 4px 20px 6px.", "sha256": "05d5f360ea322d07d773a4a37d5c965cb571dcd1dbae6b89f5916d2de1bb05a5", "bytes": 10907}, + "atelier-zero": {"name": "Atelier Zero", "category": "Editorial · Studio", "description": "A magazine-grade, collage-driven visual system: warm paper canvas, surreal", "sha256": "61fa17ac867501dabcc903e8381a568650e501ae04ddbd6d77f657cdf913f10c", "bytes": 13622}, + "atlanta-hotel-bangkok": {"name": "The Atlanta Hotel Bangkok", "category": "Thai Brands", "description": "Wix-built site of The Atlanta Hotel, Bangkok (est. 1952): a flat #910826 oxblood canvas, a cream #ffe991 art-deco wordmark set in an uploaded custom font, white 20px bold body copy in the Wix web font proxima-n-w01-reg, and square #edcc26 yellow link-buttons with 3px black borders and a soft 4px shadow.", "sha256": "e5efe5a561074134043f49bb47d8a43ca9200eca606f80ded4684f22f75a0906", "bytes": 14779}, + "atlas-energy": {"name": "Atlas Energy", "category": "Thai Brands", "description": "Atlas Energy Public Company Limited (atlasenergy.co.th), the Thai LPG distributor behind the PT cooking-gas brand, uses a white canvas #ffffff, charcoal ink #333333, green #1eaf4d for its main button and #04c542 tiles, orange #ff7f28 for headings and tiles, set in Anuphan with 18px/28.8px body and rounded 40px tiles.", "sha256": "82ca282511a4b13bffd1c45cb42269df14409918fb64b0dd99516fa32740db4c", "bytes": 11500}, + "atlaskit": {"name": "Atlaskit", "category": "Design Systems", "description": "Atlaskit docs site for Atlassian's UI library: white sidebar on a #f8f8f8 page, #292a2e text, Atlassian blue #1868db, Charlie Display 32px titles with Atlassian Sans 14px UI text, 4px and 6px radii and hairline card shadows built on --ds-* tokens.", "sha256": "ae7be16b940769f73eeb2b5366befc4973fefdddffb27e35a3fbb5bfc9cb84ac", "bytes": 9731}, + "atlassian-brand": {"name": "Atlassian", "category": "Design Systems", "description": "Atlassian marketing home page (atlassian.com): a white canvas (#ffffff) with near-black ink (#292a2e, headings #101214), a single blue (#1868db) on pill CTAs and links, Atlassian's brand typefaces Charlie Display (54px at weight 500, tight negative tracking) and Charlie Text, 20px and 40px card radii, and a charcoal (#1e1f21) feature band, all expressed through --ds- design-token variables.", "sha256": "efdf177aecf71475d66193d03af36079f58f1f0e47c276d26ed7bcbb68e7b631", "bytes": 15247}, + "atlassian-design": {"name": "Atlassian Design", "category": "Design Systems", "description": "The Atlassian Design System site: Atlassian Sans (an Inter derivative) on white with ink #292a2e, one brand blue #1868db (hover #1558bc), a #f8f8f8 sunken band, 112px/700 hero type, 6px-radius 32px buttons and 40px text fields, pill secondary buttons, and playful illustration tiles over strictly token-driven (--ds-*) chrome.", "sha256": "0a26d70d9c8cbbaa26fa3bfa0ae3d50f922c8155c9d76b3d23e7bce37c6f4ee7", "bytes": 21450}, + "attio": {"name": "Attio", "category": "Product & SaaS", "description": "Attio's CRM site is a near-white #ffffff / #fafafb product canvas in Inter and Inter Display (500 weight, tight -0.01em tracking), near-black #1c1d1f headlines with grey #6f7988 continuations, 10px-radius charcoal #202124 buttons with a #505967 border, layered hairline shadows and a dark #101010 'Universal Context' band and footer.", "sha256": "c9988d797e86ce8042e18c3e3e5fbe90196dbcee507b56b8d20c6ddaedc1e549", "bytes": 16449}, + "audemars-piguet": {"name": "Audemars Piguet", "category": "Luxury", "description": "Audemars Piguet's homepage is a black-canvas (#000000) cinematic site: Helvetica Neue Web at weight 100 uppercase 56px for display, white ink, a deep green accent #2b4f4f, square 0px buttons and italic serif Times Now accents over full-bleed watch and jewellery photography.", "sha256": "3636b8dce99a90bfeed42f60dfcfccc73af7751cce3a7d43c6c39ed9271b5387", "bytes": 10361}, + "audi": {"name": "Audi (audi.com corporate site)", "category": "Automotive", "description": "Audi's corporate site audi.com/en measured live — a near-black #101319 dark theme with #020203 header and footer, translucent off-white text #fcfcfdb2 and #fcfcfd, slate-grey #657081 pill buttons (999px) that darken to #2c343f on hover, 10px media corners and 20px outlined tiles, all set in the variable Audi Type at a single 400 weight from 36px down to 12px.", "sha256": "da76f4486a50b31eee3564b71fb6c3bb31f5d8546c5a62f006273d65d7e356b0", "bytes": 14933}, + "audible": {"name": "Audible", "category": "Music & Audio", "description": "Audible's US storefront (audible.com): a near-black #000000 content field with white Audible Sans headlines at 700 weight, #ffb333 and #ffa000 pill buttons carrying #010e19 text, pale-blue #a3d4ff title links on dark, a white #ffffff header and footer, and floating rounded book-cover art as the only imagery.", "sha256": "84549ea299d6f4f485c85651742ad2f92ec7e8c62aceca997c25f7d9022d68c9", "bytes": 14210}, + "australia-gov-au": {"name": "myGov", "category": "Government & Nonprofit", "description": "myGov (my.gov.au), the Australian Government portal that australia.gov.au permanently redirects to: Roboto with a 62px weight-300 headline, a #66d3ee brand-blue header band, black #000000 buttons with 4px corners, white cards with a 1px #d9d9d6 border and a 6px soft shadow, and a full-width black footer.", "sha256": "c56e2b27ffe67b1d324e44066067450b2cd66e76abd07fbadb9607c66f4027c3", "bytes": 13237}, + "auth0": {"name": "Auth0", "category": "Developer Tools & IDEs", "description": "Auth0's marketing site: light-weight Aeonik 400 display at 64px/72px with -1px tracking on a deep violet #20003a canvas, a red-to-purple gradient hero, white #ffffff buttons with black text and a 4px radius, Aeonik Mono labels with 1.5px tracking, #120021 header and footer with lavender #ebd3ff uppercase footer headings.", "sha256": "c4dc2cbd51c6be7cfebca96fca05e11bdefc4d6d6e8d8eeea6ade3f125f670bf", "bytes": 12901}, + "autoguru": {"name": "AutoGuru", "category": "Design Systems", "description": "AutoGuru, the Australian online car-servicing marketplace: AvertaStandard at bold 700 (80px display, 16px body), one mint-green action color #01c68c on 8px-radius buttons, navy-slate ink #212338 and #484c5f, a white canvas washed with pale mint #dbfaf0 shapes, and 24px-radius cards. Built on AutoGuru's open Overdrive design system.", "sha256": "7c2fab05acd208f052b3d1f7d9a43337df8e604386d6302b0c5d4243c15e8e99", "bytes": 13213}, + "automattic": {"name": "Automattic", "category": "Design Systems", "description": "Automattic's homepage is an editorial text page: Source Serif Pro in 400-700 on a white canvas (#ffffff), near-black ink (#222222) and black headlines (60px, weight 600, -1.2px tracking), with one accent, link blue (#3399cc), used for product names and links across a three-column list of products.", "sha256": "40c7ee73b12281c23e22e9896fcc18ac5659accfb778e49ffd262270c84f836e", "bytes": 10283}, + "ava-srg": {"name": "AVA SRG", "category": "Portfolio", "description": "AVA SRG, the 3.5-month web-design course by the AVA Digital studio: a warm-grey #dad9d3 / #e9e8e2 / #323232 three-surface page, giant uppercase Aeonik Pro Bold section titles at 76.7949px, IBM Plex Mono uppercase labels at 11.2614px, #211d1d ink, and a single red #d4202c that appears on hover.", "sha256": "c64703d700fed77815da46d632fa5998fe8669bfbee2b959a4a9785b473668cc", "bytes": 14799}, + "avani": {"name": "Avani Hotels & Resorts", "category": "Thai Brands", "description": "Avani Hotels & Resorts (avanihotels.com), the Minor Hotels brand: deep aubergine #350827 header, footer and buttons over pale #f1eff0 and #f7f6f3 surfaces, Gilroy at weight 100 for a 50px destination headline, letter-spaced Capitolium capitals for 2px-radius buttons, and full-bleed lifestyle photography.", "sha256": "c43b9d3c408c35119887dd797740a7df25788efa0bb66c7098323461aea163c3", "bytes": 13177}, + "avatr-vision-xpectra": {"name": "AVATR Vision Xpectra", "category": "Tech & AI", "description": "AVATR Vision Xpectra (vision.avatr.com), the concept-car microsite 'The Rise of Emotive Luxury': a black #010101 preloader and film hero that opens onto white #ffffff and deep-navy #001133 feature sections, one custom light-weight face named base at 300 and 400, 12px captions, 28px card titles, and 3.78px-radius black and outlined buttons.", "sha256": "0fa4a7cbe6e5c5f124f75188a12da6cd83bad70bdd7fd7557235bb4d4d06a8d2", "bytes": 12129}, + "avax-network-1": {"name": "Avalanche", "category": "Tech & AI", "description": "Avalanche (avalanche.com, where avax.network now redirects): a #1d1d1d and #0a0a0a charcoal site with a heavy #e22b35 red, Aeonik at weight 900 in uppercase from 109.658px hero type down to 15.712px card heads, square 48px red buttons, 20.57px-radius panels, and a #c6cccd body ink.", "sha256": "e31a37fbefd14a4a0b59971a884c611ea80c50c9c9dc70fef13433b63f2efdb2", "bytes": 15247}, + "aventura-dental-arts": {"name": "Aventura Dental Arts", "category": "Product & SaaS", "description": "Aventura Dental Arts (ADA), a premium esthetic dental practice in South Florida: a #eae8e8 warm-grey and #14151d navy split palette, Instrument Serif headlines at 136px with -4.08036px tracking and an italic accent, Inter Tight body at weight 600 and 700 buttons, and pill-shaped Book A Call buttons.", "sha256": "5b9fb66c51365cacb4936f03b8d2a0a9bcf92b104f2ab53987c4b44bb76a333f", "bytes": 14281}, + "aws-amplify": {"name": "AWS Amplify", "category": "Design Systems", "description": "The AWS Amplify product page sits inside the AWS marketing shell: Amazon Ember Display at weight 500, a dark navy utility bar, a white header, #161d26 pill buttons (40px radius, 44px tall) beside outlined twins, a lilac-to-pink gradient hero, and soft #f3f3f7 cards at 24px radius. Amplify UI, its React library, uses Inter and 4px teal buttons instead.", "sha256": "5acff8400f7f2a19518510aed8ad1262c078daed720a5b58ba45fc9688c5596a", "bytes": 12373}, + "awwwards": {"name": "Awwwards", "category": "Agencies & Studios", "description": "Awwwards' gallery-like, near-monochrome system — Inter Tight everywhere (600 for uppercase 112.31px display, 300 for 14px/28px body), #222222 ink and buttons on a #f8f8f8 canvas, 8px button radius, 14px card radius, a floating dark #222222cc dock, and a single #fa5d29 orange reserved for Academy offers and errors.", "sha256": "ce296a32c165f15a994b99ece8fd4ee4722dae7bea1a3415a7f113c25fef0531", "bytes": 32579}, + "axa": {"name": "AXA", "category": "Banking & Insurance", "description": "AXA's corporate website (axa.com): white #ffffff pages with #343c3d text and AXA blue #00008f navigation, Publico-Headline bold serif headlines at 48px over Source Sans Pro, square #f07662 coral READ MORE buttons, and full-bleed blue #4975ba, navy #274168 and gold #8a7333 content bands.", "sha256": "0457fc775aeff1a6ad1abcb80e6548d61c452dd7b753ee943db0a71364c16ec6", "bytes": 13568}, + "axiom": {"name": "Axiom", "category": "Backend, Database & DevOps", "description": "Axiom's site is a near-black (#090909) observability page set in Geist with Berkeley Mono for data: Geist 64px/64px weight 500 headlines at -0.96px, 63%-white #ffffffa1 body text, an orange #da5c2b 'Start free' button at 6.08px radius, #1f1f1f-outlined secondary buttons, and #0c0c0c product panels with #222222 borders.", "sha256": "f5a90d770c0a5ad4dc5423f847cf2978616c998f6a2195d0d4f472acf8cc8e66", "bytes": 12451}, + "axios": {"name": "Axios", "category": "News & Publishing", "description": "Axios is a white #ffffff / #f5f5f5 news site with #333335 ink: NB International Pro 400 sans headlines (40px/48px story heds, 26px hero, 48px article h1) over Atiza 18px/27px serif body with bold 600 'Why it matters:' lead-ins, a #1c3b7a navy top bar and footer, #104ac2 blue pill buttons that hover to #0b3997, 100px-radius pastel topic chips (#e1edfb, #e3f5fa, #edf6f2, #faf7f2) and 4px-radius #f5f5f5 tags.", "sha256": "9a5aac987b9ad84e2c27436ecf67143c2fc99514e62c98d3e3406d47ddcaee34", "bytes": 24545}, + "axis-bank": {"name": "Axis Bank", "category": "Design Systems", "description": "Axis Bank retail portal: deep burgundy #97144d on white and #f1f4f7, set in Lato (40px/54.4px headlines, 16px/24px body), 8px buttons, 12px cards with a wide soft shadow, and an italic burgundy open-to device repeated across rounded gradient sections.", "sha256": "c8a46530d6d9510b3523f43e2dae558e000d2b0e7f653d8f72d95e16ec170665", "bytes": 10509}, + "b-grimm-power": {"name": "B.Grimm Power", "category": "Thai Brands", "description": "B.Grimm Power Public Company Limited English homepage (bgrimmpower.com/en/home): white canvas, Open Sans at 16px body and 80px weight-300 uppercase hero headline, #404040 text, orange #ff6727 brand accent with a 2px #ed713c header rule, outlined 4px-radius white buttons over dark photography and a #fafafa footer.", "sha256": "974bca11414c6980d4fe2ac3055f21e3b87a50708072e953cdff27adfc96046a", "bytes": 9859}, + "b2s": {"name": "B2S", "category": "Thai Brands", "description": "B2S Online (b2s.co.th), the Thai bookstore and stationery e-commerce site of Central Retail: dense white pages on a #ebf1f4 backdrop, Kanit at 12px with #2c2d4e navy-ink text, red #ff0000 ซื้อเลย buy buttons with 4px corners and 20px red prices, orange #f5822b links, and an olive #a6aa12 footer band.", "sha256": "64a6b3aee9c2965698297290604ead2b085839cf36d95d306035d71b07268441", "bytes": 13897}, + "baac": {"name": "BAAC", "category": "Thai Brands", "description": "The English homepage of BAAC, Thailand's Bank for Agriculture and Agricultural Cooperatives: sage #e8e7dd bands, a #26770e farm-green header and pill buttons with #fdffe5 text, futura-100-thai headlines at 700 weight (64px hero, 48px titles), #043026 forest footer with 40px top corners, and full-bleed farmland photography.", "sha256": "2084676c1bfe50cf231b3687b0c5dca460686669a71842138e33d27ae3ecf77e", "bytes": 14310}, + "babbel": {"name": "Babbel", "category": "Education", "description": "Babbel's language-learning home: warm cream #f6f4ef canvas, Babbel orange #fe4d01 Sign up pills and promo bands, sunshine #ffd966 sections, near-black #151515 text and pills, Feature Text LC serif headings at 32px over Graphik Babbel LCG body at 14px/20px, 4000px pills and 4px/12px/16px corners.", "sha256": "6e28f12044d1ca40f54c05a27414111dfd66e00fc88b6abd2693c452d35979d2", "bytes": 12654}, + "baidu": {"name": "Baidu", "category": "AI", "description": "Baidu's search homepage (baidu.com): a single white #ffffff screen with the red and blue Baidu logo, a wide rounded search box with a blue-to-violet 百度一下 button, #4e6ef2 login pill, #222222 Arial links at 13px, PingFang SC 16px AI banner, and a two-column hot-search list with red, orange and yellow rank numerals.", "sha256": "740983a1b3ed48b2e9cbc470e99befd259180c168b7be2e83abc011a703f4b58", "bytes": 12406}, + "balance-4": {"name": "Balance", "category": "Agencies & Studios", "description": "Balance is a one-person portfolio template site (demo persona John Taylor, Digital Designer) built as a monochrome editorial page — a #fcfcfc canvas, #141414 ink, one pill button, a 184.32px uppercase Inter hero name and Inter Tight 700 statement text, with grey #9d9d9d fine print.", "sha256": "3188a46fcb81cbbc8edd16e0f2647830cad74610c92fb29e1809d4a17c05e7c3", "bytes": 15436}, + "balenciaga": {"name": "Balenciaga", "category": "Luxury", "description": "Balenciaga US online boutique (balenciaga.com/en-us): white #ffffff canvas, pure black #000000 type, a warm off-white #f6f5f3 'Discover the House' band and a flat grey #aaaaac footer. BB-CondBold uppercase headings at 22px with 1.1px tracking over BB-Regular 10–14px text; small 4px-radius outlined nav pills, 2px corners elsewhere, no shadows.", "sha256": "3a53b494329b542f234785e3b0e5c58db942b3ed0e3415b2c3c23d5f90b6bf2b", "bytes": 10547}, + "balmoral": {"name": "Balmoral Running", "category": "Fashion & Apparel", "description": "Balmoral Running is a Canadian running-apparel store built on a Shopify theme: a #ffffff canvas, #171614 ink, pale #eaeaec product tiles and black hero bands, ABCArizonaMix serif display at 40px over FTKunstGrotesk sans body at 15px, all corners square, no brand accent hue.", "sha256": "46d962fbe4e3389019d03332451b7448dc20754ed4a5c3ea3b946a0dbe95cf23", "bytes": 15016}, + "bam": {"name": "Bangkok Commercial Asset Management (BAM)", "category": "Thai Brands", "description": "Thai debt-restructuring and repossessed-property site in IBM Plex Sans Thai: deep navy #044b80 bands, gold #edd311 buttons with #092c45 text at 8px radius, #444444 body ink, #f5f5f7 light sections, 32px-radius cards.", "sha256": "7c74d50d2006685b62edd621ee6c1af8fa2a3018b6abfc8e372d5991fb73fd0c", "bytes": 11810}, + "banana-it": {"name": "BaNANA (Banana IT)", "category": "Thai Brands", "description": "BaNANA (bnn.in.th), Com7's Thai IT and gadget retailer: a dense promo-driven storefront on #ffffff with #f8f8f8 header strip, banana-yellow #ffdd00 CTAs and search accents, #252525 ink, red #f1574f prices, SukhumvitSet type at 12 to 16px, 4px buttons and 8px product cards.", "sha256": "78e22443ab602ccaa7a903f638f4920f860e2bdc8e8e85cb295c993a3c57c1a6", "bytes": 14970}, + "banana-republic": {"name": "Banana Republic", "category": "Fashion & Apparel", "description": "Banana Republic's US storefront (Gap Inc.): a quiet editorial retail site on #ffffff and #f2f1ee with #000000 ink, BananaSerif light 42.6667px headlines over photography, Lynstone v1 uppercase 12px navigation, square white 56px buttons, no accent hue and no radius.", "sha256": "3a39a188dbd3f9f24d3e46ed82038016eab97a1b4e5f5e1f69d8034719560464", "bytes": 15044}, + "bandai-namco": {"name": "Bandai Namco Entertainment America", "category": "Gaming", "description": "Bandai Namco's Americas game-publisher site (bandainamcoent.com): a black header, hero and footer around white content bands, source-sans-pro at 60px/700 headlines and 16px body, white 40px pill buttons with 30px radius that turn #f6b700 on hover, and key-art tiles.", "sha256": "3f2665de69175399295951f9747eb09c10fcd72dd03747e17d15d40ce9ea098b", "bytes": 15056}, + "bandb-italia": {"name": "B&B Italia", "category": "Home & Furniture", "description": "B&B Italia's US site (bebitalia.com/en-us), an Italian luxury-furniture brand: a cool #f3f5f5 canvas, #505759 slate ink, one brick-red #b83c3c rectangular button at 50px high, Helvetica Neue LT in tracked 12px and 14px capitals, a translucent #000000cc header and full-bleed room photography.", "sha256": "6702f104f2d941a554cb32e402a42de622f63b8514b85041284747a3a8556400", "bytes": 14651}, + "bandcamp": {"name": "Bandcamp", "category": "Music & Audio", "description": "Bandcamp (bandcamp.com): a pale blue-grey #ecf3f4 canvas with #222222 text set in the system's Helvetica Neue (Arial fallback) — 32px/500 headline, 16px/24px body, dense 12px catalog text. Actions are near-black #222222 buttons with white labels and a 4px radius; genre pills are #333333 with a 16px radius; the logo blue is #0cacd7. Dark #222222 bands and a #333333 footer break the light page.", "sha256": "34e10ecd62ba7d689dfba77165007b5be3e14412a4c9b858fb7cd965682cdd68", "bytes": 18624}, + "bang-olufsen": {"name": "Bang & Olufsen", "category": "Consumer Electronics", "description": "Bang & Olufsen's US storefront is a gallery-quiet system set in one self-hosted custom face, BeoSupreme (with Lexend Deca as the declared fallback), at weight 400 for every headline and 500 only for buttons: 24px/36px hero titles, 48px/64px page titles with -0.5px tracking, 16px/26px body with 0.2px tracking and 12px/20px product labels. Warm near-black #191817 ink and buttons on a #ffffff canvas, cream #fcfaee button text, #fafafa square product tiles, 40px-radius 44px-tall pill buttons, and a full-bleed ultramarine #060daa footer.", "sha256": "a8cdf6c3bb70e4a197af4097d01ca0e7ef46df5d43ec562e15d449e9d6d9a792", "bytes": 27039}, + "bangchak": {"name": "Bangchak Corporation", "category": "Thai Brands", "description": "Bangchak Corporation (bangchak.co.th/en), a Thai energy group: a white page with BCP black #2d2926 ink, green #3aa537 to lime #91bd27 gradient pill links with 30px radius, DB Ozone X at 65px light hero titles and 700-weight 22 to 36px text, dark photographic heroes and translucent stat cards.", "sha256": "3d2a95b7dd7cc23f37e1bbed15db3f9a68b8d26258895218a480e09f8bfffca1", "bytes": 14614}, + "bangchak-green": {"name": "Bangchak Sriracha", "category": "Thai Brands", "description": "Bangchak Sriracha (BSRC, bsrc.co.th), a Thai petroleum refiner and fuel marketer, uses a white canvas #ffffff, black ink #000000 and brand green #48a23f with a #84bd00 hover, a #131313 footer and red #ed1c24 eyebrows, set in DB Ozone X from 22px body to 100px statistics, with 4px buttons and leaf-shaped imagery.", "sha256": "1e4a0ccff93be03397ee1448086f6a6592a2987e67e84cee727b75a80dd68839", "bytes": 11227}, + "bangkok-aviation-fuel-services-pcl": {"name": "Bangkok Aviation Fuel Services (BAFS)", "category": "Thai Brands", "description": "Bangkok Aviation Fuel Services (bafsthai.com), Thailand's aviation refuelling operator: a navy #1a4683 and white corporate site with Urbanist headlines (a 440px uppercase BAFS masked-photo wordmark, 60px light titles), Roboto and Sarabun body text, 24px-radius navy pill buttons and pale #f3f8fd bands.", "sha256": "90307f9217e517baf1b6b80201b236db0b3777a80b8cc12a527292d32e635765", "bytes": 14163}, + "bangkok-bank": {"name": "Bangkok Bank", "category": "Thai Brands", "description": "Bangkok Bank's personal-banking site sets a full-bleed lifestyle photo hero with an 89.6px BangkokBank-Medium headline over a white canvas, uses one electric blue #0064ff (hover #0048b7) for 7px-radius buttons and links, deep navy #002850 for the footer and #233a58 for the currency converter, grey #4e4e4e body ink, 16px-radius light-blue #4890ff tag pills, and the self-hosted BangkokBank / BangkokBank_Text families (files named BBLSans).", "sha256": "8cd51cd7a3584e77db8231d71a5033277858292f8a95a0f1b6b6de067d8b1a44", "bytes": 23978}, + "bangkok-dock-company": {"name": "Bangkok Dock Company", "category": "Thai Brands", "description": "Bangkok Dock Company (1957) Limited, a Thai state-owned shipyard (bangkokdock.co.th): a WordPress site with a #334155 slate top bar, #1d4384 navy navigation, IBM Plex Sans Thai Looped body text, plus a Kanit tribute entry splash with a #111111 outlined pill button and 18px type.", "sha256": "ccc3fcddb37f981bcbf354e75243bf1f436233b95d2dc856ab416045e700d287", "bytes": 15987}, + "bangkok-health-insurance": {"name": "Bangkok Health Insurance (BHI)", "category": "Thai Brands", "description": "Bangkok Health Insurance (BHI) site at bhi.bdms.co.th: white canvas, Sarabun type, #3a6fba blue 4px-radius buttons, a #1b0692ce indigo navigation bar, #333333 ink and soft 12px cards with a 0 4px 15px shadow.", "sha256": "7ee1de8bac3244ee14502e6279abec2ebb4b7a996109ee6f89adcca499b955c3", "bytes": 13590}, + "bangkok-hospital": {"name": "Bangkok Hospital", "category": "Thai Brands", "description": "Bangkok Hospital (bangkokhospital.com/en), Thailand's private hospital network: a #fbfbfc and white page with navy #002d73 headings and icons, #363636 body text, Figtree 700 at 33.6px for section titles, satoshi sans for UI, 12 to 16px soft-radius cards, pill chips and red #b21e28 price and buy accents.", "sha256": "9cfbc496408b577240d36b2548aaba744fc5787bf359f119d341239a29162fd8", "bytes": 16709}, + "bangkok-insurance": {"name": "Bangkok Insurance", "category": "Thai Brands", "description": "Bangkok Insurance (bangkokinsurance.com, กรุงเทพประกันภัย), a Thai non-life insurer: a Bootstrap 3 site on a #f2fafd pale-blue page with navy #063868 navigation, bands and text, DB Helvethaica X Thai type at 19.6px, white promo cards, square-cornered outlined buttons and colorful circular product icons.", "sha256": "6c1326072aa081ecfc54c63f92ce4cf93e34380fa287b445741c3fdb2aea4f17", "bytes": 14027}, + "bangkok-land": {"name": "Bangkok Land", "category": "Thai Brands", "description": "Bangkok Land Public Company Limited (bangkokland.co.th, measured at /th/): Sukhumvitreg Thai type at 38px headings with 0.8px tracking and 18px body, navy #192346 buttons and footer with white text, #0d1b42 headings, a #cabb9a sand hover accent, pale #f9f9f9 and #f3f3f3 bands, 10px-radius buttons and soft 4px 10px shadows on cards.", "sha256": "9c24404bcd357f3def48d99495b53cb5ed65c105a94e2a1b2fe06cf0a26e63d9", "bytes": 10565}, + "bangkok-life": {"name": "Bangkok Life Assurance", "category": "Thai Brands", "description": "Bangkok Life Assurance (กรุงเทพประกันชีวิต) Thai homepage: white canvas, DB Ozone X typeface at 19px body and 30px display, bright cyan #28b2ee action buttons, deep blue #0057a8 headings with #004a8e secondary buttons, #eaf4fa tint, and 2px-radius controls.", "sha256": "70f97f1b3105daccf0a5cd9f53752528d381592e3fa41f07d9ee76a735db240e", "bytes": 10208}, + "bangkok-post": {"name": "Bangkok Post", "category": "Thai Brands", "description": "Bangkok Post (bangkokpost.com), Thailand's English-language newspaper: a Bootstrap-based news home page with a #050d81 navy masthead and footer, Charis SIL serif headlines in bold 30px and 24px, #0054c6 blue pill tabs and chips, 10px-radius thumbnails, and black rules under uppercase section titles.", "sha256": "90c2ff2fa318aa5311b7c27298427a9714e2cde3542e8dee92f359d4d5005a16", "bytes": 15318}, + "bangkok-university": {"name": "Bangkok University", "category": "Thai Brands", "description": "Bangkok University's English site (bu.ac.th/en) is a dark, photo-led university home page: near-black #1d1e20 canvas, off-white #f8f8f8 text, Noto Sans Thai at 48px/700 for headings, Karnvayla for buttons, and a pale #dfe1e3 pill 'Apply Now' button with a 22px radius, accented by orange #e56436, amber #fab751 and green #00a960.", "sha256": "6b21529cd5ddeec51fe6de2b1ccf01a3af974454db529e6f83b17989265e7790", "bytes": 16945}, + "bangmod-enterprise": {"name": "Bangmod Enterprise (Bangmod.Cloud)", "category": "Thai Brands", "description": "Bangmod.Cloud, the cloud and hosting brand of Bangmod Enterprise Co., Ltd. (bangmod.cloud): a Thai-language hosting storefront set in the custom Bangmod DB face, with an electric-blue #182eb8 hero, deep navy #000147 bands, white content sections, an amber #ffb000 call-to-action with 3px corners, and a white domain-search card.", "sha256": "a57df664b5584d5e3829845b62e38cadf46183700e76a25d0840d93d3a38abc6", "bytes": 16662}, + "bank-of-america": {"name": "Bank of America", "category": "Banking & Insurance", "description": "Bank of America's consumer home page (bankofamerica.com): white and #f5f5f5 grey bands, a deep navy #012169 with pill-shaped 22px-radius buttons, red #e31837 and #a50e28 accents, a bright blue offers hero, the cnx display family for headings and Roboto for body and buttons.", "sha256": "61a66c9b4a54d132815a3df35438bfcc58f37ec622d1e2c78a33070522939ea3", "bytes": 14438}, + "bank-of-china-thai": {"name": "Bank of China (Thai)", "category": "Thai Brands", "description": "Bank of China (Thai) Public Company Limited homepage at bankofchina.co.th: white canvas with Helvetica Neue at 13.5px dense body and 16.5px bold headings, #333333 ink, Bank of China red #b6002a with #990000 headings and #d00024 card rules, pale blue-grey #d2dadd menu bands, and square corners.", "sha256": "957d31ba01ccd72efe340ea66f32647eff06a864bf8dfa56bc63e486d42f48fc", "bytes": 9225}, + "banluesarn": {"name": "Banlue Group", "category": "Thai Brands", "description": "Banlue Group (banluegroup.com), the Thai publishing and content group behind Banluesarn: a white and #f7f7f7 page with a hazy full-bleed hero, extra-light Ostrich Sans headings at 64px with 8px letter-spacing, widely tracked Roboto Condensed labels, grey #777777 Roboto body text and a taupe #9f8b7f theme accent.", "sha256": "4ee8350de3165117dad5d138eb17c010881733ce6368fabe7f78ed410024f2b0", "bytes": 12874}, + "banpu-power": {"name": "Banpu Power", "category": "Thai Brands", "description": "Banpu Power Public Company Limited corporate site (banpupower.com): light-gray #f5f4f5 page, left sidebar navigation in teal #00b49c, HCo Gotham SSm at 11px to 13px, outlined 25px-radius teal pills, white news cards with soft 3px 6px shadows over photographic hero banners.", "sha256": "77da4be7fcf8e1a01d64df85714cd370bfa5fbebed881b6e052411d89cca0867", "bytes": 10947}, + "barclays": {"name": "Barclays", "category": "Banking & Insurance", "description": "The Barclays Group corporate site (home.barclays): a white and #f6f6f6 editorial layout in the proprietary Barclays Effra face with tight negative tracking on 48px and 32px headings, 99px-radius pill buttons filled with action blue #006de3, a deep navy #1a2142 hero panel and cards outlined with a 2px #e2e2e2 border.", "sha256": "cb6150737aa0075eb6bd1c221e8acfcf194e708fa363148b215137d6d09e0887", "bytes": 13100}, + "barrys": {"name": "Barry's", "category": "Sports & Fitness", "description": "Barry's (barrys.com), the boutique HIIT fitness brand: an immersive dark red-black video hero over a #f7f7f7 page, uppercase Antenna headlines at 48px/700, Benton Sans Pro body at 14px, pill buttons with a 40px radius in #111111 and white, and the brand red #d6001a reserved for labels, chips and the word LIFT.", "sha256": "abaa5ba040ddd43c5a5622ef540626c1dbb4a30347cf8bb71eb25499c1a7a248", "bytes": 14076}, + "base-ui": {"name": "Base UI", "category": "Design Systems", "description": "Base UI documentation home: an unstyled React component library presented on a near-white canvas (#fcfcfc) in near-black ink (#2e2e2e) with muted gray (#767676), set in the \"die grotesk\" families at a single 400 weight (42px headline, 18px body), 8px radii, hairline-ruled lists and no filled buttons or brand color.", "sha256": "ff130fc2b87f36c72a91df2ac9e4f2ee78a7c94ce1a15d030e15a35a0daad42b", "bytes": 10972}, + "base-web": {"name": "Base Web", "category": "Design Systems", "description": "Base Web is Uber's open-source React design system; its docs site is strictly monochrome: black #000000 ink and 48px black primary buttons with 8px radius on white, #f3f3f3 hairlines, UberMove 700 headings (28px/24px) over UberMoveText 16px/24px body, with accent blue #276ef1 and negative red #de1135 reserved for state.", "sha256": "a5c6e233a927c0813e7670895ce50620a21f1158c8b86720902e72eca4867ce5", "bytes": 19058}, + "basecamp": {"name": "Basecamp", "category": "Productivity & SaaS", "description": "Basecamp's home page by 37signals: white #ffffff and warm #fff9f5 canvas, slate ink #29353c, square-cornered #117af3 blue buttons (hover #0067de), #146dc7 underlined links, Graphik 800 headlines at 37.45px with tight tracking over Graphik 400 body at 17px, fluid percentage-based type, and soft layered card shadows.", "sha256": "0c70e77d8918f8bcb004911c4a41253dc3d6f0e9937fb173d87783f52057d22c", "bytes": 14752}, + "bayer": {"name": "Bayer", "category": "Pharma", "description": "Bayer Global corporate site: Bayer Sans 400/500/700 throughout, 72px bold white headlines on #0f172b deep navy sections, #10384f dark-blue ink on #ffffff, square white 48px uppercase CTAs tracked 0.42px, #f1f5f9 elevated surfaces, #0075a6 link hover, Bayer bright blue #00bcff and green #66b512 accents and a pill-shaped floating navigation bar.", "sha256": "5d63dfcb7adbd40a9daa8ebe3b3ffd0c5d78273ae254bc5e53b012f6f0e983dc", "bytes": 14251}, + "bbc": {"name": "BBC", "category": "News & Publishing", "description": "BBC.com news front: a white #ffffff page with #202224 ink, headlines and summaries set in the BBC's own BBC Reith Serif (28px/32px weight 500 lead headline with -0.56px tracking, 14px/18px summaries) and navigation, labels and buttons in BBC Reith Sans; square 0px corners everywhere, a solid black #000000 Register button that hovers to #3a3c3e, #e6e8ea nav-hover tiles, #545658 meta text and a #141618 dark video band.", "sha256": "f0999bbafaa35c0c8e3ed751ccb4b02b230605efa44cfe9d3766faa2acf51af8", "bytes": 26361}, + "bbdo": {"name": "BBDO", "category": "Agencies & Studios", "description": "BBDO's agency site (bbdo.com): a loud pure red #ff0000 canvas with off-white #fafafa text, oversized 137px Outfit headlines at weight 600, a near-black #161616 work gallery with #212121 cards, outlined 51px-radius pill buttons and a video-led full-bleed hero.", "sha256": "ff6647922fe561c42d49f0400c44ca7aca99439e26d9c11d9ed30e9a9b0855c0", "bytes": 11300}, + "bbtv-channel-7": {"name": "CH7ON (BBTV Channel 7)", "category": "Thai Brands", "description": "CH7ON, the online TV home of BBTV Channel 7 / Channel 7HD (ch7.com/en): a white streaming portal in Sukhumvit Set with #101828 text, brand-rose red #b12420 links and a Download pill, 12px-radius cards with soft rose borders, horizontal content rails and a dark-red Top 10 band.", "sha256": "01ca0978190838ceaa2ef725737e20d3c8a91c8645fd1975c1f6597878b547de", "bytes": 14497}, + "bcg": {"name": "Boston Consulting Group", "category": "Business & Corporate", "description": "BCG (bcg.com) pairs light-weight henderson-bcg-serif headlines in deep green #0c2b15 with henderson-bcg-sans text in #212427 on white, mint #e3fddb and warm #f1eeea bands, signature lime #96f878 15px-radius uppercase CTA buttons, 20px-radius translucent cards and full-bleed deep-green panels.", "sha256": "4c47aad14567807e42a3a93a1d99f5bc6a4fe1b5c713a0d4407b9fcf6c442980", "bytes": 14866}, + "bcpg": {"name": "BCPG", "category": "Thai Brands", "description": "BCPG Public Company Limited English homepage (bcpggroup.com/en/home): DB Ozone X typeface with 90px bold uppercase hero headlines and 22px body, a white canvas, orange #ea7600 and green #48a23f accents with teal #00b2a9 and lime #84bd00, a #2d2926 footer, and 50px-radius ghost pill buttons over photography.", "sha256": "58bd72f138d6d6143b32a87f4789caefb1fd1e65bf4a620e584414bd3821c7b1", "bytes": 9996}, + "beam-checkout": {"name": "Beam", "category": "Thai Brands", "description": "Beam payments site at beamcheckout.com: Stolzl 80px headlines with italic serif accents, #265bea buttons (hover #1d46d7) on a navy and #101010 dark hero, white sections, 16px-radius cards with 1px #ffffff1a borders and Inter 600 labels.", "sha256": "c7bd69a784e97a90a34a56d3350c7ee1e5e5cf51ee93754f7e919eb083037861", "bytes": 10258}, + "bear": {"name": "Bear", "category": "Productivity & SaaS", "description": "Bear's bear.app is a light, illustrated note-app site: bearsansheadline 51.2px/400 headlines and bearsans 16px/25.6px body in #444444 on white, a single red accent #dd4c4f (--accent-color), section titles in blue #456aa3, green #2b6451 and purple #884aa8 over soft colour blobs, and white 16px-radius cards with a rgba(0, 0, 0, 0.12) 0px 13px 34px shadow.", "sha256": "1a5d60253ece737c784561bd505570105828520a44e4d8853c39f0ca8799c4bc", "bytes": 11125}, + "beartai": {"name": "Beartai", "category": "Thai Brands", "description": "Beartai (BT, บีที แบไต๋), Thai tech and lifestyle media: midnight navy #050b1b canvas, electric cyan #14e7ff headings and outlined See All pills, white Contact pill, GraphikTH and Gotham type, 15px translucent cards and video-thumbnail-led layouts.", "sha256": "e2e11548bd6c093a4cc846bb8e1d841ba1c5062e26ae6ab67f2a3f14cd9c3868", "bytes": 11065}, + "beats-by-dre": {"name": "Beats by Dre", "category": "Music & Audio", "description": "Beats by Dre (beatsbydre.com): a clean white and #f0f0f0 retail layout in Neuzeit Grotesk with -1px tracking on 70.769px display type, full-bleed celebrity photography, white pill buttons in Alternate Gothic with a 30px radius, rounded 18px product cards and red #e31837 price and offer labels.", "sha256": "38d9534c0b50f557c676fd00a03c22539eb3ec05b5e7b506dc3a565d492ef845", "bytes": 15217}, + "becane-paris": {"name": "Bécane Paris", "category": "Fashion & Apparel", "description": "Bécane Paris (becaneparis.com), a women's apparel label: an off-white #f6f6f6 canvas with near-black #0a0a0a type in the wide custom face Eurostile Becane, tiny 8px uppercase labels in 3px-radius white bars floating at the page edges, a 30px uppercase manifesto and a row of cut-out product figures.", "sha256": "2a2b032d4a744a1f3db768ba3ae438bf8311a2a2c0f5bb2793bf981313a59850", "bytes": 11189}, + "beehiiv": {"name": "beehiiv", "category": "Product & SaaS", "description": "beehiiv's newsletter-platform site: an inky #060419 canvas, white uppercase Clash Grotesk 60px/700 headlines, Satoshi 20px body copy in #f7f5ff and #d9dbdf, cobalt #2f39ba square-cornered sign-up buttons, a white 6px-radius header pill, hot-pink #ff5ec4 links and pink #f092dd product panels.", "sha256": "1bfcd7d039695d8070be5a85d927baeb11887de9a52b829b494b8bd44d8767ce", "bytes": 12847}, + "beings": {"name": "Beings", "category": "Culture & Events", "description": "Beings (beings.co), the Aotearoa New Zealand directory of POC, Rainbow and Disabled talent: a white page with deep brown #1b0800 type, an oversized BEINGS wordmark, square-cornered photography, the Die Grotesk and Bonto faces at weight 400, and a skin-tone palette running from #fff4ec to #3d1801 with peach #f6c9a1 as the accent.", "sha256": "698f5c2248e8d990468c93b8b91d9c08f8451a57b0746e4be2783298ac997eb9", "bytes": 12307}, + "bell-canada": {"name": "Bell Canada", "category": "Telecom", "description": "Bell Canada's consumer site (bell.ca): a warm off-white #f9f8f6 and white page with Bell blue #0070ce pill buttons, deep navy #003778 footer, a #00549a header, Satoshi variable text at weights 450 and 550, the BellSlimRev Heavy display face with -1.5px tracking, and white 10px-radius offer cards outlined in #eeece5.", "sha256": "7e7391d0156e02d3b21205cfaf01537c8b99c8f75eefda3a1d77077143edbf83", "bytes": 14621}, + "bem": {"name": "Bangkok Expressway and Metro (BEM)", "category": "Thai Brands", "description": "Corporate transit-operator site for BEM, set entirely in two self-hosted Thai-capable faces, KitithadaRegular and KitithadaBold, at oversized pixel sizes (30px subheadings, 26px body) on a #f7f7f7 canvas with white cards, #666666 text and a single #0e4285 navy action color, square 0px corners, a #b7a676 gold accent for dates and pager marks, and no box shadows.", "sha256": "199962a856128e189c26c65b20e5da0f523685c67f44cce7823d646b3bc5f3a4", "bytes": 17762}, + "ben-and-jerrys": {"name": "Ben & Jerry's", "category": "Food & Beverage", "description": "Ben & Jerry's US site (benjerry.com): white #ffffff canvas, near-black #141414 ink, sunflower-yellow #ffbc0e pill CTAs (80px radius, hover #fed831), a sky-blue #c4e7f3 values band, navy #201460 activism band, deep green #2a5729 footer and #002f87 links. Chunk ReThunk slab headings (48/36/24px) over Proxima Nova 20px/32px body.", "sha256": "eb6f7a239553eaac69868e678c65c5491cfca3ebe0e0f7677b27c89338b64f1c", "bytes": 10488}, + "benevity": {"name": "Benevity", "category": "Design Systems", "description": "Benevity's homepage pairs a deep indigo canvas (#160e4c, the site's own moonshot-blue) with white Red Hat Display 700 headlines at 66.6px, a raspberry #d1305e pill CTA with 9999px radius, a pale #f0f7fc content band, violet #2c03b0 headings and aqua #61eff2 eyebrows — an enterprise purpose-software brand that speaks in confident, human photography.", "sha256": "2e480db2398d17fdf8cca2ddd6e08a7ec754ec139489f6017ffffb32273f669c", "bytes": 10726}, + "bennett-clive": {"name": "Bennett & Clive", "category": "Fashion & Apparel", "description": "Monochrome production-company portfolio for Bennett & Clive: pure white #ffffff canvas with #000000 ink, full-bleed imagery under giant uppercase InterWeb type (133.333px display at -9.33334px tracking, 26.6666px body), a single outlined 500px-radius pill button, no shadows, and fluid vw-based sizing from a 4-column grid that starts at 1024px.", "sha256": "d58732c0875c49b2dfb532ced4523efbe1824a10fb8b24819ce072cd315b0569", "bytes": 15655}, + "bentley": {"name": "Bentley Motors", "category": "Luxury", "description": "Bentley Motors' global site: near-black #040404 and charcoal surfaces under full-bleed car photography, white #ffffff text in the light (300) Bentley typeface at 14px/20px with 0.14px tracking, 30–36px light headlines, square 'Living Green' #394d45 buttons with uppercase 16px labels tracked 1.6px, and white 1px outlined secondary buttons.", "sha256": "73eaf1aa36a7571781d06e080b46beeb11b58ec6a5b2d35b32fd7e4d3eb3a17e", "bytes": 12888}, + "bento": {"name": "Bento DS", "category": "Design Systems", "description": "Bento DS marketing site: white canvas, near-black ink #242424, Clash Display 600 headlines at 116px, Epilogue 18px body, a lavender gradient hero, 20px-radius dark buttons and 16px-radius pale violet secondary buttons.", "sha256": "5dd1b57da30ef8bab714c7d0df12df043c26e0544d2e286ea702dda0e6f65d5f", "bytes": 12025}, + "berkshire-hathaway": {"name": "Berkshire Hathaway Inc.", "category": "Banking & Insurance", "description": "Bare HTML 4.0 corporate home page for Berkshire Hathaway Inc.: white #ffffff page, navy #000080 text, purple #800080 underlined links, Times at 16px with 13px and 10px notes and a 32px bold masthead initial, two-column bullet list in a 90%-wide table, grey #808080 horizontal rules, zero radius, no shadows and no stylesheet.", "sha256": "1002346763925feca17a4f258d0ef3d51dcb9bfc01ca7f6159ecd51ae3c1b6f4", "bytes": 12755}, + "best-idc": {"name": "Best Internet Service Solution (Best IDC)", "category": "Thai Brands", "description": "Thai web-hosting and data-center storefront built on stock Bootstrap 4.1.1: a black #000000 fixed navbar with lime #00ff00 brand text, a #f8f9fa content panel, Bootstrap system-font stack at 16px/24px with 32px and 28px weight-500 headings, Bootstrap blue #007bff links, teal #17a2b8 side panels, 3.2px to 4px corners and image-overlay cards.", "sha256": "4e31792dd4aa68f852806e1a56ebba7a7cd93c22bd0cfa60d4d06d4f30617872", "bytes": 15927}, + "bethesda": {"name": "Bethesda.net", "category": "Gaming", "description": "Dark, game-publisher hub for Bethesda Softworks' franchises (Fallout, DOOM, The Elder Scrolls, QUAKE): #191919 background, white text, uppercase Trade Gothic Bold Condensed at 70px for hero headlines, Montserrat 16px body, fully rounded pill buttons in #303030 and #e7e7e7, 10px-radius feed cards with outlined franchise tag pills and a #00d0c840 teal hover glow.", "sha256": "298703c59d13d30de3e1a264a58ddea964aadf45a6071fc3f4fba5d3bdd90b4b", "bytes": 18325}, + "better-world-green": {"name": "Better World Green", "category": "Thai Brands", "description": "Corporate site of Better World Green Public Company Limited (BWG), an industrial-waste management group. Sarabun 300 body and Kanit buttons, coral #f4524d Read-more buttons with 5px radius, deep forest-green sections #20311a and #3d5730 against white, translucent 10px-radius form inputs.", "sha256": "3b12869c2fd38aca0b545d006703abc6758af2bb554ea40641a82a44bc7ed258", "bytes": 9624}, + "beyond-design-into-experience": {"name": "Beyond Design Into Experience (Plus X 15th Anniversary)", "category": "Portfolio", "description": "Black-and-white scroll-story microsite for Plus X Creative's 15th anniversary: neue-haas-grotesk at 204.8px bold for hero words (-6.144px tracking), 93.44px and 33.28px uppercase statements, 17.92px outlined pill labels (1px border, 14px radius, 27px high), #ffffff and #000000 sections with #4c4c4c and #808080 dimmed text, a 12-column 16px-gap grid and WebGL 3D scenes.", "sha256": "218de12f32c96f265d4b28d5ed507017c3a2bdd338e68304358f86335a870753", "bytes": 16661}, + "beyond-securities": {"name": "Beyond Securities", "category": "Thai Brands", "description": "Thai brokerage site in Prompt: white #ffffff page, #212529 body ink, gold #e2b035 headings and buttons with #070707 text, dark translucent #000000b3 feature columns over photography, top-rounded 10px buttons and no shadows.", "sha256": "e21b9b69cf1b92d316e14b5a396d9ff4ae190d0c1ac724fce98ed5e2f7504932", "bytes": 9930}, + "big-c": {"name": "Big C Online", "category": "Thai Brands", "description": "Big C Online (bigc.co.th, Thai hypermarket e-commerce home page): a white canvas with #262626 text in Noto Sans Thai, a lime-green #93d600 button with dark text and 6px radius, red #fb2a10 sale prices, blue #0066ff links, and a very dense grid of promotional banners and product cards.", "sha256": "0f9f6f8b2367034afe3c6d81f542b9ffa56b4166265490037c7e1f8aabaf2c09", "bytes": 11124}, + "bigcommerce": {"name": "BigCommerce", "category": "Design Systems", "description": "BigCommerce's marketing site sets AeonikPro at 64px/500 on a dark hero, then moves to white and pale-lavender bands. Buttons are black #000000 rectangles with 2px radius and white 16px labels, text is near-black #121118, with a navy #031033 footer-type surface and brand accents blue #2664ff and green #03eada.", "sha256": "45e6614588bba4f3cd6b16d61d6afadd7798a41cd9da1c1fab34aa14d5afa5b8", "bytes": 11508}, + "biings": {"name": "Biings", "category": "Design Systems", "description": "Biings marketing site (biings.com, in French): a warm #faf7f5 canvas with aubergine #46285d text, a #8c50b9 violet pill primary button, Plush 76px display headlines over Averta body text, 28px rounded translucent cards and soft plum-tinted shadows.", "sha256": "c0b63b9d8553d55cc0759b72da6fdba3c41efdc39b37378f6907aa4891fa2cdd", "bytes": 10609}, + "binance": {"name": "Binance", "category": "Fintech & Crypto", "description": "Binance homepage system: near-black #181a20 canvas, #eaecef text, a single signal-yellow #fcd535 button with #202630 label and 8px radius, deeper #f0b90b yellow for numerals, BinanceNova at 72px/700 hero and 40px/600 headings, 20px-radius cool-grey cards.", "sha256": "c4f0f3ab4861ac3601a48b1d6465bcb78e4ef7fe89336c2d6c0c190cff2b1582", "bytes": 18483}, + "bitbucket": {"name": "Bitbucket", "category": "Developer Tools & IDEs", "description": "Bitbucket (Atlassian) sets Charlie Display 54px/500 headlines (-1.08px) and Charlie Text 16px body in #101214 on white, with #1868db blue pill buttons (48px, 10px 22px padding) that darken to #123263, a full-width #1868db band, #e9f2fe pale-blue sections, 20px-radius #b7b9be-bordered cards and Atlassian --ds-* tokens.", "sha256": "7898909719c0dfd978d92caee7d0c591594bd4d90eb47be51f229ce76e1eb4d1", "bytes": 14660}, + "bitkub": {"name": "Bitkub Exchange", "category": "Thai Brands", "description": "Thailand's crypto exchange site on a published --bk-* token system: Graphik TH at 14px body and 40px/600 hero, Bitkub green #00b359 buttons with #00994d hover, #0c0e0c ink and #6b7b70 secondary text on #ffffff and #f5f5f5, 4px button radius, 16px-radius white stat cards with soft layered shadows, red #f04542 for losses and a green stats band.", "sha256": "d1657d845b98769de0568dbf29b111a512fcea7a64e1e6dd0149e054a9d64cc3", "bytes": 19198}, + "bitter-creek": {"name": "Bitter Creek", "category": "Portfolio", "description": "Monochrome production-studio portfolio for Bitter Creek (London): white #ffffff canvas with #000000 ink, two Unica 77 faces (Llsub sans at 112.083px for the mission line, Monollsub mono at 14px and 38.8096px for labels and project codes) with tight -0.03em tracking, a full-bleed film hero, a square 1px-outlined button, no shadows and no corner radius.", "sha256": "ab93003d11766e330477508ccbf23ae558dee2e62aec0d907ea276fee0353879", "bytes": 15658}, + "bitwarden": {"name": "Bitwarden", "category": "Tech & AI", "description": "Bitwarden's marketing site: Inter Variable headlines at 60px/69px weight 600 with -2.4px tracking, light 300-weight body at 18px/28px, Bitwarden Blue #175ddc pill buttons 52px tall that hover to Light Teal #a2f4fd, Deep Blue #0c3276 top bar, #0a171f dark logo band, Off White #f3f6f9 sections and 20px-radius cards.", "sha256": "72cc5f1a0932b15573d9296d039cdeedfa7a7b65f978bebd4267bd15d44a4ce5", "bytes": 14651}, + "bknix": {"name": "BKNIX (Bangkok Neutral Internet eXchange)", "category": "Thai Brands", "description": "Thailand's neutral Internet exchange site, built on Bootstrap 5.0.2 plus a reduced Flat UI stylesheet: Lato throughout (16px body, 29px bold section headings), a #34495e navy navbar, agenda panel and footer, #1abc9c turquoise date tiles and hover, #e74c3c red headlines, white stat cards with 20px radius and a 0 20px 40px shadow, and a live Chart.js traffic graph.", "sha256": "b5506c8eb5db85cd9e1a803a62ed89df37117a4a2687c6f7fce17a541b0cf9a0", "bytes": 17269}, + "black-ivory-coffee": {"name": "Black Ivory Coffee", "category": "Thai Brands", "description": "Online store and brand site of Black Ivory Coffee, the elephant-refined coffee from Thailand, in trajan-sans-pro capitals and GeneralSans body on a warm #f1efe8 canvas with black ink, #ded9ca panels, white 1px outlined buttons over full-bleed cinematic photography and a black footer.", "sha256": "dfb585d22f1f7be41b90fd7c92b6e8dacc9a8f07eac905cb29046ed36e66b780", "bytes": 11696}, + "blackrock": {"name": "BlackRock", "category": "Banking & Insurance", "description": "BlackRock's corporate home page on its published ONEDS design system (data-brand=blackrock): white #ffffff and black #000000 bands, BLK Fort Condensed bold headings at -1px tracking (58.6634px hero) over BLK Fort body at 19.7738px, signal yellow #ffce00 for the Local websites button, cream #f5f5eb cards with 12px radius, 4px-radius solid buttons and orange #ff4713 accents.", "sha256": "586ecf4014f8fad8ab50755f7954f7111c341e292de4a1a85eb8993c471a6b82", "bytes": 19656}, + "blcp": {"name": "BLCP Power", "category": "Thai Brands", "description": "BLCP Power (บริษัท บีแอลซีพี เพาเวอร์ จำกัด) Thai homepage, blcp.co.th: Noto Sans Thai with 34px/600 hero heading and 17.92px body, deep blue #0e3f64 with lime #a6ce39 pill buttons, pale #f4f7ec news panel, 16px-radius rounded photo cards and a left sidebar menu.", "sha256": "7e8d958da224e8bc3aa1b33faa6c30572826c0c2fa7832d0f45740b5084270f3", "bytes": 11633}, + "blender": {"name": "Blender", "category": "Design & Creative Tools", "description": "blender.org home: light grey #f2f2f3 canvas, #4c4d52 Inter text, 72px/800 Inter display heads in vivid feature colours (#46ebc2, #0066ff, #9300ff), blue-gradient #6183ff→#47aaf5 'Donate'/'Download' buttons with 6px radius and blue glow, 12px-radius cards with soft grey shadows, a white 64px navbar and the logo's PMS 716 orange #e87d0d.", "sha256": "1cf3dba883ee94225cfe215660b76cd57d439d835715d519bf190021a77d9078", "bytes": 12504}, + "blip": {"name": "Blip", "category": "Design Systems", "description": "Blip.ai (blip.ai/en) marketing site — a photo-led hero in white, deep-black type (#000000), cobalt blue (#1968f0) uppercase buttons with 6px to 16px corners, Carbona Blip at weight 800 for 44px headlines, pale grey (#f5f5f5) cards and a near-black (#1f1f1f) logo and industries band.", "sha256": "53b7f9cfea7bd293899d15fdd60a75c2b7b477fb989ebcdecc077c7956f00312", "bytes": 11776}, + "blizzard": {"name": "Blizzard Entertainment", "category": "Gaming", "description": "Blizzard's portal is a dark navy (#131928) game showcase built from blz-* web components: a floating blurred nav bar, a full-bleed key-art carousel with 60px pill buttons (blue gradient #1888ef to #009fe9, or frosted rgba(208,217,251,.2)), and a 4-up grid of 4px-radius game cards. Headings are Poppins 600 (48px hero, 36px uppercase section titles), body and nav are Archivo at 20px/28px in 70% white.", "sha256": "63abaeaf87e4e0427dfc23cae8b666244897ac1a302286173385bb1fc24ee68f", "bytes": 25552}, + "bloom-appearhere": {"name": "Appear Here", "category": "Design Systems", "description": "Appear Here, the London-based marketplace for renting shops and pop-up retail space: Avenir Next W01 with an 800-weight, widely tracked uppercase hero (43.52px, 8.96px letter-spacing), a near-black #191919 header and footer, a single warm gold #baa082 (hover #dbbd9a) on 2px-radius buttons, white listing grids, and photography of shopfronts. Built on the Bloom React pattern library.", "sha256": "2b90fc8633ef6873608304a60d816fdef5b8de2f9c77afa6154861526882fd26", "bytes": 15111}, + "blue-bottle": {"name": "Blue Bottle Coffee", "category": "Food & Beverage", "description": "Blue Bottle Coffee's US store bluebottlecoffee.com measured live — white #ffffff and warm off-white #f6f6f3 bands, black #000000 text, square charcoal #333333 buttons that go black on hover, a #333333 footer, the logo's bottle blue #00a9e0, and two ABC faces: uppercase ABC Marfa headings (24px, +1.6px) over ABC Diatype body at 16px/22px, with 0px corners.", "sha256": "d6249f4647ae69f5711506f19b938d0762584b98e7f2329b98bf501853b8ac01", "bytes": 13041}, + "blueprint-js": {"name": "Blueprint", "category": "Design Systems", "description": "Blueprint is Palantir's open-source React UI toolkit for dense desktop apps: system font stack at 14px, #2d72d2 primary blue buttons 30px tall with 4px radius, #111418 dark and #f6f7f9 light canvases, 4px spacing grid, 600 headings, ring-style shadows.", "sha256": "2d14dbe643cae30a0effe7b53aa2d1f86097714a5b85271541617a78886dd5fa", "bytes": 21563}, + "bmw": {"name": "BMW", "category": "Automotive", "description": "BMW Thailand homepage: white #ffffff and black #000000 bands with cinematic car photography, #262626 ink, one BMW blue #1c69d4 button (52px tall, 3px radius, hover #0653b6), BMW Type Next at weights 300 and 500 with 48px hero and 35px light headings.", "sha256": "8e79a2355edc32af03199b75a2427c31f4ac2c9f7ccac422cb4943e6706e3190", "bytes": 18639}, + "bmw-m": {"name": "BMW M", "category": "Automotive", "description": "BMW M international homepage: graphite #262626 canvas with white BMWTypeNextLatin Light 40px headings, BMW blue #1c69d4 square-cornered 50px buttons (hover #0653b6), pale-blue #9ecaff links, and a floating 24px-radius nav bar over offset motorsport photography.", "sha256": "8ac3269c6ae4a4cbceff3f01ff36e02c0a794c9edeb58b5d7fe320abe7e8f5cd", "bytes": 18034}, + "boc-studio": {"name": "Boc.Studio", "category": "Agencies & Studios", "description": "Barcelona creative brand studio site: #181d21 near-black canvas with #f3f3f3 text and #adadad secondary lines, a #ff4421 orange marquee strip with black ppMori type, 28.259px display and 13px uppercase labels, a 3-column work index with 15px captions, square image corners, glass-sphere hero art and an enter-to-start intro.", "sha256": "a1435b3ef79310df697e3278800c76a3dec8dfdd702d8f4d4bee2f6ff833d7fe", "bytes": 15457}, + "boeing": {"name": "Boeing", "category": "Airlines", "description": "Boeing.com measured on 2026-10-09: white canvas (#ffffff) with deep navy (#0a2240) utility header, cobalt (#0033a1) cards and pill buttons (50px radius, uppercase 16px/500 with 1.3px tracking), and sky-blue (#82d4f6) nav links, all set in the Meso family at weights 300/400/500/700 with a 68px light display headline over full-bleed aerospace photography.", "sha256": "681f2ce9d75be0d14735de61e20b99afcc38c233f2a60a79796d5c2ebcec305a", "bytes": 16798}, + "bold": {"name": "Bold", "category": "Bold & Expressive", "description": "Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.", "sha256": "91ccb39dbfdf2388d28c4dad2a8b88bf4340a98c0e72dd2a829d26507ecc1f8c", "bytes": 3003}, + "bolt": {"name": "Bolt", "category": "Logistics & Mobility", "description": "Bolt (bolt.eu), the European ride-hailing, scooter and delivery super-app, ships a calm off-white (#f7f9f8) marketing canvas set in Inter (served as __Inter_205b87) at variable weights 550/650/750, a single green action color (#2b8659, hover #18784c), 40px-radius CTAs 48px tall, near-black (#0e1010) 40px-radius service cards and a near-black footer, with tinted-alpha greys (#000a07a0) for body copy.", "sha256": "5eed322bc9612203846ab164a2fa028204d31f9346b804784b3859ef186bbbe4", "bytes": 28769}, + "boltdesign": {"name": "Bolt Design System", "category": "Design Systems", "description": "Bolt Design System's documentation landing page pairs a deep navy hero (#001f5f) with white sections, Open Sans at 800 weight (76px display) and 400 body at 16px, a golden primary button (#ffc836) with 3px corners, a #3e67bb action blue and a #10a5ac teal for the second implementation path.", "sha256": "2c64d16805ae8002d00d4bfe60aa8c998f074785d5fd00c2b0c1ac352edbdd38", "bytes": 11885}, + "booking": {"name": "Booking.com", "category": "Travel & Hospitality", "description": "Booking.com's traveller site pairs a deep brand-blue #003b95 header band with a white canvas, Avenir Next 700 headlines (48px hero, 24px section titles) over a system-ui body stack at 14–16px, action blue #006ce4 buttons (hover #0057b8) with 4px corners, a yellow #ffb700 frame around the search box, 8px cards with a 0px 2px 8px #1a1a1a29 shadow, #1a1a1a ink and 9999px pill tabs — all driven by --bui_* tokens on a data-bui-theme=traveller-light body.", "sha256": "06166f21a233806b8b4905dda8c86c548da8e265dae3137189b7c91490ab7ceb", "bytes": 23766}, + "boon-rawd": {"name": "Boon Rawd Brewery", "category": "Thai Brands", "description": "Boon Rawd Brewery corporate site (home of the Singha brand): a full-bleed brewery photograph, a gold (#be9639) angular menu panel, white Galileo type at 31px and 70px, square corners, and a charcoal (#323637) page ground.", "sha256": "140f4ae825f1f2a388e2fad71771c7f66602dc3547162d60e562c884e33a6800", "bytes": 8258}, + "boots-thailand": {"name": "Boots Thailand", "category": "Thai Brands", "description": "Boots Thailand storefront (store.boots.co.th) measured 2026-10-09: deep indigo-navy #161348 for the category bar and footer on a #fafafa page with white #ffffff cards edged in #bcc5d0, set entirely in the Thai-capable PSLDisplayPro and PSLDisplayProBold families at 18px body and a 38px page title, with 3 to 5px corners and circular carousel dots.", "sha256": "3cfa36af8f9cc9a8d39edbe8e76a5d7d40fc60c379eb7420a8b4488d75a4d7de", "bytes": 13072}, + "bootstrap": {"name": "Bootstrap", "category": "Frontend Frameworks", "description": "Bootstrap 6 alpha homepage and docs: Geist type with 48px/600 headlines, white canvas with a pastel mesh hero, a #7740ff accent button at 12px radius, #0087fe blue docs buttons at 8px radius, #171a1d ink, and low-opacity layered shadows.", "sha256": "abbae3a9fa46f7a3a778b46a8b16fe896cac30b0c72f6a38639da24536bffef6", "bytes": 22783}, + "bosch": {"name": "Bosch", "category": "Automotive", "description": "Bosch Global (bosch.com) measured 2026-10-09: a white and cool-gray (#eff1f2, #e0e2e5) corporate page with Bosch blue #007bc0 links, near-square corners, black text, a charcoal #2e3033 footer, and one proprietary family, boschsans, at 400 and 700 with a 40px bold hero headline, 20px body and a token system of --g- color ramps and --sem__ semantic variables.", "sha256": "6d27280d306077346b1576a3ae292e1ba1c2324910d53600af44e1f402a0d711", "bytes": 13552}, + "bose": {"name": "Bose", "category": "Music & Audio", "description": "Bose home page (bose.com/home) measured 2026-10-15: a white and warm-gray (#f9f9f9, #f8f7f6) store with near-black #131317 ink and square 2px black uppercase buttons, a heavy condensed Bose Headline at weight 900 (96px display, 58px section titles) over Bose Text body at 16px with -0.36px tracking, and product photography on light tiles.", "sha256": "d5d0d9717882b1dd9d41bf31b109d32aad58d404bab3fd86ffc6cf8d7750dbf0", "bytes": 14950}, + "boston-gov": {"name": "City of Boston (Boston.gov)", "category": "Design Systems", "description": "Boston.gov, built on the city's Fleet pattern library, sets 90px uppercase Montserrat bold headlines in white over a blue-tinted skyline, body copy and links in Lora serif, Optimistic Blue #1871bd links and square buttons that flip to red #fb4d42 on hover, navy #091f2f ink and footer, and white cards on a #f3f3f3 grey field with line icons.", "sha256": "1e357bac657cf4d43aa78b615e4a8803dc706c85ba36d1459d74f821efc91367", "bytes": 12634}, + "bot": {"name": "Bank of Thailand", "category": "Thai Brands", "description": "Bank of Thailand English home page (bot.or.th/en/home.html) measured 2026-10-15: deep navy #003366 on white with light-blue #e6f3ff bands, translucent navy data cards over a photographic hero, outlined 1000px-radius pill buttons, and the Thai-capable Conv_Kanit-Regular and Conv_Kanit-Medium faces at 18px body, 28px section titles and 24px card titles.", "sha256": "2cfe2ab0771eb1fbc101b37a1b55a88e79a66313555e61167f9e75b3986950e5", "bytes": 13186}, + "botanical-garden-organization": {"name": "องค์การสวนพฤกษศาสตร์ (The Botanic Garden Organization, bgo.qsbg.org)", "category": "Thai Brands", "description": "Main website of Thailand's Botanic Garden Organization, measured at bgo.qsbg.org: Mitr throughout, black #000000 text on a white #ffffff canvas, sky-blue #00a1ed for the wordmark, nav hover and 54px buttons with 8px radius, deep blue #0072a3 and amber #ffb020 brand variables, 2px-radius gradient stat cards and 48px section headings.", "sha256": "8e6c406cf1cdfbeb63df0bb8c4a580889b0317ddb62f0db2592fafe39d9e0eb7", "bytes": 13414}, + "bottega-veneta": {"name": "Bottega Veneta", "category": "Luxury", "description": "Bottega Veneta's US store (bottegaveneta.com/en-us) is a white, square-cornered light table for photography: one proprietary face, bottegaveneta-regular-webfont, at weight 400 and mostly 14px/22px for everything from headings to CTAs, #000000 ink with #6d7882 slate secondary text, white outlined CTAs with 1px black borders and 8px 25px 5px padding, black #000000 primary buttons that hover to #31383e, a 36px black promo strip and #eeeff1 product image wells.", "sha256": "aee6c82c48e35de7b218aefa02c92e8527c71c64c56441de16d83b6fd8ae792a", "bytes": 17892}, + "box-blueprint": {"name": "Box", "category": "Design Systems", "description": "Box's home page (box.com/home) uses Inter at 80px/600 for the hero, 20px grey #767676 body copy, a Box blue #0061d5 fully rounded 100px pill button, a near-white #fbfbfb card surface and a black #000000 footer, with a rainbow gradient on the headline and product-UI collage imagery.", "sha256": "ab3cff5e60495f3f43a78f2d9122793bbdab05b84f117f69b1ce9dc620e3f737", "bytes": 10889}, + "bp": {"name": "bp", "category": "Energy & Climate", "description": "bp global home page (bp.com) measured 2026-10-09: warm off-white surfaces (#fbfcf8, #fcfcfc) with olive-dark text (#494736, #121000), bp green #007f00 pill buttons at 800px radius and 14px type, 16px-rounded image tiles, a floating rounded header, and a single-weight bpSans at 400 from 16px body up to a 48px headline.", "sha256": "dd18a8ab88a6102c4c993155f6fc1ec7cbbadecd5766e262d9f714184ab3261f", "bytes": 16360}, + "brand-in-the-open": {"name": "Base Brand Guidelines", "category": "Architecture & Interiors", "description": "Base Brand Guidelines (brand.base.org, the open brand site behind Base's Brand in the Open campaign) measured 2026-10-09: white canvas with a left text sidebar, black coinbaseSans/Base Sans type at 24px with negative tracking, Base Blue #0000ff as the brand anchor (blue square logo and button hover), dark #323232 8px-radius buttons and #fafafa 12px-radius tiles.", "sha256": "62850ba61182b27bb68060289e6dea2c24b4a05aa9776aba282a89de16fe7455", "bytes": 14304}, + "brazil-gov": {"name": "GOV.BR", "category": "Design Systems", "description": "The Brazilian federal government portal gov.br (Serviços e Informações do Brasil), built on the Padrão Digital de Governo design system: Rawline type, government blue #1351b4 with navy #0c326f and #071d41, near-white canvas #fcfcfc, 4px to 25.2px radii and soft 0 3px 6px shadows on white service tiles.", "sha256": "2ac9d2d3d63a1fa6e591d03456ad15b34f6f306aecbabc3e95e676eac3eee02d", "bytes": 12762}, + "breakthrough-energy": {"name": "Breakthrough Energy", "category": "Tech & AI", "description": "Breakthrough Energy home page (breakthroughenergy.org) measured 2026-10-15: a cream #fafbf8 canvas with near-black #12110e ink, a full-bleed dark video hero carrying a 122.816px Saans 500 headline at -4.91264px tracking, a 12-column grid with 1rem gutters, and declared accents of yellow #dfff5c, warm grey #c3bdb8 and beige #ddd9d4.", "sha256": "13801f8ea8da3d97ddfe26c987dace5ce155fb5b04b45e8d5c440913b06a2369", "bytes": 12156}, + "breitling": {"name": "Breitling", "category": "Luxury", "description": "Breitling's homepage pairs a flat brand yellow #ffc72c (header and square 0px buttons with black text) with white and near-white surfaces, a navy-black #09091a footer, condensed uppercase italianPlate headlines at 50px bold and Open Sans 14px body.", "sha256": "94841eac7f5a9d656121b0421bc5cce1b69228288da2f76dd35bf02b85ede154", "bytes": 11107}, + "brevo": {"name": "Brevo", "category": "Product & SaaS", "description": "Brevo (brevo.com) pairs Tomato Grotesk semibold headlines (40px/48px) with Inter body text, a mint #c0ffa5 hero and header, #1b1b1b charcoal buttons with 16px radius and an inset-bevel shadow, forest-green #006a43 links and #004227 feature headings, and pale mint #e8fedf/#f9fff6 bands.", "sha256": "cde8a4ac198ab4c3768970a57f6b104d68e8afaf4248b194c294b3284e56ef79", "bytes": 14251}, + "brex": {"name": "Brex", "category": "Banking & Insurance", "description": "Brex home page (brex.com) measured 2026-10-09: Inter at weights 400 and 500 with about -2% tracking (72px/72px headline at -1.44px), white and cool-gray (#f3f3f7) bands with ink #15191e, a signature orange-red #ff3d00 for 10px-radius 36px buttons (hover #ff6a17), 12px-radius white cards, and a near-black #000710 footer.", "sha256": "da0de9c37517968f6d3d56ca21c2a6c89e431aedf39b7a80f6c788dafd5eb5fd", "bytes": 13908}, + "bridge-ufsc": {"name": "Universidade Federal de Santa Catarina (UFSC)", "category": "Design Systems", "description": "UFSC institutional portal (ufsc.br): a white canvas with #333333 Open Sans text, a strong #1659bf blue header and footer band with pale #dcecff navigation text, compact 15px body type, 5px and 10px radii, no shadows and a dense three-column Portuguese-language news layout.", "sha256": "88fd9f974187d9057903ff73d1cc57ef56d36bf0bf61723d3cadc2fc5ec2bb59", "bytes": 10623}, + "bright-biotech": {"name": "Bright Biotech", "category": "Retail & E-commerce", "description": "Bright Biotech home page (brightbiotech.co.uk) measured 2026-10-15: a deep green #03463b canvas with a lime #bbfd6a accent, #f5acff pink image cards, one family (Jeko at 500 to 700) with a 103.704px headline, lime pill buttons at a 74.0741px radius and viewport-scaled non-integer type sizes.", "sha256": "82a864fb3c6acea48f8eaf9278f5db88e0ae0307f9d95712b5626bfa177332dc", "bytes": 13289}, + "brilliant": {"name": "Brilliant", "category": "Education", "description": "Brilliant (brilliant.org) as measured live — a white and warm-stone #f5f3f1 canvas, black headlines in the slab-serif CoFo Robert (76px/500, -1.4px tracking) over CoFo Brilliant sans body text in 60%-black #00000099, a single green #29cc57 pill CTA (9999px radius, 60px tall, hover #15b441), floating pill navigation with a 1px #e4e4e4 hairline, 44px-radius stat cards and 20px-radius course tiles with a 4px #e5e5e5 bottom lip — tokens shipped as Panda CSS variables (--panda-*).", "sha256": "c30c686ecac74482d368ff36fc48e113fea75679dd8300060a35c76c9efea0ce", "bytes": 23055}, + "bristol-myers-squibb": {"name": "Bristol Myers Squibb", "category": "Pharma", "description": "Bristol Myers Squibb corporate home page (bms.com) measured 2026-10-15: white canvas with warm near-black ink #363131, square magenta #be2bbb 72px buttons in 14px uppercase (hover #ab27a8), violet #3312af tags, glowing 400px-radius section pills, and Basel Grotesk at weights 300 to 700 with a 56px light headline.", "sha256": "44fdf160309606e3ade50bea320e4f4336cb1b3d8bae09f95fb41d890238313c", "bytes": 13500}, + "british-gas": {"name": "British Gas", "category": "Design Systems", "description": "British Gas's Nucleus-driven marketing site — a bright blue energy-and-services brand using the proprietary British Gas typeface in three cuts (Subhead, Medium, Body), a #004ecc action blue on white with #002f87 navy panels, #111518 slate ink, square 0px primary buttons 52px tall, 4px inputs 51px tall, 8px cards and rounded red sale pills.", "sha256": "ccc47c3c82bfc6eaf6806c5cb5fa564e14704227b7a44e7f4ace726e116a1a81", "bytes": 14685}, + "british-museum": {"name": "British Museum", "category": "Culture & Events", "description": "British Museum (britishmuseum.org): a black #000000 site with #1d1d1d content cards, white and #a5a5a5 grey text all in Helvetica Neue 400/500, square black-and-white buttons with a chevron (50px tall, 10px 60px 10px 20px padding), 50% round icon controls, and per-exhibition accent colours such as gold #bf955f, red #ec1616 and green #67ad25.", "sha256": "279e29ee0c66e196ac8dd03ece84048fa1fe0612b3cc5b83c184fd7060eeedbc", "bytes": 11087}, + "brokersthai": {"name": "BrokersThai", "category": "Thai Brands", "description": "BrokersThai (brokersthai.com), a Thai-language forex broker review site measured 2026-10-15: white and slate (#f8fafc) pages with ink #1f2937, a navy #0a2540 and dark-band hero, amber #f59e0b 8px-radius buttons with navy text, #1859d1 links, 12px bordered cards, Prompt headings (600 to 700) over Sarabun body at 16px/28px, and a published --bt-* token set.", "sha256": "d917715455c76232c9c3a3652c2202cd1d29cbfdd01bfb02688dbbfbdef84009", "bytes": 15833}, + "brunello-cucinelli": {"name": "Brunello Cucinelli", "category": "Luxury", "description": "Brunello Cucinelli's homepage is a white (#ffffff), near-monochrome editorial gateway: light IvyPresto serif headlines at 40px, GTEesti sans at 18px, charcoal ink #262626, no filled buttons or radii, tiny tracked underlined links, and warm photography as the only colour.", "sha256": "3b61a2f5763a7ff0787c3118f33ae031fe981f6469b8868f15533f7e7cce357e", "bytes": 8944}, + "brutalism": {"name": "Brutalism", "category": "Bold & Expressive", "description": "Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.", "sha256": "c0abb32cad80011f3001bd9645f2a2478f52ddcd9928a4624767148f786c818a", "bytes": 3113}, + "bt-group": {"name": "BT", "category": "Telecom", "description": "BT (bt.com, the consumer site of BT Group) is a UK broadband, TV, sport and mobile retailer set in the proprietary BT Curve typeface, with one saturated indigo (#5514b4) for headlines, pill buttons and icon discs on white and #f0f0f0 surfaces, 48px-high pill CTAs, and very large 40px and 64px card radii.", "sha256": "8abf461bf0bca14579fc50d513b62b577ec68fa2630d0c24b3d0156193e5ebd1", "bytes": 17413}, + "bts-skytrain": {"name": "BTS Skytrain", "category": "Thai Brands", "description": "BTS Skytrain (bts.co.th/eng) is Bangkok's elevated-rail operator site, set entirely in Sarabun, with a royal-blue #2758aa header and footer, a signal-green #189008 action colour for Search buttons and hover states, white cards with 5px to 10px radii and a soft 0 2px 7px shadow, and full-bleed promotional posters.", "sha256": "2326a2ca04ca8280bfeeed8e7353f69c37ff8c28d997963399cee76db1789e00", "bytes": 15027}, + "bubble": {"name": "Bubble", "category": "Developer Tools & IDEs", "description": "Bubble's no-code AI app builder site: deep cobalt #051043 bands and translucent white panels, Manrope set at 800 for 51px headlines with -1px tracking, #0c29ab pill CTAs (100px radius) that darken to #091e7c on hover, a #61caff sky-blue eyebrow and focus ring, and floating product screenshots.", "sha256": "a163f1d9a89cbf08621535f56b06f244ce0c2310307a66c034e94c8ec8d28f78", "bytes": 14915}, + "buck": {"name": "BUCK", "category": "Agencies & Studios", "description": "BUCK's portfolio site is pure black #000000 on white #ffffff with one typeface, Mabry Light Pro (Mabry) at weight 100 — a 27.4432px intro paragraph, 19.0578px project titles and captions — a staggered two-column image grid, a sage-grey #abb2aa footer with a 46.5201px city clock, no shadows and a single 9999px pill radius.", "sha256": "6d8e8347a7797654b7bde1e84a6f7c8362ac56d33960e9da3692022449d4b5f4", "bytes": 12141}, + "bucks-sauce": {"name": "Bucks Sauce", "category": "Food & Beverage", "description": "Bucks Sauce (buckssauce.com) is a small-batch BBQ sauce brand on a near-black brown canvas (#100b06) with cream (#f5e4c7) type and buttons, a condensed custom display face (PeperoncinoSansCustom, uppercase, negative tracking) paired with Inter Tight, four flavour colours as product cards, and 10px radii plus round buttons.", "sha256": "4a8d84434b59b3e6c65329517ea79dced7e9efd85d5f174f044e860de9185cb1", "bytes": 15945}, + "buffer": {"name": "Buffer", "category": "Product & SaaS", "description": "Buffer's social-media-management site: Stolzl 75.8px/400 display over Figtree 18px body, deep teal-black #213130 ink on an off-white #fefdfb canvas, a mint-green #b0ec9c pill CTA with dark text, pastel feature tiles, 20px soft-shadow cards and a dark #213130 footer with green links.", "sha256": "f7920876604c5894fa7c04452b797e6141149fde02e9f8a179e51defa166230e", "bytes": 13622}, + "bugatti": {"name": "Bugatti", "category": "Automotive", "description": "Bugatti homepage: pure black #000000 canvas with white ink, full-bleed car photography, three proprietary faces (Bugatti Display 60px, Bugatti Monospace 12px uppercase labels, Bugatti Text 16px), and outline controls: a 42px pill button and a 4px-radius compact button that invert to white on hover.", "sha256": "952d6efb390fbe51c6dd71037e1b1dc491e00729f5a3d96f20a15f45ca23da4f", "bytes": 19518}, + "builderio": {"name": "Builder.io", "category": "Developer Tools & IDEs", "description": "Builder.io's builder.io site and published brand system: warm near-black #0a0a0a page, off-white #faf9f5 primary text with #aeadac secondary copy, electric cyan #01c8f1 actions (hover #00dff6 with a cyan glow), Geist 56px/500 headings at -0.02em, uppercase Geist Mono 14px/600 button labels, 6px button radius and square 0px panels.", "sha256": "c99c89f4b8f8d63b0c0d47aed0737d2e80c5b6adaa4155faf43c0334835a27eb", "bytes": 13957}, + "bulma": {"name": "Bulma", "category": "Frontend Frameworks", "description": "Bulma is the CSS-only Flexbox framework whose own site is the product demo: white canvas (#ffffff), near-black blue-grey ink (#2e333d), a turquoise primary (#00d1b2) with dark teal label text (#001f1a), Inter at weights 400-800 (64px/800 hero), 6px button corners, 12px cards, and a dark 'code' band (#14161a) with syntax colors, all driven by --bulma-* CSS variables.", "sha256": "ad6ab675a05a926110edc61053d4c51ebd4190e1234088cd106dca870d6d6a4a", "bytes": 21213}, + "bumrungrad": {"name": "Bumrungrad International Hospital", "category": "Healthcare & Wellness", "description": "Bumrungrad International Hospital (bumrungrad.com/en) is a Bangkok hospital portal set in Open Sans with Thai, CJK, Arabic, Burmese and Khmer fallbacks, a medical green (#0bb288) for buttons and headings on white and #f0f0f0, small 3.5px-radius uppercase buttons, a warm brown-gold secondary ramp, and four colour-blocked quick-action tiles.", "sha256": "e48d55cd88270c11516f379bb8f775fd828f2d6594e355a4cc59077dbcb5e35f", "bytes": 16047}, + "bun": {"name": "Bun", "category": "Developer Tools & IDEs", "description": "Bun's site is a dense white technical page: Archivo 800 headlines (64px, -1.28px, with the word fast in #ff1f8f pink), system ui-sans-serif 17.28px/28.08px body in #525252, Martian Mono code and uppercase labels, square 0px-radius buttons with a 7px clipped corner, #0a0a0a dark buttons, #f6f6f6 code cards with 4px radius and #e2e2e2 hairlines.", "sha256": "3c0e30ad42ec40ed6dac772548e6d7e0afba9c7cfe9e17877ccba00c4cf79987", "bytes": 15236}, + "burberry": {"name": "Burberry", "category": "Luxury", "description": "Burberry's homepage measured at int.burberry.com: a white canvas (#ffffff) with a light-grey product band (#f6f6f6), black text (#000000), BurberrySerif at 20px and 24px for editorial copy, BurberrySansSerif for interface text, square corners with no measured radii, and an electric blue (#0000ff) used only for underlined text links.", "sha256": "5d0996344d0e8256dac0f282d5779055cd209e5e2680a852440499a52f9d85b0", "bytes": 10230}, + "burger-king": {"name": "Burger King", "category": "Food & Beverage", "description": "Burger King (bk.com) is a US ordering app-on-the-web: a warm cream canvas (#f8f1e7) with chocolate-brown type (#502314) in the rounded Flame typefaces, a flame-red (#d62300) pill CTA 50px tall, outlined brown pill buttons, white 16px-radius promo cards with a faint shadow, and a mobile-app tab bar.", "sha256": "029b1eaff979e09561a0a804164fa89d89d95927e496e2052e64837925647b81", "bytes": 12363}, + "burrow": {"name": "Burrow", "category": "Home & Furniture", "description": "Burrow (modular furniture, New York) sets a white #ffffff storefront with #262626 ink in Swiss Typefaces' Suisse Intl at weight 500 for display (40px/42.4px h1, 55–68px promo headlines) and 400 for 14–18px body, DM Mono uppercase eyebrows tracked 2px, small-radius rectangular buttons (3px sand #eaddc5 and white CTAs, a 2px #262626 Add to cart), coral #e46950 sale prices, and a warm charcoal #383633 footer with cream #f7eee3 text.", "sha256": "7e3e175f2c99aaa7669a0f57a39be3986dbd77bede4bb28cf7ad4f0561745eb7", "bytes": 27998}, + "butter": {"name": "Butter", "category": "Product & SaaS", "description": "Butter (butter.video) is an online video editor whose marketing page is a near-white #fafafa canvas with #0f0f0f type at 40% and 50% opacity tiers, set in DieGrotesk at up to 99.8px with slightly positive tracking, rounded 20px to 32px cards in #ededed and near-black #0a0909, a 3D keychain hero, and monospaced eyebrow labels.", "sha256": "ae35c8d002b48ee73f626cff112bd3f7a4402a8e2311d78b85193ef2f91a3a21", "bytes": 14940}, + "butterfly-book-house": {"name": "Butterfly Book House (สำนักพิมพ์ผีเสื้อ)", "category": "Thai Brands", "description": "Butterfly Book House (bflybook.com), a Thai publisher and bookshop built on WordPress, WooCommerce and the Flatsome theme: white canvas, black Thai text in the Srivichai typeface at 19.2px with 0.96px tracking, a soft pink #fcbdc0 for pill buttons, a deeper rose #cd6090 for section titles, pale pink #fdf3f2 footer, and 99px-radius SIGN UP and JOIN pills.", "sha256": "3f147df9d846bc9e358a3f7de141bc140a0b70b0046bdb1f1c78940ebee75ed8", "bytes": 15381}, + "buzzvil": {"name": "Buzzvil", "category": "Design Systems", "description": "Buzzvil's marketing site is a Korean-language, Pretendard-set ad-tech page: a near-black slate hero (#0e171f) under a white navigation bar, an 800-weight 78px headline filled with a salmon-to-white gradient, a single red (#f44336) inquiry button with 4px corners, glass-effect stat cards at 32px radius and pill-shaped filter chips on a mostly dark canvas.", "sha256": "52a2ae8639edccd40ac5763cddd9ef28604a153535670271005fc10aecbddab8", "bytes": 13305}, + "byd": {"name": "BYD USA", "category": "Automotive", "description": "BYD USA (byd.com/us, the US page that byd.com redirects to) is an EV marketing site in Montserrat 400 to 700 with a #252728 charcoal header and footer, a black #000000 utility bar, white content bands, full-bleed car photography, 4px-radius black and outlined buttons 44px to 47px tall, and underline-style form fields.", "sha256": "6f1ee5ee19f46f640e037cd9db7bf066ddfd384583da9bf5bc2422b4d3edb7a0", "bytes": 13751}, + "byredo": {"name": "Byredo", "category": "Beauty & Personal Care", "description": "Byredo's Next.js storefront is a near-silent black-and-white luxury system: full-bleed video and photography, a stencil BYREDO wordmark, and a single custom face, byredoSans, at weight 400 only — 24px/32px uppercase product titles with 0.6px tracking, 14px/20px body with 0.35px tracking, 12px/16px uppercase labels — over a #ffffff canvas with #000000 ink, #f5f5f5 product surfaces, square 0px black ADD TO CART buttons 44px tall and 4px-radius floating product cards.", "sha256": "9df3b991c9d50c308c4e9bcc693b79f0965e5df1aeedbc40514054c6cfdb4aa3", "bytes": 24612}, + "byteark": {"name": "ByteArk", "category": "Thai Brands", "description": "ByteArk (byteark.com), a Thai CDN and video-streaming platform: a deep navy hero (#090a25) over light #f9f9f9 sections, a condensed bold Thai and Latin face (AnantasonReno-Condensed) at 60px/700, a #2563eb pill login button, a blue-to-violet (#2d83db to #6957c5) trial button, and white 20px-radius cards with an indigo-tinted shadow.", "sha256": "2fae36bede1650797cf3d49dd6f0fded9d2ed2a3b7249915a35ce8308024c7e8", "bytes": 15548}, + "c-design-by-dylan": {"name": "Design by Dylan", "category": "Portfolio", "description": "©Design by Dylan (dylanbrouwer.design) is the Webflow portfolio of Dutch designer Dylan Brouwer: a near-black to grey scrolling backdrop, a 243px uppercase ABC Gravity Variable headline, Die Grotesk B at 53px/500 with -0.03em tracking, IBM Plex Mono 12px uppercase labels, an #ff6436 orange accent and 12.8px-radius project imagery.", "sha256": "b7c3b6208c2b71fa0b0d4e59e70b972a55992a98d0de38c5e931759aaf40fa8e", "bytes": 15670}, + "ca-gov": {"name": "State of California (CA.gov)", "category": "Design Systems", "description": "The State of California's portal at www.ca.gov: Public Sans in bold white-on-blue headlines, a single civic blue (#046b99) for buttons, links and the hero, dark slate-ink body text (#3b3a48) on white, 5px-radius buttons and sharp 3px-radius topic cards with a blue bottom rule, built on Bootstrap 5 variables plus a custom cagov stylesheet.", "sha256": "f732acd767962387be1f74c9140fd679aefeb25f2af26458342d1d4a1ee75a42", "bytes": 11986}, + "ca-mineral": {"name": "Broadcom", "category": "Design Systems", "description": "The Broadcom corporate site (broadcom.com): Inter at 44px/700 and 22px/800 headings with 0.25px tracking, 15px slate body #494a5e, link blue #005c8a, brand red #cc092f in the logo and gradient rule, white cards with 1px light borders, square buttons and 2px to 5px radii.", "sha256": "192253e07e6e1029da3d901e48ca4bb8f0214d55c4dfce8fe6bb957955fb532a", "bytes": 10424}, + "cableconnect": {"name": "Cable Connect (CConnect)", "category": "Thai Brands", "description": "Cable Connect (CConnect, cableconnect.co.th), a Thai internet and ICT service provider on a WordPress build with the The7 theme: white pages with red #dd3333 uppercase Kanit headings, a #d12525 hero slider, a #d73b37 square-cornered button, gold #ffb536 outlined button, 220px circular service photos and Thai-first copy.", "sha256": "d14dfe37c2f70c5487d078d2403fb175c73821516b6bb42bcc2d533ce97f8424", "bytes": 14683}, + "cadbury": {"name": "Cadbury", "category": "Food & Beverage", "description": "Cadbury UK (cadbury.co.uk) is a chocolate brand site built on Gatsby and Tailwind: Cadbury purple #4b0983 with a deeper #3b0073, gold gradient pill buttons, Gibson SemiBold uppercase headlines with wide +0.08em tracking at 64px, Gibson Regular body at 16px, 16px-radius lilac #e4daec recipe cards and full-bleed product-pack photography.", "sha256": "ed8dff68d6d49f8057cde8586924dd08c0ed78e578fd4fd1ea0fe43030603dc9", "bytes": 13740}, + "caeli-energie": {"name": "Caeli Energie", "category": "Tech & AI", "description": "Caeli Energie (caeli-energie.com) sells the Caeli One cooling module with a poster-like French site. Warm cream canvas #faf7f0, deep green ink #053725, bright headline green #005d3b, Altform at 400/700/900, a 124.444px uppercase 900 hero at -2px tracking and 4.44px-radius buttons.", "sha256": "010394731e5ee34228521a395c9800a85ea14050fabb79b4f653d134ac8c739c", "bytes": 15242}, + "cafe": {"name": "Cafe", "category": "Creative & Artistic", "description": "Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.", "sha256": "e26e9bf3a43cf547a985d1b879a8b4bb36033cb95185c6f900380a74e5722ddf", "bytes": 3068}, + "cafe-amazon": {"name": "Café Amazon", "category": "Thai Brands", "description": "Café Amazon (cafe-amazon.com) is the coffee-shop brand of PTT Oil and Retail Business, with a calm forest-green Thai site. FC Iconic at 400/700, primary green #436152, footer green #2b4635, near-black ink #181d27, white page, a 110px hero headline, 0px-radius buttons and cards with soft Tailwind-style shadows.", "sha256": "7cc1afb250889155e27eeb2cea1e8409285c9a2e5f9d42ffd063653d663afedd", "bytes": 15598}, + "caffe-design": {"name": "Caffè Design", "category": "Agencies & Studios", "description": "Caffè Design (caffe.design) is a playful 3D office tour by Design Kills S.R.L. of Milan: one full-viewport rendered room, white page background #ffffff, black ink #000000, coral accent #ff545a, GT Haptik at 400/500/700 with Argent Pixel CF for inputs, and a hand-lettered speech bubble.", "sha256": "a067a7bbed9de22213252eab393a7166fa96122428a8b609f5d0907c377e805f", "bytes": 11531}, + "cal": {"name": "Cal.com", "category": "Productivity & SaaS", "description": "Cal.com is a grayscale scheduling brand: a #f4f4f4 page with white (#ffffff) rounded cards, near-black #242424 ink and CTA fills, #898989 secondary text, the open-source Cal Sans display face (64px/600, tight 1.1 leading) over Cal Sans UI Variable Light body, 12px card corners and a single #0099ff accent used sparingly.", "sha256": "e2754db65bae14da1818ee0a3a770c7249c521aa181bedf49c569b5ef87fa5eb", "bytes": 18513}, + "calendly": {"name": "Calendly", "category": "Productivity & SaaS", "description": "Calendly's marketing home: warm magnolia #fcfbf8 canvas and #f5f3ee sand panels, midnight-navy #071a31 headlines and buttons (hover #0e396a), slate #5f6d77 body copy, a #84c1ff announcement bar and #c3dffe sky cards, Calendly Sans 500 headlines at 72px/-2px over Geist 18px/25.2px body, 16-24px rounded corners.", "sha256": "d4f861b2799b0cc69da7dbb52be8b051d822a4001550e4c13d7cedd0e121a7df", "bytes": 14338}, + "caltex-thailand": {"name": "Caltex Thailand", "category": "Thai Brands", "description": "Caltex Thailand (caltex.com/th): white canvas #ffffff, Caltex red #e62f46 pill buttons with 25px radius, deep teal #01526d headings and footer, ITC Franklin Gothic Book, Medium and Demi type, 5px-radius promo cards with #e5e5e5 borders.", "sha256": "71f72284c31b08117db7824dca2865ddb451c6674ea5da4f9cca162eec6ab4a8", "bytes": 11490}, + "cambridge-university": {"name": "University of Cambridge", "category": "Education", "description": "University of Cambridge (cam.ac.uk) home page: Bootstrap-based, Lato 400/500/700 on a #f8f9fa and #ffffff page, stylesheet primary teal #6bbbae, secondary magenta #e5007d, pink and teal-tint buttons with 0px radius, a black caption-bar style, a navy #010a14 footer and a 56px bold h1 on a white panel over a photograph.", "sha256": "ffe4dd3b4a2d8817698e3adf10066d6a418cefa5629cb8be1cb289f45b091020", "bytes": 14435}, + "canada-ca": {"name": "Canada.ca", "category": "Government & Nonprofit", "description": "Canada.ca, the Government of Canada's main website, following the Canada.ca design system: Lato headings (41px/500 white hero title, 29px/700 #333333 section heads) over Noto Sans body at 17-20px, #333333 text on #ffffff with #f5f5f5 bands, underlined #284162 links that hover to #0535d2, square #26374a navy buttons that hover to #444444, a 4px-radius 2px outlined 'All services' button and a #26374a footer.", "sha256": "c1e0b367089350c4661b0b8c41319ca7bdd57e1147442bdae9f6965272d92af4", "bytes": 19288}, + "canon": {"name": "Canon Global", "category": "Consumer Electronics", "description": "Canon Global (global.canon/en) is a white #ffffff and pale grey #f5f5f5 corporate site set entirely in Roboto 400/700, with #333333 text, a Canon red #be000b accent bar under 46px bold section headings, square 0px corners everywhere and #c8c8c8 hairline borders.", "sha256": "45e712f3e2cd52615eb513f7d7450a25ab92cbb031b7e7fec9b8f2c2e36e45ee", "bytes": 15914}, + "canva": {"name": "Canva", "category": "Product & SaaS", "description": "Canva (canva.com) marketing home page: Canva Sans at 400/500/600 with -0.01em tracking on large type, brand purple #8b3dff, near-black ink #0f1015, a white page under a purple-to-aqua gradient hero, 12px-radius buttons with layered inset shadows and 9999px-radius tab pills.", "sha256": "de896ea0fd1732abe4364d7c00cfe90f947e90f7b5b9c4a00e35ad12c9d9cda8", "bytes": 15398}, + "capacities": {"name": "Capacities", "category": "Productivity & SaaS", "description": "Capacities (capacities.io), \"a studio for your mind\": a warm-neutral note-taking landing page. Inter 700 headline at 64px/67.2px with -1.92px tracking, system ui-sans-serif 16px/27.2px body in #5c5959, #454447 charcoal 8px-radius Start Free buttons, white 12px–16px cards with #ecebea borders, and #fbfaf9 alternate sections.", "sha256": "d97d7c75b560734cef08b87e0bdb2664d2285c8dc0502e3126f3f12bd914011c", "bytes": 15174}, + "capcom": {"name": "Capcom USA", "category": "Gaming", "description": "Capcom USA (capcomusa.com), the site of Capcom U.S.A., Inc. linked from the capcom.com region splash: Roboto 300/400/500 on a #f0f2f5 and #ffffff page, Capcom blue #1059a4 for section titles and the social bar, black ink #000000, a full-width hero carousel, 4px-radius cards and a Bootstrap grid.", "sha256": "7a9ef2d46fe68e4cc613675e8217c1d9bc31ae430a0f136c6c9aa3830f82ebba", "bytes": 13547}, + "capital-one": {"name": "Capital One", "category": "Banking & Insurance", "description": "Capital One (capitalone.com) home page: Optimist at 300/400/600 with Helvetica Neue fallbacks, interactive blue #0276b1, near-black ink #141414, #f4f4f4 and #ffffff surfaces, 40px light headlines, pill and 4px-radius buttons, a sign-in strip above a photographic hero and light illustrations.", "sha256": "bed52539da1b5e80206872e03c9bb288f58ef29d8c2fc48f7628550fe88f726e", "bytes": 15294}, + "capitolium": {"name": "Capitolium", "category": "Fashion & Apparel", "description": "Capitolium (collabcapitolium.fr) is the capsule-collection site of TéFéCé x Stade Toulousain: a cinematic chaptered story in warm cream #f0e3cf and slate #58595b with gold #c3a677 accents, a condensed all-caps display face called gin at 93.1315px, Times body copy, square 0px-radius buttons and a gold script tagline.", "sha256": "9d3aebbf8c1ad0065ff251685df1e5651cae8c11ea372e814947eaca410b41eb", "bytes": 14293}, + "cappen-4": {"name": "Cappen", "category": "Agencies & Studios", "description": "Cappen (cappen.com) is a digital design and development studio's portfolio: a monochrome #fcfcfc and #000000 page, HelveticaNowDisplay 900 uppercase at 124.444px with -4.97778px tracking, PP Editorial New 200 serif text, Martian Mono 8.88889px uppercase labels, 3.56px-radius work tiles and no chromatic accent.", "sha256": "d68ea393c6f3b04572a67997a7c8237a1907e599dbf443cb3ea3cb40809b0b43", "bytes": 12517}, + "carabao": {"name": "Carabao Group", "category": "Thai Brands", "description": "Carabao Group (carabaogroup.com), the global corporate site of the Thai energy-drink maker: white page with textured grey bands, Carabao green #009560, red accent #e60501, DB Adman X body at 16px and DBImpactoX 700 display at 44px with 1px tracking, a 60px-radius outlined pill button and a dotted green world map.", "sha256": "af20cb7bb856e676ca78c57b1f46420a10795bd56ff08488ec56155b2ce4bfdc", "bytes": 12330}, + "carasti-thailand": {"name": "Carasti Thailand", "category": "Thai Brands", "description": "Carasti Thailand (carasti.com/THL/en), a monthly new-car subscription site: white page with #f6f6f6 and #f9fafb panels, Carasti blue #347dc9 buttons with 6px radius, slate ink #434343, a Gilroy-named family at 400/600/700 with a 53.376px bold hero heading, a translucent header and grey car tiles with baht prices.", "sha256": "24335972d1e81fa43b827021721d500a77e594d183e193602782b94fd1890bcd", "bytes": 15327}, + "carhartt": {"name": "Carhartt", "category": "Fashion & Apparel", "description": "Carhartt (carhartt.com, measured on the EU edition en-eu): workwear storefront in Carhartt gold #feb913, black and charcoal #3a3a3a on white, Tungsten condensed uppercase headlines at 52px/700 with TradeGothicNextLTPro text, 5px-radius gold buttons, hairline-bordered 10px-radius product cards and full-bleed workwear photography.", "sha256": "e9a800557e0d12282648dd5af21e4dd2b2cae9020ab2e8148376482b2a2aa4fc", "bytes": 15577}, + "carnegie-mellon": {"name": "Carnegie Mellon University", "category": "Education", "description": "Carnegie Mellon University (cmu.edu): white canvas with black utility bar and Carnegie Red #c41230 wordmark plate, Source Serif Pro 600 headlines at 56px and Open Sans 16px/27px body, square 0px corners, flat surfaces with no card shadows.", "sha256": "3103cc434ee9005d874c5c92c43a8e527533690f78ed1d9437307d958db8a7e6", "bytes": 17038}, + "carrd": {"name": "Carrd", "category": "Design & Creative Tools", "description": "Carrd's carrd.com is a dark one-page site: #24252d charcoal canvas, a purple-to-blue gradient hero, Arial throughout (56px/700 headlines at -1.4px tracking, 16px/28px body in 75% white #ffffffbf), teal #33ada9 6px-radius buttons that hover to #39c1bc, and ghost buttons drawn with a 2px inset white ring.", "sha256": "195581b7bba99fc950c2fc0f73a9531d76b54ecd766eef75c7355310a0abd23f", "bytes": 11043}, + "cartier": {"name": "Cartier", "category": "Luxury", "description": "Cartier's US site (cartier.com/en-us) pairs two bespoke Yorgo&Co typefaces — Brilliant Cut, a wide uppercase sans (21.049px/600 titles, 12px/400 nav at 0.8px tracking), and Fancy Cut, a serif for prose (16px/400/24px at 0.5px) — on a white #ffffff canvas with warm-black #1d1c1c ink, square #1d1c1c buttons that invert to white on hover, white-outlined CTAs over full-bleed video, #f9f9f9 product wells and a 3px Cartier red #d50032 underline that slides in under menu items.", "sha256": "9f94b1c7dd56938d2221db4071e4208592bf415ee2fa78b1331af7562ec6e18a", "bytes": 19408}, + "casper": {"name": "Casper", "category": "Home & Furniture", "description": "Casper (casper.com) mattress store: white canvas, navy #012169 / #1e306e text and pill buttons with 32px radius, a red #cb372a sale accent, NewKansas serif headlines and Calibre 20px/300 body, soft blue-tinted card sections with 0 18px 50px shadows.", "sha256": "1fa353ae34067522b18bb5e5e803b6a2a746e75390edee821996a2fead2b7d5f", "bytes": 17419}, + "cat-motors-motorbike-scooter-rentals": {"name": "Cat Motors Motorbike & Scooter Rentals", "category": "Thai Brands", "description": "Cat Motors (catmotors.net), Chiang Mai motorbike rental: #f7fafc canvas with #edf2f7 panels, slate #4a5568 / #2d3748 / #1a202c text, Source Sans Pro 20px/32px body with 700 headlines, a full-width #377e99 teal CTA bar, 3px card radius.", "sha256": "6504d88151d5f8d2a9ea59cf1cef74dd79c60d1ccf1be16445fad70ce32c6c3e", "bytes": 16287}, + "cathay-pacific-g": {"name": "Cathay Pacific", "category": "Airlines", "description": "Cathay's US site (cathaypacific.com/cx/en_US): white #ffffff and #f9f9f9 canvases, #2d2d2d ink, deep Cathay green #2c4036 buttons and footer (hover #042728), jade #367878 links, GT Walsheim 28px/36px headlines over Cathay Sans EN 16px/24px body, 8px button corners and 16px cards with a soft #bcbeb0 glow.", "sha256": "12f73d0bb60bf47a8ae71b3161a328c27c927f8a36357173f591e023398e0ade", "bytes": 14631}, + "cathy-dolle-portfolio-1": {"name": "Cathy Dolle", "category": "Portfolio", "description": "Cathy Dolle (cathydolle.com), interactive designer portfolio: pure #ffffff canvas with #000000 text, a single neuemontreal typeface at 11px in 400 and 500 uppercase, a 12-project list and slider over grayscale 3D imagery, square corners, no shadows.", "sha256": "4f9986afa2c5a879d04e6e2fc04426bdc900bc2ba0279164e902dd496ac76f4c", "bytes": 13939}, + "cbre": {"name": "CBRE", "category": "Real Estate & PropTech", "description": "CBRE (cbre.com): corporate real-estate site on white with dark slate #435254 hero panels, CBRE green #003f2d headlines in Financier Display (48px, 64px), Calibre 16px/22px body, a bright #17e88f accent dash, square corners and no shadows.", "sha256": "f3023dca8443ca7241cc069383701b43b4afad40d190859e01286327ae1c7a5c", "bytes": 16242}, + "cd-projekt-red": {"name": "CD PROJEKT RED", "category": "Gaming", "description": "CD PROJEKT RED (cdprojektred.com/en): near-black #110b06 canvas, cream #f5eae8 text and CD PROJEKT red #f40024 header and headlines, Proxima Nova extra-condensed 800 uppercase at 80px, 99px pill buttons with 2px red outlines, no shadows.", "sha256": "b4ae597c2e34d7ea2db9acfbf7929848376aa2a6ab95d12b06d4bba937e06ae6", "bytes": 15124}, + "cdg-group": {"name": "CDG Group", "category": "Thai Brands", "description": "CDG Group (cdg.co.th/website), Thai technology group site: white canvas, deep green #16351a text and footer, light cyan #bbe9f9 labels over photography, Aktiv Grotesk Ex uppercase headings (72px, 40px) with Anantason Reno Expanded Thai body, 8px-radius photo tiles.", "sha256": "d238ef0ba54687cecdd0dbc835574ddf913e5c6289c05d99c0ec87b16a9d7a76", "bytes": 14996}, + "cdiscount-jumping-max": {"name": "Cdiscount", "category": "Retail & E-commerce", "description": "Cdiscount (cdiscount.com): French marketplace on white with a #3732ff blue header, #ff1e3c red accent, #293847 text, Hind Madurai 14px/21px body and 21px/600 section titles, 8px-radius product cards and pill chips, dense product carousels.", "sha256": "ac6269f751edbb3e72b84eae7d97f9aadb4028886140b729f565ebd14c20b8e8", "bytes": 16160}, + "cea": {"name": "Creative Economy Agency", "category": "Thai Brands", "description": "Creative Economy Agency (cea.or.th), Thailand: white header with CEA orange #ff5100 uppercase nav, near-black #1d1d1b feature section, #575756 body text, Poppins and Kanit at 16px/23.2px with 700 uppercase headings (39.0625px), square buttons, 12px-radius tabs.", "sha256": "fbc2e99353d3b792c98adef9d8a40c07129f8f9b2750b8772e2b22b100d24ccf", "bytes": 15051}, + "centara": {"name": "Centara Hotels & Resorts", "category": "Thai Brands", "description": "Centara Hotels & Resorts (centarahotelsresorts.com): white canvas with black text, Centara red #b5121b buttons and accent words, Cardo serif headings (42px) with Karla body at 16px/24.48px and -0.4px tracking, cream #f8f6f3 bands and square-cornered buttons.", "sha256": "3b228c69ca9cd507e71f18b246d9a406e21d9add3556d5792dc5419d9c217272", "bytes": 15160}, + "centara-the1": {"name": "Centara The 1", "category": "Thai Brands", "description": "Centara The 1 (centara1card.com), Centara Hotels & Resorts loyalty portal: #f7f7f7 canvas with black footer and white header, black Open Sans text at 14px to 15px, Centara red #b5121b and #a12a23 square buttons (44px to 58px tall), 4px radii, flat surfaces.", "sha256": "119ecd5ff5b1167d1b0f51ef26875095bdf23987f340cbdf9b2875a1eca18809", "bytes": 13123}, + "central": {"name": "Central Online", "category": "Thai Brands", "description": "Central Online (central.co.th, Central Department Store's e-commerce site): white #ffffff canvas with blush #fbeeee sale bands, #333333 cpnFont body text (16px/24px, 14px UI), 30px/700 section heads, condensed Bebas Neue for square black #000000 'EXPLORE MORE' buttons (26px, 16px padding, 0px radius), brand names and -% badges, centralSangBleuFont 48px serif promo headlines, red #ff0036 prices and #f50a3c 'Sale', pill filter chips.", "sha256": "f94d9e12357df86dc3cd7a4814319bfe364160c17cbc13cad49669b00c27a9ef", "bytes": 23813}, + "central-embassy": {"name": "Central Embassy", "category": "Thai Brands", "description": "Central Embassy, Central Group's Bangkok luxury retail flagship, uses a pure black canvas (#000000) with off-white text (#f0f0f0), Raleway in uppercase with 1px tracking (900 weight at 24px for headings, 600 at 10px for navigation), square corners and campaign imagery as its only colour.", "sha256": "9b669337ac1e22a7174c89398ea34072022f8bd6b40aed1627df3b22d6a58698", "bytes": 9919}, + "central-food-retail": {"name": "Tops", "category": "Thai Brands", "description": "Tops is the corporate site of the Thai supermarket chain TOPS, part of Central Retail. It pairs a pure white canvas and black ink with the brand's signature red #ff1301, a CPN typeface used at 16px/700 for body and 32px/700 for headlines, full-bleed store photography under a dark scrim, and almost no rounding (1.75px) apart from circular carousel dots.", "sha256": "ff586d52a484778b3d7014eea32339cb88ab9ae8cb1a06d357c61ad52e587d4f", "bytes": 8706}, + "central-group": {"name": "Central Group", "category": "Thai Brands", "description": "Central Group (centralgroup.com/en/home): monochrome conglomerate site on white and #f1f1f1 with black and #474747 text, the CPN typeface (32px/700 statement, 16px/24px body), full-bleed photography with white labels, 10px frosted cards and no brand accent color.", "sha256": "89497f14c2bfc0d5d604e9c1799a432e42f54f368f16c14d50ef3518c960f753", "bytes": 14628}, + "central-pattana": {"name": "Central Pattana", "category": "Thai Brands", "description": "Corporate site of Central Pattana (CPN), Thai retail-property developer. White canvas, black ink, a single muted gold #b39656 for buttons and section titles, one custom sans (CPN, 300/400/700), 3px square-ish buttons, uppercase navigation and headings.", "sha256": "7f8c4dc2089a236e7e1fb0fa8c31c2d21e165fa14e912bc726954bf1a399fbad", "bytes": 15016}, + "central-tham": {"name": "Central Tham", "category": "Thai Brands", "description": "Central Tham (centraltham.com) is Central Group's sustainability and community project site: white canvas, near-black #1c1916 bands and buttons, a leaf green #60a031 accent, the CPN typeface at 110px bold for the hero, 5px buttons and 20px photo cards.", "sha256": "bee316f14c2b0311f744836d5a8eae8fae1913db9143a5f4cb451dcb916e3559", "bytes": 11316}, + "centralworld": {"name": "centralwOrld", "category": "Thai Brands", "description": "centralwOrld, Bangkok's large lifestyle shopping complex, is a black-and-white editorial site in the custom cpn typeface (700 weight, 48.0004px section headings, 126px display words) with a white DISCOVER button, uppercase 12.25px tracked labels, and three rootVar accents: red #ed2939, lime #dfff0d and blue #0f4dbc.", "sha256": "9220a6e1ab2670b75d6ca11b47d664949b244e4e4aed1b9ad650816a863e0182", "bytes": 10130}, + "century-21": {"name": "Century 21", "category": "Real Estate & PropTech", "description": "CENTURY 21 Real Estate US homepage: near-white #fdfcfc canvas, charcoal #262627 buttons with square corners, #121212 header, a full-bleed kitchen photo hero with a 56px Bold headline, and listing cards with 4px/6px radii and soft two-layer shadows.", "sha256": "a738fce1ca592153010c5f22342d9677c655d3666546643b504ec9a87145c8df", "bytes": 15381}, + "cerave": {"name": "CeraVe", "category": "Beauty & Personal Care", "description": "CeraVe US homepage: white canvas, navy #003057 and #0e3353 text and footer, CeraVe blue #0772ba actions, square 0px buttons in DIN-Bold uppercase with 1px letter-spacing, Open Sans body, and a rainbow of nine category-tab fills under product carousels.", "sha256": "a15af6caff1f8aef6f289c4fd6558ee4480f5f1758679ccc5774fe7a2f16931a", "bytes": 15210}, + "cerebrium": {"name": "Cerebrium", "category": "Tech & AI", "description": "Cerebrium serverless GPU homepage: dark #101421 hero with a magenta ribbon, white rounded content sheet, navy #172b76 text, pink #ff488b buttons with 7px radius in 13px Suisse Int'l Mono caps, ABC Favorit Trial light headlines at 79.8px.", "sha256": "109603313acefc06187e89db95ca09131c2b50d2b91bcf3edb3113750b6f58c9", "bytes": 15119}, + "ch3-thailand": {"name": "Channel 3 Thailand (3Plus)", "category": "Thai Brands", "description": "ch3thailand.com redirects to 3Plus (ch3plus.com), Channel 3's streaming site: near-black #00040d canvas, #f2f6fd ink and a white-fill 'play' button with dark text and 4px radius, Thai type in the DB Heavent family at 20px and 28px.", "sha256": "c2af527b79e38efdfa9d4cc8ef7e915bba72ea45c91426ea8c20946b3af9f620", "bytes": 13127}, + "chakra-ui": {"name": "Chakra UI", "category": "Frontend Frameworks", "description": "Chakra UI is the accessible React component system: a white canvas, #52525b body copy and #09090b headings in Wix Madefor Text on the site (Inter in the library), a teal primary (#0d9488), 4px component radii with 6px cards, 1px #e4e4e7 outlines, 40px-tall 14px/500 buttons, and recipe-driven tokens built on Panda-style createSystem.", "sha256": "a7b78cf6452e599eead3048ddfefde9ea2bb9a8cf02f9584dbe0270ed858b9ec", "bytes": 19561}, + "champions-for-good": {"name": "Champions for Good Club", "category": "Product & SaaS", "description": "Champions for Good Club homepage: a dark purple #23002b hero with giant Druk Condensed lettering in light purple #e894ff, a #fbfbfb canvas, brown #291900 and green #002629 bands with yellow #ffac47 and mint #94ffe4 text, and Neue Montreal 15px to 16px interface type.", "sha256": "3a8483ecc5e01f20a38cd421c64fb897bf6b3ed279009ae44dbbed3995d4a7a2", "bytes": 13132}, + "chanel": {"name": "CHANEL", "category": "Luxury", "description": "CHANEL's US home page: a white #ffffff header over a stack of full-bleed campaign images, #1d1d1d ink, uppercase abchanel-2022 captions at 30px/600 with 1.8px tracking, 11px/600 'SEE MORE' buttons 48px tall with square 0px corners (hover #f1f1f1), Helvetica 14px/300 body text in #767676, and no color beyond black, white and greys.", "sha256": "4d5b915cc45d5ca544b09c643b2b6ea24602d36745e1d0789465527aa78ecc99", "bytes": 11507}, + "channel-8": {"name": "Channel 8 (thaich8.com)", "category": "Thai Brands", "description": "Thai news and entertainment portal of Channel 8 (RS Public Company Limited): light #f2f3f5 and white pages, #333333 text, slate #525b6e section titles, a #0484cf blue menu bar, Prompt type at 13px to 19px, and white cards with 1px #e6e6e8 borders.", "sha256": "6b0660dc4b9aea4c9148f128037eebe5d97974ce1fb4dcad89f65a871b921ee3", "bytes": 12886}, + "channel-9-mcot-hd": {"name": "MCOT TV (9 MCOT HD)", "category": "Thai Brands", "description": "tv.mcot.net/tv/th, the MCOT operator portal for 9 MCOT HD: deep violet #190a22 canvas, #8b36bc purple pill buttons, a #5d0e8b sub-nav band, black #000000 top bar, white Kanit text at 16px and 48px, 8px and 16px card radii.", "sha256": "e1aae0cb1933c6a8731f0edb4d37b47e2f63a58373a50d5905ff0a9237730906", "bytes": 14136}, + "channel-g": {"name": "Channel G Company Limited", "category": "Thai Brands", "description": "cng.co.th, Channel G's Thai IT-services site: a full-screen slide deck with white Prompt type at 72px/700 and 18px/300, 0.5px tracking, slides filled #71911b, #9a004c, #ca9800, #11769e and #790707, a white side rail and 2px white outline pill buttons.", "sha256": "7b3030421ca523c41f5337e0db8cfd9131cf254ea68281678babd718d231cd10", "bytes": 12655}, + "chao-phraya-express-boat": {"name": "Chao Phraya Express Boat", "category": "Thai Brands", "description": "Chao Phraya Express Boat Co. (เรือด่วนเจ้าพระยา) site, built on Wix: white canvas, navy #0b4280 full-width sections with white Kanit-based text at 40px and 18px, square 1px-outline buttons, a 177px header with black menu links that fade to #959595.", "sha256": "4b0827a9486eb144e28979e0f60016f590784d36695f77b06abbe226e27e3ad6", "bytes": 13705}, + "character-ai": {"name": "Character.AI", "category": "AI", "description": "Character.AI logged-out landing page: #f4f4f5 canvas, near-black #131316 buttons with 12px and 30px radii, atHauss type at 36px/600 with -0.72px tracking, a 24px-radius sign-in card over a 32px-radius illustrated hero image, and grey G-scale tokens.", "sha256": "5ee8313ce3cda5d8394c039ebb99bde3b77d31faca6ea319f322807bf4207e09", "bytes": 14589}, + "charan": {"name": "Charan Insurance", "category": "Thai Brands", "description": "Charan Insurance (บมจ.จรัญประกันภัย) Thai homepage: Mitr headings at 30.4px and Noto Sans Thai text, royal-blue ink (#4054b2) on white over a #ecebe9 page, cyan (#22b5ce) accent on the submit button and active menu, flat boxes with 2-3px radii, a striped contact table and a row of vertical product banners.", "sha256": "79ad33bff40561c69ceabb2b832b9d15ca38e540a2181b0fb6f7a1505982f734", "bytes": 11183}, + "chargepoint": {"name": "ChargePoint", "category": "Energy & Climate", "description": "ChargePoint's EV-charging marketing site: a white canvas with charcoal-plum ink (#413d46), a deep ocean-blue pill CTA (#0f588a, 50px radius), orange (#ff7a14) pattern heroes and plus-sign bullets, set entirely in Gotham Narrow SSm at light weight 300, with 16px soft-shadowed cards.", "sha256": "70abf9c9215899a0e12dbabe75c9e3411b51d7bb72c10b0b58b7c586ff8470d1", "bytes": 15630}, + "charity-water": {"name": "charity: water", "category": "Government & Nonprofit", "description": "charity: water's donation-first site: full-bleed documentary photography, Kazimir Text serif headlines at 46px/52px, Proxima Nova UI with widely tracked uppercase labels, a single Jerry Can yellow (#ffca0a, hover #ffd53b) on 4px-radius buttons with #222520 text, warm cream bands (#f8eed3 fading to #faf7f0) on a white (#ffffff) page, and a white donation card with 48px amount buttons.", "sha256": "98d3dbfc3748ec31ecea3b89b0e12b128a51cc5d9cb3e189030f932c8c7b845a", "bytes": 25136}, + "charles-schwab": {"name": "Charles Schwab", "category": "Banking & Insurance", "description": "Charles Schwab (schwab.com, measured at https://www.schwab.com/): a white canvas with near-black #111111 text, the proprietary Charles Modern family at 17px body and 42px light headings, a burnt-orange #b05e0d call-to-action with 24px radius and a teal-blue #037dae secondary button, on a slate #33424c header bar.", "sha256": "617ef33927720eeb6dfbdb736d7b442de889e416efa80e3b9e15c8ca12dcf3b1", "bytes": 11769}, + "charlotte-tilbury": {"name": "Charlotte Tilbury", "category": "Beauty & Personal Care", "description": "Charlotte Tilbury's US storefront: a white canvas with Night Crimson ink (#3a080a), a blush promo strip (#fde8e0), outlined square-cornered uppercase buttons, red sale prices (#e41929), Vanitas display headings over Helvetica Neue LT Condensed and Helvetica Neue LT, and full-bleed campaign photography.", "sha256": "d2b078f24eab618f0f6a0ffa5d9dd37962f1862dc7b78c0d3b1af6e703a57ac4", "bytes": 16667}, + "chatramue": {"name": "ChaTraMue", "category": "Thai Brands", "description": "ChaTraMue (Original Thai Tea Since 1945): a white, near-flat storefront set entirely in Nunito at weight 300, with charcoal #3a3a3a actions, #333232 body text, near-square 0px and 2px corners and no shadows, letting red and green tea packaging supply all the color.", "sha256": "d89acf4df1fccbbbf7376211087fee23f44bba053108f760c0b5f28922d937f8", "bytes": 11842}, + "chatuchak": {"name": "Chatuchak Market", "category": "Thai Brands", "description": "Chatuchak Market (chatuchakmarket.org), a visitor guide and tour-booking site for Bangkok's weekend market: Lato uppercase headings, signal red #f44337 top bar, pill BOOK A TOUR button at 99px radius, 12px gray cards and full-bleed market photography.", "sha256": "46a68136b981f84afeb32c314fe48996ab8f50ee0a95e18d33b95d2db345a637", "bytes": 10310}, + "chegg": {"name": "Chegg", "category": "Education", "description": "Chegg.com home: white #ffffff canvas, #222222 ink, Aspira Webfont throughout (48px/900 hero, 40px/700 claims), Chegg orange #eb7100 with a #e65700→#eb7100 gradient on 32px-radius 'Join now' buttons, a peach #fff6f0 steps strip, a shadowed ask-a-question card and a #fbfafb footer in #302c41.", "sha256": "3c39e5cd330918046f3bd7f30124d999c45fc0d03360a4cf8e237092f0290aff", "bytes": 10679}, + "chew-productions": {"name": "CHEW", "category": "Portfolio", "description": "CHEW (chew.productions), a London creative studio for gaming and esports film: a pure black canvas (#000000) with white Messina Sans type in uppercase, 14px captions, 108.8px bold hero titles at -5.44px tracking, a #171616 menu panel, and full-bleed project video instead of buttons, cards or shadows.", "sha256": "d89a6d67f7d6e871e6df987d64f52e72fbe71c10a4c30e8e02968643c8bc6392", "bytes": 11811}, + "chin-huay": {"name": "Chin Huay", "category": "Thai Brands", "description": "Corporate site of Chin Huay Public Company Limited, a Thai canned fish, dried fruit and snack maker, in Poppins 400/600 with an 85px uppercase hero, brand magenta #ec008c, forest green #558257 outlined pill buttons, pale lime #e9f2d0 bands and heavily rounded organic shapes (15px to 97px).", "sha256": "900a16aba70c6c4c56e29f72cb533332e2e33164ce9ee73764471caafb81ed93", "bytes": 12081}, + "china-mobile": {"name": "China Mobile Limited", "category": "Telecom", "description": "China Mobile Limited's English investor and corporate site: a white page with #f9f9f9 bands, #333333 and #666666 Roboto Light text, a three-color accent system of blue (#008ed4), magenta (#dc1779) and green (#8dc642) with pastel tint cards at 8px radius, and a header menu whose links fill blue on hover.", "sha256": "83907af574b6b7c0505993a6a84e0f3903abd07656735aa8912ccc2ec76a3360", "bytes": 12256}, + "chipotle": {"name": "Chipotle", "category": "Food & Beverage", "description": "Chipotle Mexican Grill's web system as measured on chipotle.com — a pure white #ffffff canvas, burnt-brown #451400 ink used for nearly all text and headings, a chili-red #ad2118 ORDER NOW button and a mustard-gold #b68207 catering button, uppercase \"Trade Gothic LT Bold\" headlines (33.6px/500 h1, 48px section titles, 24px nav) over Nunito 18px body copy, 4px button corners, 14px reward cards, and a signature left-to-right color-wipe hover on every filled button.", "sha256": "52f68cf34749aa06c126a7457745291c83ed194703eb08b19f67ff9b2a24b6eb", "bytes": 28851}, + "chipsa": {"name": "Chipsa", "category": "Agencies & Studios", "description": "Chipsa (chipsa.design), a WebGL and 3D design studio's site: black text on white (#ffffff) and light grey (#f4f4f4), all-caps PPRightGroteskText at weight 800 for the h1 (40px) and h2 (60px) with PPNeueMontreal 500 body at 28px, square-cornered buttons, 6px-radius cards, 1px black underlines and -0.12px tracking throughout.", "sha256": "5374dbf9c721c18221b0cc25f0d90d1e0d497e076654d4e673b3dd8df2075a30", "bytes": 14489}, + "chopard": {"name": "Chopard", "category": "Luxury", "description": "Chopard's US e-commerce site: a near-black (#010307) and off-white (#fefefe) luxury palette with light-grey (#f2f2f3) product tiles, uppercase Engravers labels at 1.6px tracking, Walbaum serif headings at 36px, Helvetica Chopard body text, 2px-radius black DISCOVER buttons and a full-black Services band.", "sha256": "abcd5a59cbb8c44af2f1e611b83818e91c9b85f4d7cb628324192f8e3369cd9a", "bytes": 15284}, + "christian-louboutin": {"name": "Christian Louboutin", "category": "Luxury", "description": "Christian Louboutin's US homepage is a black-and-white shell around campaign photography: NB Akademie 12px body with 0.7px tracking, serif Loubi capital titles, square 36px outlined white buttons with 1px borders, a measured red #ce0a2c panel, and a #ffffff canvas.", "sha256": "de028089260d81a4dfab1e5d4000475505813ed899bf4eeab2b2b4f3cda09753", "bytes": 9713}, + "christies-international-real-estate": {"name": "Christie's International Real Estate", "category": "Real Estate & PropTech", "description": "Christie's International Real Estate's home page: white and pale blue-grey (#f2f5f7) panels with near-black ink (#171a1c), a champagne-gold (#c9ac77) square Gilroy button, Playfair Display serif headings at 32px and 46px, Gilroy body text tracked at 1.6px, full-bleed property photography and a dark footer.", "sha256": "5fa2a59122b21d1251fe881edc738b9a1ce0605e7f80461f9b6a55671323f214", "bytes": 14070}, + "chromatic": {"name": "Chromatic", "category": "Developer Tools & IDEs", "description": "Chromatic's chromatic.com marketing site, built with its own Tetra style guide: dark slate #141c24 canvas, white and #eef2f6 Nunito Sans text (48px/600 headlines), blue #006deb pill CTAs with 42px radius, outlined white pills, an uppercase tracked DEVELOP / TEST / DELIVER band in yellow #ffae00, cyan #37d5d3 and purple, and colored 8px-radius stat cards.", "sha256": "42ef3bffb76825208e6b30f5145a1a998ab280fa7a566099291f2088d8a07e7f", "bytes": 12381}, + "chubb": {"name": "Chubb", "category": "Banking & Insurance", "description": "Chubb's US home page: a white canvas with black text, a violet accent (#6e27c5) used on emphasis, rules and card underlines, PublicoHeadline serif for the 62px hero and 40px headings, Lato 16px body at 26px line-height, square outlined buttons, and 0.2-alpha card shadows over documentary people photography.", "sha256": "23d81e9575c404fa7508b8464e17b982a588b35d414e0966b1cacbda5359126e", "bytes": 12353}, + "chulabook": {"name": "Chulabook", "category": "Thai Brands", "description": "Chulabook (ศูนย์หนังสือจุฬาฯ), Thailand's university bookstore online: white canvas, hot-pink #ee5294 headings and outlined buttons, Montserrat with Kanit for Thai, 6px outlined buttons, 8px cards and book-cover-led product grids.", "sha256": "d0514630219d9744c9095a1488227e03670608f10ee6447c63d65c2e19039752", "bytes": 10252}, + "chulalongkorn-university": {"name": "Chulalongkorn University", "category": "Thai Brands", "description": "Chulalongkorn University's English home page (chula.ac.th/en): white canvas with black and #333333 text, Chula pink (#da5f8e) gradient cards and accents, a custom CHULALONGKORN typeface at 100px and 80px with Anuphan 18px body, 12px to 20px card radii, pill buttons and a #141414 footer.", "sha256": "888b20af3841b16d3edb583b845cff1cc2a09aba4725f4a7bf6ae2977fc29a5a", "bytes": 16186}, + "ciao-energy-launch-website": {"name": "Ciao Energy", "category": "Food & Beverage", "description": "Ciao Energy's French launch site for a low-sugar energy drink: a pure black canvas with white Geist Light text at 15.75px, Franklin Gothic ATF uppercase headings at 96px, white 3.5px-radius buttons with a white glow, hairline white borders and WebGL cans and gradient orbs, with raspberry (#800035) and pink (#ff659d) taste colors.", "sha256": "8362ff1ab1a0f5ec126093831810b187376ec88a6eabfe0901c7bf665660738b", "bytes": 13880}, + "cigna": {"name": "Cigna Healthcare", "category": "Healthcare & Wellness", "description": "Cigna Healthcare's US site pairs a confident cobalt blue (#0033ff) with deep indigo (#110081) headlines, leaf green (#00874d) and peach (#fad6bd) accents on a white and #f4f4f4 canvas. Value Serif Pro 700 carries display and feature headlines (64px hero), Value Sans Pro carries body (14px/16px), with fully round 9999px pill buttons and 30px leaf-cut cards.", "sha256": "b3ac763795fcfbb0c1f02696c54720ab016f1692e3550e18550e53a13067a51d", "bytes": 17317}, + "cimb-thai": {"name": "CIMB Thai", "category": "Thai Brands", "description": "CIMB Thai Bank's personal-banking home page uses signal red (#ff0000) for primary buttons on a white canvas, deep maroon (#780000) headlines and hero scrim, a charcoal #272727 footer, Noto Sans in 400, 700 and 900 weights (48px hero, 18px body) and 8px-radius buttons and cards with a soft 0 3px 6px shadow.", "sha256": "a63c93ffff6a8cf62efb13bfed6bf7262757610752b2b424b88bedaf3aaa75f6", "bytes": 15183}, + "cipher": {"name": "CIPHER", "category": "Portfolio", "description": "CIPHER is a Paris creative production company whose site is a near-monochrome stage: warm black #060403 and bone #e9eae4, ABC Arizona Mix at weight 200 in uppercase for 40px statements, ABC Favorit 12px medium uppercase for navigation, no radii, no shadows, and staggered image grids captioned with index numbers.", "sha256": "2294bfe2ab309ecb2dec132454524fa63c69aaf9c714dc1c30fd961f507ebb50", "bytes": 13270}, + "ciridae": {"name": "Ciridae", "category": "Tech & AI", "description": "Ciridae's site pairs cream and bone grounds (#fcfbf8, #eae1ce) with ink #14110d and a single copper accent #cc6437, set in Pragmatica Cond uppercase at 102.4px for the hero, Pragmatica 18px body and Roboto Mono and ABC Monument Grotesk Mono labels, with square 52px buttons, one pill-outline nav CTA and no shadows.", "sha256": "13711af1828df259b77dc4c2660dc75a36efbd3a95fb6bb00d66d9d6abb7fab7", "bytes": 15852}, + "cisco": {"name": "Cisco", "category": "Product & SaaS", "description": "Cisco.com homepage: a black canvas (#000000) with white Inter type (48px/500 display, 16px/24px body), a white 48px pill primary button, outlined link tiles, and a single electric blue accent (#0a60ff) used for links and glowing promo-card edges.", "sha256": "87de8e567808382892391bd249839c2b6271318ee0e94396b35571065e667b62", "bytes": 11028}, + "citi": {"name": "Citi (Citigroup corporate site)", "category": "Banking & Insurance", "description": "The Citigroup corporate site (citigroup.com) uses Citi Sans Text at 400 weight on a pale #f6f8fa page with a deep navy #0f1632 band, a cobalt #255be3 button with 6px radius that darkens to #163788, 20px-radius cards in #f0f5f7, 36px headlines, and no drop shadows beyond a single soft blue lift.", "sha256": "6a6c4061566c8d00d94dc6197f1c4af12bd81efca73ac15861f19fefd478322b", "bytes": 14384}, + "cj-more": {"name": "CJ MORE", "category": "Thai Brands", "description": "CJ MORE (ซีเจ มอร์), the C.J. Express Group supermarket chain, runs a green-and-yellow Thai site in the condensed db_helvethaica_x_cond face (34px body, 26px nav) with 80px db_helvethaica_x_med headings, a #00a150 green header and footer, #ffc934 and #fedb21 yellow buttons and a #f5f5f5 canvas.", "sha256": "2148d3ef0be131672e58b2cb58154e261f2af72e1ad27ed9993eef128904f291", "bytes": 10985}, + "ck-power": {"name": "CKPower", "category": "Thai Brands", "description": "CKPower (CKP) Public Company Limited English homepage (ckpower.co.th/en/home): photography-led sections with white Lato 900 headlines at 65px and 40px uppercase, Montserrat 15px body, charcoal #292929 text, #4b4744 footer, 4px-radius ghost buttons, and orange #ee7822, blue #1f51a0 and green #26a24c icon rings.", "sha256": "835ebb0c47df7495122a78f2eec7f1862f514d7fbe1a78e1f6bc1fb05e91204c", "bytes": 10502}, + "claude": {"name": "Claude", "category": "AI & LLM Platforms", "description": "Claude's site is warm paper and ink: a #faf9f5 canvas, #30302e text, near-black #141413 buttons with 9.6px corners, Anthropic's custom serif (330-weight 67.7px hero) over Anthropic Sans body, clay orange (#d97757) used only as a spark accent, 1px #d1cfc5 outlines, and 24-32px rounded cards with almost invisible shadows.", "sha256": "da86d973b1bb0cc77a6d7575b84c730160719addfe1462c599a6c00531b32f7d", "bytes": 19487}, + "clay": {"name": "Clay", "category": "Design & Creative Tools", "description": "Clay is a playful GTM-data brand set in Roobert (88px/575 hero, -3.52px tracking): lime (#cbd810) and black pill-less 12px buttons, a deep forest-green hero (#035d44), warm oat neutrals (#f4f3f0, #fffdf9) and candy swatches (dragonfruit, tangerine, slushie, ube) behind rounded 18px tiles and 3D clay-style illustrations.", "sha256": "c253e79f717d40d68f1fcc094c9b4cdcd8fb0ffe92adbf5cf2e271811b4efe4a", "bytes": 19347}, + "clay-boan-25": {"name": "Clay Boan", "category": "Tech & AI", "description": "Clay Boan's portfolio is an almost black stage (#0e0e0e) with white type, set entirely in Aeonik Pro 500 uppercase: 11.2px parenthetical labels and navigation against 144px to 160px project titles with -5.76px tracking, plus a blackletter Emeritus Display hero mark, a 3D clay render, no radii, no shadows and no buttons.", "sha256": "57d111cd8d9ac0a40c0c97e64b04bb46946ada156f29f026652c1c8aad79bb44", "bytes": 11361}, + "claymorphism": {"name": "Claymorphism", "category": "Morphism & Effects", "description": "Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.", "sha256": "f1154851ecdeb2e8356e097e1675a5db6c102c0df4cf11d4df27cd7e710b1cbc", "bytes": 3069}, + "clean": {"name": "Clean", "category": "Modern & Minimal", "description": "Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.", "sha256": "a24ab35183490435c5a7aad7d372155a82a8d36c65872433385cebdbe02bfd54", "bytes": 3060}, + "clerk": {"name": "Clerk", "category": "Developer Tools & IDEs", "description": "Clerk's authentication site: a cool off-white #f7f7f8 canvas alternating with #131316 near-black bands, #131316 ink, violet #6c47ff section eyebrows, suisse 56px/700 headlines tracked -1.96px, 13px/20px body copy, pill buttons and 2.4%-opacity layered hairline shadows on product-UI cards.", "sha256": "73edc5f6145d88d4c6c75e64f7e5b438cbba3b172614b6f90450023b454f97b6", "bytes": 12970}, + "cleveland-clinic": {"name": "Cleveland Clinic", "category": "Healthcare & Wellness", "description": "Cleveland Clinic's patient site uses Roboto throughout (900-weight 48px hero, 700-weight 32px service titles, 18px medium buttons) with a clinical blue #007bc2 for the Appointments button, a deeper #0076ba for headings and links, #1b477b hover, a green #1d8553 accent, 5px button radii and a 24px alert pill on a white canvas.", "sha256": "99804d4481188d201a9d979cd5f5c4c7442f83364b11d3b62839c69db0e1cd61", "bytes": 14148}, + "clickhouse": {"name": "ClickHouse", "category": "Backend, Database & DevOps", "description": "ClickHouse's marketing site is a warm near-black canvas (#131312) with off-white Inter text, Basier 600/700 headlines at up to 96px, and a single neon yellow accent (#faff69) on 4px-radius buttons, 8px cards, arrow links and testimonial panels.", "sha256": "8603cf04146c742ef5fb6ad4ceeb63e56aadd92a9d83fd04d3beccdc6fdb0367", "bytes": 19968}, + "clickup": {"name": "ClickUp", "category": "Productivity & SaaS", "description": "ClickUp's marketing home: white #ffffff and #f8f9fa canvas with a black #000000 Brain AI section, #202020 Get started buttons with 15px corners, #646464 grey copy, Plus Jakarta Sans 700 headlines at 60px with -2.1px tracking, Inter UI text, Sometype Mono uppercase labels, and the pink-orange-purple-blue brand gradient (#ff02f0, #fc6d2d, #6647f0, #0091ff).", "sha256": "14704e29224959048493dd8af1e0d57eca8c246c38871273f348bb3792f64318", "bytes": 14759}, + "climeworks": {"name": "Climeworks", "category": "Energy & Climate", "description": "Climeworks (climeworks.com), the Swiss direct-air-capture carbon removal company: white #ffffff pages with neutral #f0f1f1 bands and a black #000000 footer, Climeworks dark blue #008fe8 for the primary 'Remove CO2' button (hover #007fca) and light blue #78c5e5 for banners. Headlines are the serif Reckless Neue (served as WebRecklessNeue) at 71.9661px/400 with -1.49996px tracking; everything else is Haffer (served as WebHaffer) at 18px/26.1px. Buttons are 8px-radius, 44px tall with 12px 24px padding; media cards round to 16px.", "sha256": "d1272f8cec13e97239c04ac9cf7950dbe104a5e08c2d2de2535d6a7d1323f060", "bytes": 20506}, + "clinique": {"name": "Clinique", "category": "Beauty & Personal Care", "description": "Clinique's US storefront is a clean white and #fafafa product catalogue in Cliniques Helvetica Neue (200-weight 48px headlines, 16px body, 800-weight product titles), with black pill buttons (1000px radius), mint #adddb7 badges, a red #dd0000 holiday nav link and square, unframed product imagery.", "sha256": "dd26e61aeacf508e73e8d0d0411052036c11a47dcf695c799323fffca62f2537", "bytes": 15096}, + "clou-agency-portfolio": {"name": "Clou Werbeagentur Luzern", "category": "Portfolio", "description": "Clou, a Lucerne branding and web agency, sets a 256px Athletics wordmark at weight 500 on white, then drops into a near-black #101114 panel and full-bleed colour case cards (orange #eb693c, teal #005d69, coral #ec554a), with grey #e8ebe9 and graphite #1f2126 pill buttons at 48px radius and 16px to 64px card radii.", "sha256": "32ce95135ebe1a8ca42c3f12cbcce98d4daf177af6809e79b1bf7755ad60afce", "bytes": 15887}, + "cloudflare": {"name": "Cloudflare", "category": "Design Systems", "description": "Cloudflare's homepage sets FT Kunst Grotesk at weight 500 with tight negative tracking, floods the hero with a rounded Cloudflare-orange (#ff5e1f) panel carrying a white pill CTA, then drops to a near-white canvas of hairline-divided feature cells. It is built on Kumo, Cloudflare's open-source design system, whose docs run on Inter with 8px controls.", "sha256": "f8fca8819a71313a5684c3fa1a79afc81030b257952cf797d4b4248cb07877bd", "bytes": 12802}, + "cloudforest": {"name": "CloudForest", "category": "Thai Brands", "description": "CloudForest (cloudforest.co.th), a Thai cloud hosting provider, pairs a deep brand blue #016fb9 and bright action blue #0496ff on white with Line Seed headlines (45px, weight 500) and Prompt uppercase navigation, 10px-radius buttons, a 15px-radius white feature panel with a soft shadow, and isometric cloud illustrations.", "sha256": "65af053753b628aa588af3c2a2980476a31baaef9ae082f7902e537a592305b9", "bytes": 14328}, + "clover-power": {"name": "Clover Power", "category": "Thai Brands", "description": "Clover Power (cloverpower.co.th), a Thai renewable-electricity producer, uses a white canvas #ffffff, blue #4378bc and #3e78bc, deeper blue #305993, clover green #72bb44 and orange #f7941d accents, Mitr type from 16px/300 body to an 80px/500 hero word, 25px pill buttons and leaf-shaped image masks.", "sha256": "ddbbc29c1be9e0681852a7270ecc1170fc06e01c81ff9407f2c45ddef412272c", "bytes": 10259}, + "club-med": {"name": "Club Med", "category": "Travel & Hospitality", "description": "Club Med Thailand home page (clubmed.co.th), measured — warm sand #f5f0e8 and white #ffffff surfaces, ultramarine navy #1e2a4a pill buttons (120px radius), saffron #ffcc00 search button, sage #a8b8b3 sustainability band, Newsreader 64px/700 serif headlines over Inter 16px/400 body, 16px-radius image cards.", "sha256": "67eefb91277cc048dc9c2b1fcd74160ac6a7612f54ca2e6a3864413a5cc83aa3", "bytes": 12345}, + "cnn": {"name": "CNN", "category": "News & Publishing", "description": "CNN's edition home page is a dense newsroom grid in near-black #0c0c0c on white, set in cnn_sans_display (36px bold lead headline, 20px medium story headlines, 16px links), with the brand red #cc0000 reserved for conversion actions and live markers, #e6e6e6 hairlines, 4px thumbnails and 8px controls.", "sha256": "3e115cd80a0589bc68fcce19b5166f4beb1515e986053440c05d4e58d1c22a5d", "bytes": 15701}, + "coachella": {"name": "Coachella", "category": "Culture & Events", "description": "Coachella Valley Music & Arts Festival (coachella.com): warm beige surfaces (#f5ebdb header, #fefbf6 cards, #efddbe), forest-green #294e2c text and desert-blue #336d8e headings, Perfectly Nineties serif display at 75.3927px, Sweet Sans Pro tracked caps, Funnel Sans body at 20px, and 20px-radius cream cards over festival photography.", "sha256": "435087ea48fb611f62544ff2ebfd06825d6bb54a491a9a2f2e9f7978e1cf7160", "bytes": 11236}, + "coca-cola": {"name": "Coca-Cola", "category": "Food & Beverage", "description": "Coca-Cola US site system: a #eeeeee canvas with white #ffffff cards, black #000000 pill buttons (40px high, full radius, 12px bold label), TCCC-UnityText at 700 with -1.5px tracking for 38px headlines, 16px image-and-card radius, and campaign photography carrying all colour.", "sha256": "0809668dc0663bde60d0d634922e389840c79dac09b54d146c87d71ab8757cb9", "bytes": 10715}, + "cockroach-labs": {"name": "Cockroach Labs", "category": "Backend, Database & DevOps", "description": "Cockroach Labs (CockroachDB and the Continuum database cloud): a pure black #000000 page with a deep-green #101913 footer, data-purple #9059ff pill CTAs (35px radius) that hover to bio-green #aede54, sci-fi blue #60ecff accents, Geist at weight 200 from 71.11px display to 16px/27px body, Geist Mono buttons and 2-3.2px tracked uppercase eyebrows.", "sha256": "5c8b275811c474486e1a2d7f5c7319a4811fadcec09daf3c30052e1672e691f9", "bytes": 14036}, + "code-and-theory": {"name": "Code and Theory", "category": "Agencies & Studios", "description": "Code and Theory's site is a pure black (#000000) stage with white type in akademie (53.33px headlines, 46.29px project names at weight 400), a light koor serif for the hero's second line, Fragment Mono 12px notes in #a9a9a9, one white 56px pill button, no cards, and full-width case-study imagery.", "sha256": "dd5d40f7c791dffde0082df58d707418c8210e9dd32aad556b3146892891323a", "bytes": 13933}, + "codecademy": {"name": "Codecademy", "category": "Education", "description": "Codecademy's marketing site runs its open-source Gamut design system in dark color mode — a pure #000000 canvas, white Apercu body type at 16px/24px, a 76px Apercu hero headline with a Suisse Int'l Mono accent line in lime #aee938, and Codecademy-yellow #ffd300 fill buttons with navy #10162f labels, 4px corners and a 2px border. Light pages flip to beige #fff0e5 with hyper-violet #3a10e5 actions. Cards are #0a0d1c with 16px radius and translucent #ffffff33 hairlines.", "sha256": "7f31c25eced59781c2af67b658aa480f54701425123333cfa37e9ffc60675e17", "bytes": 38651}, + "codesandbox": {"name": "CodeSandbox", "category": "Developer Tools & IDEs", "description": "CodeSandbox's home page is near-black #0e0e0e with #161616 bands, a 120px/500 display headline (-6px tracking) in electric lime #d6fb41, Inter body text in #a3a3a3 and #f0f0f0, pale-lime #eaff96 buttons with #343434 text at 6px radius, and full-bleed lime sections with 10px-radius testimonial cards.", "sha256": "baef1dbac1dd0fbfc53503744578e6a0c62c549b4a1400ba079a53c982bb8b08", "bytes": 13759}, + "coffee-world": {"name": "Coffee World", "category": "Thai Brands", "description": "Coffee World (coffeeworld.com), the Thai coffee-shop chain now part of PTG. Royal blue #273c84 text and accents on a white #ffffff canvas with a yellow #fad943 bean-and-drop mark, set entirely in Nunito Sans (32px/900 hero heading, 14px/400 body) with 100px pill navigation and 10px cards.", "sha256": "9db1ec1c4333f18b6bd40eee86321cad97539a51b49342914734a9930452e93c", "bytes": 16242}, + "coffeetech-r": {"name": "CoffeeTech®", "category": "Tech & AI", "description": "CoffeeTech® (coffee-tech.com), an Israeli maker of commercial coffee roasters. A near-black #0d0e13 canvas with cream #f3ede3 type and a terracotta #c8603d Products button, set in Inter with a 192px/500 hero headline, square 0px buttons and 11.11px beige cards on #e5e2dd bands.", "sha256": "9ce53cb7188b8f486b9570c72907bd617b05b31752dc01c7d806657a31660c88", "bytes": 16887}, + "cohere": {"name": "Cohere", "category": "AI & LLM Platforms", "description": "Cohere's marketing site pairs a white canvas (#ffffff) and volcanic ink (#212121) with warm stone bands (#f0eee9), forest-green panels and photography; CohereText headlines at 96px/400 with -1.92px tracking, Unica77 Cohere Web body, and near-black pill buttons (#17171c).", "sha256": "8660f01b7a5bea4e7de8b7eddd5bac44a531703c0f3940b42a55d2731292ded5", "bytes": 21642}, + "coinbase": {"name": "Coinbase", "category": "Fintech & Crypto", "description": "Coinbase's homepage uses a white canvas (#ffffff), a cool grey band (#eef0f3), near-black rounded panels (#0a0b0d), and one accent, Coinbase Blue (#0052ff), on 56px-radius pill buttons with CoinbaseDisplay headlines at 80px/400 and grey 13px CoinbaseText body.", "sha256": "c873aea996ed5e59f63e758085f7731c4fab5b2ebc21b0f15323b25b092b2065", "bytes": 20690}, + "coldwell-banker": {"name": "Coldwell Banker", "category": "Real Estate & PropTech", "description": "Coldwell Banker (coldwellbanker.com), the US residential real-estate brokerage. White #ffffff canvas under full-bleed home photography, royal blue #1f69ff actions, navy #012169 and #00003e bands, ColdwellSans 56px/500 headline with Roboto text, 8px buttons and 20px search card.", "sha256": "dbda42798050fd24758d657b64393b9ab8904af6bb66bdd59a5ab49af6af1f5a", "bytes": 15579}, + "collins": {"name": "COLLINS", "category": "Agencies & Studios", "description": "COLLINS (wearecollins.com), the brand-and-design agency site. Warm off-white #f8f8f7 canvas with espresso-black #140700 ink, Portrait Text serif at 72px/400 for headlines and Graphik for interface text, pill buttons at 96px radius and 16px image cards.", "sha256": "32d30373e9fe55341d1adaab65f02e5bad6348e07591bc44d1e7926381b4a035", "bytes": 14990}, + "colodee-digital-network": {"name": "COLODEE DIGITAL NETWORK", "category": "Thai Brands", "description": "COLODEE DIGITAL NETWORK (colodee.com), a Thai co-location, dedicated-server and VPS host. Dark navy #07142b hero bands and light #f5f7fb sections, electric teal #19e0cf actions with navy #040a16 labels, Chakra Petch 700 headlines, IBM Plex Sans Thai text and IBM Plex Mono labels, 8px buttons and 16px cards.", "sha256": "5e51a8f36b4fb6239cfc11397381e4e2e6f75e0d57814ca0604cca7a19eb5b42", "bytes": 17442}, + "colonia-zacamil": {"name": "Colonia Zacamil", "category": "Culture & Events", "description": "Colonia Zacamil (coloniazacamil.com), an interactive neighbourhood experience. Warm stone #ebe6e0 canvas with pure black #000000 type, Heathergreen condensed capitals at 166.4px, Reckless Neue serif at 24px, Roboto Mono labels and a 30px-radius black Discover pill with a gold #b48e46 accent.", "sha256": "c0ff765b08bddef1ed1e34a301e2dcd5e5db502f2d39136794817ae954fd51e6", "bytes": 13575}, + "colorful": {"name": "Colorful", "category": "Bold & Expressive", "description": "Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.", "sha256": "079966ac25cd11f71b2cb4f657da51b6cdf93edf95fe051a00495a2336bbb330", "bytes": 3035}, + "com7": {"name": "Comseven", "category": "Thai Brands", "description": "Comseven (comseven.com/th), the corporate site of Com7 Public Company Limited, a Thai IT retailer. White #ffffff and #faf9fa pages, black #000000 type and footer, a fresh green #44c767 View-more button and a #3fb02c share-price panel, Noto Sans Thai at 16px with Sukhumvit Set controls and 2px-radius buttons.", "sha256": "7dcf4fb5b44ac7f8c685d10ed2a8af7341bf0ccb3be8b12bcc1d35d4a6959f54", "bytes": 14326}, + "cominvi": {"name": "CoMinVi", "category": "Architecture & Interiors", "description": "CoMinVi (cominvi.com.mx), an underground mining contractor in Guanajuato, Mexico. Near-black #151515 hero over mine footage, pale #ebf0ed and white sections, orange #f47920 accent, Helvetica Now Display 700 headlines with PP Supply Mono 300 uppercase labels and 7.11px clipped buttons.", "sha256": "e18e1b4be59fa8b5d76a22adb922ec9ae5e37d7d0480639fa15b74b06ca9168e", "bytes": 14938}, + "commonwealth-fusion-systems": {"name": "Commonwealth Fusion Systems", "category": "Energy & Climate", "description": "Commonwealth Fusion Systems (cfs.energy), a commercial fusion energy company. Warm tan #ccc8c3 canvas with graphite #333333 type, deep navy #152536 footer, terracotta #cf6d46 circle-arrow accents, nbInternational Light 300 at 58.526px for headlines and a mono face for navigation and links.", "sha256": "e52617c231248b7945ab8b596cdd60874c6b09720c490d88c4b8ced4d9c8f0ea", "bytes": 13744}, + "compass": {"name": "Compass", "category": "Real Estate & PropTech", "description": "Compass (compass.com), the US real-estate brokerage, ships a monochrome system — black (#000000) pill CTAs and white (#ffffff) pages, full-bleed home photography, a self-hosted \"Compass Serif\" for hero display lines (48px/600 hero, 50px/400 section titles) over a self-hosted \"Compass Sans\" UI face (16px/400 body, 500 for buttons), Open Sans 12px for listing-card metadata, 9999px pill buttons, square 0px search tabs and 8px listing cards, all driven by --cx-* and --colorIntent-* CSS custom properties on an 8px base unit.", "sha256": "a9df0997ba7195e07be3d532c05835c79c8737d5a6a0cb61f8fd90f71f5587f3", "bytes": 27827}, + "composio": {"name": "Composio", "category": "Backend, Database & DevOps", "description": "Composio's homepage alternates a warm near-black DEV surface (#0f0f0f) and an off-white FOR YOU surface (#f6f6f6) with square-cornered white-fill mono buttons (JetBrains Mono 14px), Geist headlines at 64px/400 with -1.6px tracking, and a single electric blue accent.", "sha256": "684a65c6920a0e0fe636c8aeb430fe8a160c090551cc5aff79027b5e506dc3b1", "bytes": 21949}, + "compsych-brand-hub": {"name": "ComPsych Brand Hub", "category": "Business & Corporate", "description": "ComPsych Brand Hub (compsych.konpo.co), the ComPsych Design Guidelines microsite made by Konpo Studio. Sky blue #8dc9f4 with deep sea #070f36 type, sienna #9c4e23 and forest #164c3b section themes over soft gradients, Beatrice at 103.385px/500 with Bright Clones and Inter, and 14.77px cards.", "sha256": "121b09d7764a4e039dd8d0f2edfb33829d39e4121d74a9447f8792e8b0a63c92", "bytes": 16686}, + "confluent": {"name": "Confluent", "category": "Backend, Database & DevOps", "description": "Confluent, the data streaming platform from the original creators of Apache Kafka: black #000000 hero and demo bands against a white #ffffff canvas, #1e1e1e ink, electric blue #0056f9 buttons at 6px radius (hover #5a91f9), a #0e68bc announcement strip, and Poppins throughout from 53.332px/600 display to 16.732px body with uppercase tracked nav.", "sha256": "d2818ff45b3d2f392b2e24a33da53f64bd0683c12f84bf8d7a4f40ac3222cc50", "bytes": 12584}, + "conicle": {"name": "Conicle", "category": "Thai Brands", "description": "Conicle (Thai online learning platform) design system: dbHeaventRounded type with a 52px hero, white canvas, red #ff2e38 pill buttons, #fff1ef tint, #ebecf0 hairlines and 20px-radius course cards with a soft shadow.", "sha256": "7976d9b3a539501620d9339fa8cb6e7eca8ebb7ff87572429233387b4fca01dc", "bytes": 11802}, + "conocophillips": {"name": "ConocoPhillips", "category": "Energy & Climate", "description": "ConocoPhillips (conocophillips.com), the global oil and gas exploration and production company. White #ffffff canvas with near-black #111111 type, electric blue #0b2cd9 actions and highlights, red #b00024 hover states, Sora 300 headlines at 64px, Public Sans text and square 0px buttons.", "sha256": "b1f0f0dd4f4ad9c63fababce8179c00a31a82314b9cc2f4ce70de81fe46cd925", "bytes": 14988}, + "contemporary": {"name": "Contemporary", "category": "Modern & Minimal", "description": "Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.", "sha256": "09aa3e111754ea8b6c55669da8b455e8731f2cd823ccd35b4755f921e04de12f", "bytes": 3055}, + "contentful": {"name": "Contentful", "category": "Design Systems", "description": "Contentful's homepage pairs a deep navy hero panel (#0c2659) and a bright blue announcement bar (#1770e5) with white and charcoal (#2b2d31) pill buttons, set in a self-hosted face registered as avenirNextFont at weight 600 with tight tracking, 48px-radius pills and 20-48px rounded media. Its Forma 36 docs use Geist Sans and 6px blue buttons.", "sha256": "090d37fd0299f95465a64a1f527001fef32ab66006e9a8712eaa936b78978be2", "bytes": 12567}, + "continental": {"name": "Continental", "category": "Automotive", "description": "Continental (continental.com), the German tire and industrial-technology group. White canvas with black type, light-gray #f0f0f0 bands and a warm yellow-orange #ffa500 for pill buttons, set in ContinentalStagSansW at 52.5px/600 headlines and 20px body, with 24px-radius buttons and a 48px pill search field.", "sha256": "2a11503fe2c03853011319bf26a175458fb9002f200599c58cd472582cd9ea2c", "bytes": 15346}, + "convertkit": {"name": "Kit", "category": "Product & SaaS", "description": "Kit (formerly ConvertKit) email-marketing site: custom KitSansFont headlines at 80px/500 over Libre Franklin 16px body, soft black #1e1e1e ink on white and warm-white #f2efe9 bands, Kit bright blue #44b1ff pill-free buttons with 14px corners, 16px dark creator cards and a #1e1e1e footer.", "sha256": "871d8d538403642f0340b99475f8f7462d7b8234fb76f1c2295cfbbcc47cf93e", "bytes": 15409}, + "convex": {"name": "Convex", "category": "Backend, Database & DevOps", "description": "Convex's backend-platform site: warm near-black bands (#221f1d, #281d1d, #191919) with an antique-white #f6eedb section, the official yellow #f3b01c pill, red #ee342f and purple #8d2676 stripes, uppercase neue-haas-grotesk-display 60px/900 headlines, gtAmerica body, vcr pixel labels and IBM Plex Mono commands.", "sha256": "399d27b3e1f89c08dd85788e7063ed6faaa6217d4de8c98880141e2dccf0df9e", "bytes": 13840}, + "coolors": {"name": "Coolors", "category": "Design & Creative Tools", "description": "Coolors palette-generator site: Inter everywhere with a 102.4px/800 hero at -3.584px tracking, #0a0a0a ink on white, blue #2563eb buttons with 10px and 8px corners, grey #f5f5f5 resource cards, and eight pastel tool tiles that pair Tailwind-style 100 tints with matching 600 text colours.", "sha256": "03971bf0374054aa1b73094e3748ed5258983eecc3527027024e13d84d9aa355", "bytes": 13191}, + "cooperative-promotion-department": {"name": "Cooperative Promotion Department (CPD)", "category": "Thai Brands", "description": "Thai Cooperative Promotion Department portal at cpd.go.th: Noto Sans Thai with 38px bold titles, deep and light blue #1186b8 bands, white 10px-radius icon cards with a 10px 30px 0.08 shadow, white pill buttons with #0058aa text.", "sha256": "53ca109424f48750c4bdd05624b59f5eb0c8ad7545bdddcb21bfd0445936bf68", "bytes": 11131}, + "copilot-money": {"name": "Copilot Money", "category": "Fintech & Crypto", "description": "Copilot Money's site: a near-black navy #000814 page with 90%-white text, Jokker Semibold headlines (112px, -2.24px) over hairline-thin Matter Variable Thin body copy at weight 100, electric blue #1c6cff actions, #597caa nav hover, 24px-radius glass cards, and glossy 40px-radius category tags in pink #ff33aa, orange and purple.", "sha256": "261453a56868509ad0fb71cd20645ff113fc00516756f6aea01aea67575da5c2", "bytes": 15015}, + "corentin-bernadou-portfolio": {"name": "Corentin Bernadou Portfolio", "category": "Portfolio", "description": "Near-black portfolio (#070304) of a freelance developer, set entirely in one variable grotesque named H at tiny 11.85px / 600 grey (#767676) with a #ff4401 orange accent that appears as a measured link hover colour, a WebGL image cube, and zero border radius.", "sha256": "5f53a203381ddd87fd173e25e9baacf546d2042e6fac9242209ecab38c69c1b8", "bytes": 12713}, + "corporate": {"name": "Corporate", "category": "Professional & Corporate", "description": "Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.", "sha256": "3c8c80294a48d3295738d8575e93f0cd5d85f092eae3fc9e192cb39864f0453b", "bytes": 3077}, + "corsair": {"name": "CORSAIR", "category": "Gaming", "description": "CORSAIR's global storefront is a Pitch Black (#000000) catalogue with Bright Yellow #ece81a used only for square-cornered (0px) CTAs; Saira Expanded Light headlines at 64px/300, Saira 14px body, Anthracite #191919 hairlines and 2px-radius form fields.", "sha256": "b71854ab7834648a7f9f51c8a988a2a1f4b1a902d5545ba8b64f68434c906232", "bytes": 13783}, + "cos": {"name": "COS", "category": "Fashion & Apparel", "description": "COS US womenswear landing page: SuisseIntl (400/500/600/700) set in uppercase, a white 48px header over full-bleed two-column fashion photography, a #080808 near-black footer with #ffffff 13px text, #757575 inactive links, 32px bold uppercase headlines, and square 0px corners on every element.", "sha256": "afc78ec563487a0c251348653ea2fde82a36abaf162ae53b64f475527396adb1", "bytes": 11751}, + "cosmic": {"name": "Cosmic", "category": "Creative & Artistic", "description": "Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.", "sha256": "049ccd1019dc8ad9425b5b1aba8c7395c78cd6c8d21bcdead7e8e2e61803fa3c", "bytes": 2986}, + "cosmos": {"name": "Cosmos", "category": "Design & Creative Tools", "description": "Cosmos visual-discovery site: a single custom family, cosmosOracle, with 72px/700 headlines at -2.88px and 20px/500 text at -2% tracking, near-black #0d0d0d ink and pill buttons on white and warm #f7f5f3 bands, warm greys #6e6a69 and #9a9796, 12px–16px cards and soft 5% shadows.", "sha256": "bad84166b3760c7dea5d053467648ca12b3b33dac5ced121ff1e993cf5665d3c", "bytes": 12127}, + "costco": {"name": "Costco", "category": "Retail & E-commerce", "description": "Costco Wholesale US storefront: white canvas (#ffffff), body ink #333333, Costco blue #005dab buttons with 3px radius, Costco red #e51937 accents, green #008000 savings text, set in Costco Sans Web with a Material UI token layer and dense promo tiles.", "sha256": "68c65b4765765429477257a4a83bbabd048ca31cef4b202bce631e8380995dcd", "bytes": 12952}, + "coursera": {"name": "Coursera", "category": "Education", "description": "Coursera as measured on coursera.org — a white canvas with near-black #0d0f12 ink and slate #48546e secondary text, Coursera Blue #0056d2 (the brand guide's primary blue, PMS 2728) on 36px buttons with 8px radius and a 1px inset ring, hover #0b408b; Source Sans Pro at 400/600 with slight negative tracking; soft blue-grey #f2f5fa bands, 24px-radius promo cards, pill chips and a CDS (Coursera Design System) token layer exposed as --cds-* CSS variables.", "sha256": "bf061ce0d9b7d30e5c315483d2cf63b386bdd3f0cc2ac580fb0b4e7b2b8c4226", "bytes": 23203}, + "cp-all": {"name": "CP ALL", "category": "Thai Brands", "description": "CP ALL Public Company Limited corporate site (7-Eleven-centred imagery): white page, black ink, CP blue #1c4ca0 footer and headings, #01a7df cyan hover pills with 30px radius, set in the self-hosted Thai/Latin face DB Heavent at 500 weight.", "sha256": "8c8c9dca6137f7ec2449669b55eba3c2549f225c70c83b368a4df44029c254e0", "bytes": 12567}, + "cp-axtra": {"name": "CP Axtra", "category": "Thai Brands", "description": "CP Axtra (cpaxtra.com/en/home) measured at 1280px: Prompt in 400/500/700, uppercase bold headings, CP yellow #ffc01f pill buttons (15px radius), blue #0171cc for the stock ticker and links, #edf7ff light-blue bands, translucent #ffffffcc cards with 15px radius, and a 120px white header.", "sha256": "1f3994ddc23052b8a8a4a9c8c396c562cb838b074e5f95f8ffcf086792afc964", "bytes": 11540}, + "cp-foods": {"name": "CPF (Charoen Pokphand Foods)", "category": "Thai Brands", "description": "CPF (Charoen Pokphand Foods, cpfworldwide.com/th/home) measured at 1280px: Thai DB Heavent faces in light/regular/medium, green #008b43 section bars and headings, white pill outline buttons with 50px radius, a #f2f2f2 canvas with #f9f9f9 cards, and 30px/45px body copy.", "sha256": "7195ec7cca9ae1a4d2d7d736548ae8d5dc7b790e9639c026de088e33b00bf338", "bytes": 11464}, + "cp-meiji": {"name": "CP-Meiji", "category": "Thai Brands", "description": "CP-Meiji (ซีพี-เมจิ), Thai dairy brand site: light gray #eeeeee canvas with white panels, Meiji red #ed1c24, PSL Omyim Pro at 46px display and 30px body, 4px inputs, full-bleed product and campaign banners with red read-more tags.", "sha256": "1df377b5f1ce6f90da72686cc052c91f64ff2f80bb63705247ec47c9cac81a69", "bytes": 9881}, + "cp-tower-reit": {"name": "ซี.พี.ทาวเวอร์ (C.P. Tower)", "category": "Thai Brands", "description": "Office-for-rent site of C.P. Tower buildings managed by C.P. Land, set in db_helvethaica at 25.12px body and 80px display on white, with brand green #006838, lime green #8ec63f accents, slate ink #58595b and 50px-radius pill links.", "sha256": "27f217ee7464df8726816d1cf6bcd1c0ca180b3574be75087e448f5ab452471c", "bytes": 10372}, + "cpn-retail": {"name": "CPN Retail Growth Leasehold REIT", "category": "Thai Brands", "description": "Investor site of CPN Retail Growth Leasehold REIT (CPNREIT, SET: CPNREIT), the Central Pattana retail real-estate trust. Proprietary CPN typeface at 400 and 700 with a 130px wordmark headline, near-black #231f20 ink and buttons, brick-red #b33019 tiles, grey #595959 tiles and square corners on white.", "sha256": "f6b01e4b346a831ff0c00af976f27d6ce6e75abcadb6ae96e7ebfb4acee62d16", "bytes": 10175}, + "craft": {"name": "Craft", "category": "Productivity & SaaS", "description": "Craft's marketing home: warm paper #fcf9f7 canvas, near-black #030302 pill buttons fading to 75% on hover, Untitled Serif 400 headlines at 66px with -1.98px tracking over Untitled Sans UI text, large 24px-rounded pastel panels in periwinkle #b8caf5, mint #9bd8a9 and butter #fde99b, and deep soft multi-layer shadows.", "sha256": "45734cfad1258a0a688059f56bf9bdcdb9a628af332e752448a00cf03b6200b0", "bytes": 14960}, + "crate-and-barrel": {"name": "Crate & Barrel", "category": "Home & Furniture", "description": "Crate & Barrel's US storefront: a white #ffffff canvas with #222222 ink, square #222222 'Shop' buttons with #ffffff 600-weight 16px labels, everything set in the proprietary Crate Helvetica (400/600), 0px-radius fields and buttons, lowercase 33.783px editorial headlines over full-bleed lifestyle photography, and a #f7f7f7 footer.", "sha256": "e9c741a3f6d511e8786530fe81ace21c79c325c93c300bc4d3341d2491234bd5", "bytes": 15916}, + "crav-burgers": {"name": "Crav Burgers", "category": "Food & Beverage", "description": "CRAV artisan smashed-burger brand site: beige page #f5e3cd, ink #1b1b1b, ketchup red #f91814 and mustard #ffd750 full-bleed sections, oversized uppercase Mouse Memoirs headlines (384px and 192px), Modak wordmark, pill-shaped buttons.", "sha256": "00ae84b0acc3dac388de1e8c08ce6f8ba3c1eda97ebc09e52af0ac267e05b699", "bytes": 11768}, + "crea": {"name": "CREA", "category": "Thai Brands", "description": "CREA (Thai e-commerce enabler) design system: proxima-nova with a 100px weight-900 uppercase hero, off-white #fdfcfc canvas, teal #36b3a8 pill buttons with 300px radius, purple #750c92e0 section headings and a charcoal #1f1f1f footer.", "sha256": "0ec1a7d29e3181ef19602e3c6c4b8eed028fff3ade62b35d7f3dd90b6c483a45", "bytes": 9935}, + "creative": {"name": "Creative", "category": "Creative & Artistic", "description": "Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.", "sha256": "b374f6485153043b9eb07c2d5d56aa189f5721354d66791d88df2f80d43e9032", "bytes": 3063}, + "creative-giants": {"name": "Creative Giants", "category": "Architecture & Interiors", "description": "Creative Giants (Brighton, UK) immersive-activation and public-art studio site: warm off-white #fffef7, black #000000 sections, grey #666666 body, Switzer at light 300 weight with tight negative tracking (-2.06379px at 51.59px) and fully round black Menu pill.", "sha256": "0344ad3c618b205e3e2f19a187e73c66b476c7b6bf7f8288df00e8c76a2970e6", "bytes": 12403}, + "credit-agricole": {"name": "Crédit Agricole", "category": "Banking & Insurance", "description": "Groupe Crédit Agricole corporate site (credit-agricole.com): grey page #ebebeb, ink #404040, Crédit Agricole green #82b600 buttons and side menu, teal #60bba1 press cards, Barlow Semi Condensed headlines with Open Sans body at 14px and 4px/10px radii.", "sha256": "857b654d205fa2814b6d33641896d780b41eb84e8efee10f2ee0a83223f4f957", "bytes": 10744}, + "cron": {"name": "Cron", "category": "Productivity & SaaS", "description": "Cron's cron.com is a single dark screen: #161412 warm near-black canvas with a #0f0d0a footer, Helvetica Neue throughout (a 140px/700 'It's about time.' headline at -3px tracking, 22px/37.4px body in #cccccc), and one #ff4700 orange pill 'Sign up' button wrapped in a 100px orange glow.", "sha256": "72d21f56b6de27e5fde234cb736244f206f457d78a919b3197b97c9a0b408179", "bytes": 10452}, + "crossfit": {"name": "CrossFit", "category": "Sports & Fitness", "description": "CrossFit.com home: light grey #f2f2f2 page with black #000000 header and #1a1a1a ink, CrossFit blue #075dc6 pill CTAs at 100px radius, uppercase PF DIN headlines (96px, 56px, 36px) over Inter body at 16px, with full-bleed gym photography.", "sha256": "fb0902562c7d74eff5b49febdbb8c491f77f2e26df21d280d276e8cb2f0b291f", "bytes": 11886}, + "crowdstrike": {"name": "CrowdStrike", "category": "Tech & AI", "description": "CrowdStrike's site: crowdstrikeSharpSans bold headlines at 56px/62px and Neue Haas Grotesk Display for UI and body, CrowdStrike red #ec0000 buttons with 6–8px radii that hover to #d30000, black #000000 hero and platform bands with white type, light #f8f8f8 pricing sections and white 22px-radius cards with a soft 50px shadow.", "sha256": "27cacccae033f922c893d2654b001639a913f10dbc3f73aef60ceb711cf97491", "bytes": 10987}, + "cuberto": {"name": "Cuberto", "category": "Agencies & Studios", "description": "Cuberto's agency site alternates white #ffffff and black #000000 sections, all set in Suisse Intl (72px/500 headline with -0.72px tracking, 14.4px/400 body), with black and white 46px pill buttons (9999px), 16px-radius service rows on #eeeeee, mint #e3f5f3 and pale #f1f3fa testimonial cards, 64px top-rounded section edges and 70%-white #ffffffb3 copy on black.", "sha256": "32a86e3b5de385a9921a7b9e29b1b298934286c87bc994f699e412cbc3faaff4", "bytes": 12687}, + "culture-amp": {"name": "Culture Amp", "category": "Design Systems", "description": "Culture Amp pairs a warm off-white canvas (#fefbf9) and near-black ink (#171a1b) with Tiempos serif headlines at 56px/500, Inter body at 20px/400, black pill buttons (9999px radius, 54px tall) and soft 24px-radius cards on a #f6efea cream band. Its public Kaizen design system uses a separate Inter-led product palette with a #0168b3 action blue and 7px-radius buttons.", "sha256": "b45adbf9343ccd8c3af044b784bbe19be08f27615c867b2d23300b015187f294", "bytes": 13697}, + "cursor": {"name": "Cursor", "category": "Developer Tools & IDEs", "description": "Cursor's homepage uses warm cream grounds (#f7f7f4, #f2f1ed), olive-black ink (#26251e) with alpha-mixed greys, a custom CursorGothic sans at weight 400 (26px hero), pill buttons, and an orange accent (#f54e00) for links, with large product screenshots as the visuals.", "sha256": "51902286138adbcc1d32e97e7652302e5c7e244972010af3a8e0d94fde47bc4d", "bytes": 20970}, + "cushman-and-wakefield": {"name": "Cushman & Wakefield", "category": "Real Estate & PropTech", "description": "Cushman & Wakefield global home (cushmanwakefield.com/en) measured at 1280px: Gotham with ChronicleTextG2 accents, uppercase 40px/500 display, deep indigo #1d1740 square-cornered buttons with 12px/700 uppercase labels, grey #686b6b body text on a white canvas, and a 0px radius everywhere.", "sha256": "b530553f465c2edbf61b1e3ae182ebbcc95a4d73279a6a565693946207568fa6", "bytes": 11354}, + "customerio": {"name": "Customer.io", "category": "Product & SaaS", "description": "Customer.io (customer.io) sets everything in Saans (saansFont, variable weight 475) on white, with Spruce #0b363b pill buttons ringed by a 4px Verdant #abffae flare, deep-teal #00262b ink, dark Spruce #00191c bands and footer, 96px/40px headlines with +0.2px tracking, and pastel case-study tints.", "sha256": "f4b17dda4ed14139a6d108cefe7656e7565848fa3c69974a35d8ae8952de77b8", "bytes": 13348}, + "cvs-health": {"name": "CVS Health", "category": "Healthcare & Wellness", "description": "CVS Health corporate site: white canvas, black ink, CVS red #cc0000 buttons (10px radius) and hover links, black #000000 footer and #262626 utility bar, CVS Sans Regular and Medium at 48px and 36px headlines, 16px cards with a soft 8px shadow.", "sha256": "f349f5df5881e0dff694f4525526c5f021580ef6b2ef2173a388ff4303ce4eee", "bytes": 10877}, + "cyphr": {"name": "Cyphr", "category": "Portfolio", "description": "Cyphr (London brand-experience studio) site: warm grey canvas #ecece9, black #000000 ink and footer, one electric blue #212dd2 accent, Bandit Condensed uppercase display at 123.733px and 318.737px, Messina Sans Mono 13px body with -0.39px tracking.", "sha256": "8c2f40825d74af9bb4e976999146f3178ecbf54ac4a85cf27d0a7698d7878cd4", "bytes": 10348}, + "d2c-life-science": {"name": "D2C Life Science", "category": "Tech & AI", "description": "D2C Life Science (d2c-lifescience.com) is a one-page GMP consultancy site built as a dark olive field (#717f71) with pale mint text (#e6f6ed), Atipla ND 700 uppercase headlines at 40px/41.6px, PP Fraktion Mono 12px uppercase body copy, 4px-radius mint buttons and a rotating 3D cube hero.", "sha256": "c3b2f2d15cbfa94bea760b1bb5e3b37f06118cae4f4902664d3803afb495b363", "bytes": 16553}, + "daily-news": {"name": "Daily News (เดลินิวส์)", "category": "Thai Brands", "description": "Dailynews Online (dailynews.co.th), the web edition of the Thai daily Dailynews: a white page with magenta #ec008c section titles and rules, Kanit for headlines and navigation (400-700), Sarabun 16px/25.6px for Thai body copy, 8px-radius cards with a 10px soft shadow, and a very dense multi-section news home.", "sha256": "2b5759704ef0b540703e942a6ef03f16012c6aeb0a634a1994d3b6b3c71d0bef", "bytes": 19441}, + "daisyui": {"name": "daisyUI", "category": "Frontend Frameworks", "description": "daisyUI is the Tailwind CSS component library: a white canvas (#ffffff), zinc ink (#18181b), a neutral black pill CTA (#09090b), indigo theme primary (#422ad5), 4px field and 8px box radii, Outfit headlines (44.8px/72px) and a system-UI stack for components.", "sha256": "abad98e804219f4f03a66e553df9211ecf0053d2b0285b103c6524bb02cdeacc", "bytes": 24364}, + "damn-good-brands-2": {"name": "Damn Good Brands", "category": "Product & SaaS", "description": "Damn Good Brands (damngoodbrands.com), a Charlotte, NC (Ad)venture fund and creative agency site: pure black #000000 canvas, white #ffffff type, NeueMontreal 900 display at 32px, Chomsky blackletter initials, Nord 14px UI labels with 0.28px tracking, #131313 cards at 6.4px radius, and floating 3D props around an oversized DAMN GOOD wordmark.", "sha256": "5190d8f9bc997de5e3b16886992164450ecccefd810e850894e295b964562119", "bytes": 15413}, + "damso": {"name": "Damso", "category": "Retail & E-commerce", "description": "Damso.com is the artist Damso's site built as a retro media-player interface: a white (#ffffff) product browser with a dark #212121 click wheel, a Finder-style /world page with a #074edd selection label, and a black /billetterie event list, all in tiny uppercase grotesk (700, 10.6666px) with 1.59px-7.11px corners.", "sha256": "ad90c371d884422b618d5a81036ecbdb360e2ca9fd9d90457c30e2d92f007eb6", "bytes": 17385}, + "danone": {"name": "Danone", "category": "Food & Beverage", "description": "Danone's corporate site (danone.com): a saturated #005eb8 blue hero over white pages, DanoneOne Regular 16px body, DanoneOne CondensedBold uppercase headlines (28px hero, 52px and 120px statistics), pale blue #ccdff1 and #cceefb stat cards at 12px radius, and 100px-radius outlined buttons with a 1px black border.", "sha256": "87a1615f4a213a04a7447c0d79b4381132c3747815d7a3ac441171cf75f2395e", "bytes": 14787}, + "dapper": {"name": "Dapper", "category": "Agencies & Studios", "description": "Dapper (dapper.agency) is a European B2B demand-generation agency site: a warm light-gray #f3f3f3 canvas with near-black #212121 type, a mint-green #74f5a1 action accent, Helvetica Now Display 700 headlines at 85.3333px with -2.56px tracking, italic serif accent words, white cards, and 5.33px-radius buttons with a small arrow chip.", "sha256": "fe0609d850410af8bf41de834e8db914fffa2fb42738b019ea178b3b92e1aa39", "bytes": 14873}, + "darknode": {"name": "Darknode", "category": "Tech & AI", "description": "Darknode (darknode.army/en), the site of an anti-Shahed drone unit of Ukraine's 412th Nemesis Brigade: a near-black navy HUD interface (#14181e, #0f1318) with pale #eef2f9 text, signal red #f90000 accents, Uafsans Cond 600 uppercase headlines at 99.5584px with -5.6px tracking, Geist Mono 14px labels and square 0px-radius controls.", "sha256": "c96b552e34ab793476f8276ef1d5e09518cc4bfa7a4817a64f7dd6b38bd6a3b0", "bytes": 12916}, + "darkroom-engineering": {"name": "darkroom.engineering", "category": "Agencies & Studios", "description": "darkroom.engineering is a black #000000 terminal-like site printed entirely in one red, #e71419: uppercase Therma condensed display at 177.778px ('WHERE THINGS GET DEVELOPED', -8.88888px tracking), a 12.4444px/200 uppercase mono for everything else, burnt-red #390205 chips and rules, red-filled 'LET'S TALK →' buttons with black text, 0px corners and no shadows.", "sha256": "d6f8154e1111fb94a83ae300fb13518e4ff92c1c6c2ef59fb09befc11a708037", "bytes": 12182}, + "darkstar-fury-evo-i": {"name": "Darkstar Fury: Evo I", "category": "Culture & Events", "description": "Darkstar Fury: Evo I (darkstarfury.com), a browser synthwave space shooter by Patrick Heintzmann: a pure #000000 canvas, terminal-green #25ab6f Orbitron copy at 16px/32px with 1.6px tracking, red #ff3838 button labels inside mint #43ffc0 chamfered frames, a photosensitivity notice and a 40px-tall ENTER button.", "sha256": "90784d3939185766233dba2172bccc82a4219dac17fa8629623db8a2a438418c", "bytes": 12048}, + "dashboard": {"name": "Dashboard", "category": "Professional & Corporate", "description": "Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.", "sha256": "b87278ceecc58ad91ac97c14a1b8d657782f498f652e8100b9caf546742de4c2", "bytes": 3243}, + "data-zone": {"name": "Data Zone Thailand", "category": "Thai Brands", "description": "Data Zone Thailand (datazonedc.com), a Tier III carrier-neutral data center: a white page under a charcoal #3a3b3d header, red #d71921 links and CONTACT button with 5px radius, Century Gothic Bold 48px/51.2px headlines, Open Sans 18px/28px body, a full-width night photograph slider, and a metal-tile textured footer.", "sha256": "0003cccbb3e5e2d7aa542da513b7ffe46f2d4eb140e6816adc2059f0877b6522", "bytes": 12893}, + "databricks": {"name": "Databricks", "category": "AI", "description": "Databricks (databricks.com), the data and AI platform company: DM Sans 500 headlines at 48px/60px in deep teal-navy #1b3139, a hot red #eb1600 square-cornered CTA, alternating white, warm #eeede9 and dark #0b2026 bands, DM Mono uppercase eyebrows, and product cards with layered soft shadows at 16px-20px radius.", "sha256": "59cf8ae16d55c88ac13928f282c7e73f4e91f861899bc2f7b7b032be4ef31633", "bytes": 13634}, + "datadog": {"name": "Datadog", "category": "Product & SaaS", "description": "Datadog (datadoghq.com), the observability and security platform: NationalWeb type at 68px/600 on white, brand purple #632ca6 (official Datadog Purple) with an #8000ff accent, 4px-radius uppercase CTAs, a #110617 dark-purple footer, black product sections, and a 3D tilted product dashboard under a centered hero.", "sha256": "188070c0d0c2175ad6cadade7f99c78dfa7d26554e5c1cebf736b5e1e1ec52a1", "bytes": 14409}, + "datamossa": {"name": "DataMossa Co., Ltd", "category": "Thai Brands", "description": "DataMossa (datamossa.co.th), a Thailand technology consultancy site in dark mode: #1a1a1a and #000000 alternating sections, Inter 400-700 text in light gray #b0b0b0, a purple #881a8a hero gradient and buttons with 5px radius, 10px-radius bordered cards with a soft 0 2px 10px shadow, and a 48px/57.6px bold headline.", "sha256": "3865c8dbb05ca6143c0e673cc96c54daf74e5c0c1b8a6fba1d4f041cf51fd136", "bytes": 13818}, + "david-alaba": {"name": "David Alaba", "category": "Culture & Events", "description": "Official site of footballer David Alaba: a white #ffffff canvas with near-black #0a0a0c type set entirely in TWK Lausanne 400, from 176px negative-tracked display headlines down to 12px uppercase navigation, with sharp 0px corners and photography as the only color.", "sha256": "322042dcc33e5821b17ea70fe0dd1c5216b27cba39a50ab5a77f45f905408426", "bytes": 14782}, + "david-whyte-experience": {"name": "David Whyte Experience", "category": "Culture & Events", "description": "Companion-membership page of poet David Whyte's site: a warm grey #e7e7e2 canvas, black #000000 type in thin Canela Text (weight 100, 52px headings) paired with 18px Roobert body, white #ffffff 4px-radius subscribe buttons, and a painted WebGL landscape as the only color.", "sha256": "f7e140bcd8ac6c9eee41087eb169bd2d4f31025583449ea754cb96c9fad9a474", "bytes": 13438}, + "davincii": {"name": "DaVincii", "category": "Tech & AI", "description": "DaVincii, a self-described living intelligence system: a charcoal #1d1d1d canvas with light-grey #c3c3c3 type, a custom DaVinci serif at weight 300 (56px, -3.92px tracking) with italic emphasis, Kessler 17.7778px body, Inter 500 labels, circular 50% shapes and sand-toned stone textures.", "sha256": "34d25b8f1904e5be0b356557d3ad3a945c0b5f9d65a08a0938e2f271d4a40f56", "bytes": 14066}, + "daydream-player": {"name": "Daydream Player", "category": "Tech & AI", "description": "Marketing site for Daydream, a social music player: near-black #080808 and #161616 surfaces, white and #d9d9d9 type in Archivo (48.8px headline) and Manrope (25px body), an ember red #ee4137 loader and footer, pill shapes and a frosted nav pill.", "sha256": "b458ac596f9452cbbc3986e3fcb51f5a462895b23a3db97e781c0f5710f77f58", "bytes": 14136}, + "db-schenker": {"name": "DSV", "category": "Logistics & Mobility", "description": "DSV global transport and logistics site, which now serves dbschenker.com after the Schenker merger: white #ffffff canvas, #181818 text in FoundrySterling (800-weight headlines at 48px and 36px, 15px body), sharp 0px corners, DSV blue #0a34a1 buttons and a #002664 navy footer.", "sha256": "bad77fab5412627cc262bad922efbfcc9c336f5ad9962713b15c4abebd848ac8", "bytes": 13975}, + "dbs": {"name": "DBS", "category": "Banking & Insurance", "description": "DBS Group home page: a white #ffffff canvas with #2e2e2e text in Open Sans (700-weight 36px and 32px headlines, 16px to 24px copy), DBS red #ff3333 buttons with a 4px radius, an 80px red Login block, #f3f3f3 photo tiles and amber #ffaa22 'View all' tiles.", "sha256": "9860bc7e21b984e83394e798171d33d14297507fe9b885b64d6aeef31df44077", "bytes": 13892}, + "decathlon": {"name": "Decathlon", "category": "Design Systems", "description": "Decathlon America's storefront is a white (#ffffff) Inter-only retail layout with 56px/700 hero headlines, near-black ink (#000000cf), an indigo store action colour (#3643ba) for announcement bar and cart buttons, a yellow (#ffcd4e) \"Shop\" pill, and 12px-radius buttons, over full-bleed outdoor lifestyle photography.", "sha256": "10345c0154b72176d73fc88672c8f36318829efb6e314e6f0ec8fffbd97880cd", "bytes": 11653}, + "decathlon-yestalgia": {"name": "Decathlon Yestalgia", "category": "Retail & E-commerce", "description": "Campaign microsite for the Decathlon Yestalgia retro-sportswear collection (since 1976): a #f4f4f4 canvas with #e9dae6 lilac and #eaa0cd pink sections, black Roboto Flex uppercase type at weight 535 up to 179.2px, and lime #d7dd44 buttons with 2px black borders and 10px radius.", "sha256": "30c34b38edf3e228b96bc33b5d745894b4f19ff61c38fb4cf5a780032bdb7093", "bytes": 9717}, + "decentraland": {"name": "Decentraland", "category": "Design Systems", "description": "Decentraland.org home page — a near-black (#161518) body under saturated purple bands (#570f88, #39055c), white Inter headlines at 60px/600, and uppercase Inter buttons in a hot pink-red (#ff2d55) with 16px corners, built on the MUI-based decentraland-ui2 theme with a 6px base radius.", "sha256": "b885ae7a6268117d790129d476271f279c1528bc01f55d04eb33ba529cbcabfe", "bytes": 11035}, + "deel": {"name": "Deel", "category": "Product & SaaS", "description": "Deel's homepage pairs Bagoss Condensed headlines (60px/500) and Inter body text on white, cream #fffbf4 and warm #f7f5f2 surfaces with a deep purple #201547 hero card, near-black #1b1b1b and #141414 bands, fully rounded 200px pill buttons in indigo #201148, black and white, and 16px-rounded product cards.", "sha256": "39e18c14fa2a8be48868a831a1332760e33a5b97fcc77ea1560659f5745d2676", "bytes": 16594}, + "deestone-group": {"name": "Deestone Group", "category": "Thai Brands", "description": "Thai tyre maker Deestone's website (ดีสโตน): a white #ffffff page with #ebebeb panels and footer, dark #252525 text in the dokchamp Thai display face (19px navigation) and Sarabun 15px, an orange-red #f15a22 and orange #ff6700 brand accent, and 20px and 4px radii.", "sha256": "b4069158edc7f0ad5b1dba263df45a1c8b05d37343cdaad760752cfe1cdc354a", "bytes": 10700}, + "deezer": {"name": "Deezer", "category": "Music & Audio", "description": "Deezer (deezer.com): a near-black #0f0d13 page with an off-white #fdfcfe hero, Deezer purple #a238ff actions (12px-radius buttons, hover #9333e8) and #fdfcfe / #a9a6aa text. Headlines are the custom Deezer Brand face — 140px/800 uppercase hero, 56px/700 section titles — with Inter for UI and body (16px, 14px/500/25px). Purple sound-wave rings and a curved section edge carry the 2023 purple-heart identity.", "sha256": "8bbadc9594bf184c22e5614dd9168ed8abdfd7ca001692fa537a5fd14bb1a3be", "bytes": 19801}, + "default": {"name": "Neutral Modern", "category": "Starter", "description": "A clean, product-oriented default. Use when the brief doesn't call for a", "sha256": "afe91e4b5de6429f57aaba970ab84d7a074170ef82d001dc3edfb8b98c85590a", "bytes": 2815}, + "dell": {"name": "Dell", "category": "Design Systems", "description": "Dell's homepage is a dark-navy retail canvas (#0a0e14) with white Roboto text, Dell blue (#0672cb) buttons with a 2px radius, near-square 2px white cards with a faint shadow, and a #f0f0f0 footer. The public Dell Design System (DDS v3) documents the same Roboto/blue/slate language as --dds-* tokens.", "sha256": "a7ddf3337f129dad1c9fab76e38e0c9cd631877a78298fee57994cec6abd0ff2", "bytes": 14550}, + "deloitte": {"name": "Deloitte Southeast Asia", "category": "Agencies & Studios", "description": "Deloitte Southeast Asia (deloitte.com/southeast-asia/en.html) measured at 1280px: a black header and hero over a white page, Open Sans in weights 300/400/600, a 40px light h1, #007cb0 blue action pills with 100px radius, 8px-radius white cards with a rgba(0, 0, 0, 0.16) 0px 3px 6px 0px shadow, and full-width section label bars in green #26890d, blue #007cb0 and teal #0d8390.", "sha256": "35fdeda40d76bb09d5c2a9a06d157d3d98975f7da2c4c2aaaa74ae453cbaecd9", "bytes": 11647}, + "delta": {"name": "Delta Air Lines", "category": "Airlines", "description": "Delta Air Lines (delta.com): a navy-and-red airline booking site. Whitney Condensed 300 hero headlines at 48px/44px, Whitney 14px–18px UI text in #3e414f, #e01933 red 4px-radius Find Flights buttons 64px tall (hover #ad1834), a #001122 navy gradient header and footer, and white 8px-radius cards with #dfe0e6 borders.", "sha256": "d3668d9a868a18dac670c7fabdb23a59b2dcb6046044c37c86788b8eb0a74cfd", "bytes": 14596}, + "demco": {"name": "DEMCO", "category": "Thai Brands", "description": "Thai investor and corporate site of DEMCO Public Company Limited (power and infrastructure engineering), set entirely in Prompt (42px bold uppercase display with 2px tracking, 16px body), with gold #bb9f4b links, deep purple #5f2c6b panels and footer, near-black #1d1d1d ink on white and #f8f8f8 bands.", "sha256": "a21bfa282c1cf6b49fbcabc4e051c68ecb58c41b781d8e0014bcd12045eaf764", "bytes": 9758}, + "denmark-gov": {"name": "Danish Government (Digitaliseringsstyrelsen)", "category": "Design Systems", "description": "Digitaliseringsstyrelsen's site (digst.dk) is a warm, editorial public-sector design: a cream canvas (#f5f1e6), deep aubergine ink and primary (#3f1a2b), white cards, and a single light-weight humanist sans loaded as headings-font and body-font at 30px display and 16px body with wide letter-spacing. Controls are round, with a pill-radius search field (9999px), and burgundy panels carry white-on-dark link lists.", "sha256": "df81f7364e196508dcb11ec511de4de01c158a545b17fe37d9e6cd40f18e9c02", "bytes": 11400}, + "deno": {"name": "Deno", "category": "Developer Tools & IDEs", "description": "Deno uses bold Inter 700 headlines (70.4px, -1.76px) in #000000 on white with #56575a body text, a #70ffaf runtime-green announcement bar and pill CTAs, dark #25272b pills, a #66c2ff Moranga-serif Deploy button with a hard #0077cc offset shadow, 8px-radius code cards in Menlo and a #121417 footer.", "sha256": "ba31e62e008bad0f44444641d89e58388569ee112356379c263d6284758f939a", "bytes": 15718}, + "department-of-medical-sciences": {"name": "Department of Medical Sciences (DMSc)", "category": "Thai Brands", "description": "Thai Ministry of Public Health science department portal at dmsc.moph.go.th: Noto Sans Thai 14px body and 34-36px weight 600 headings, navy #01377d with green #209972 fills, square buttons with an 18px cut corner, 10.8px cards with a 30px 60px soft shadow.", "sha256": "5bdc9002b1819dcd76a62ef752c2d082bb391c2194b9813ed3988c6a9b90b1bc", "bytes": 10133}, + "depo-luxe": {"name": "Depo Luxe", "category": "Culture & Events", "description": "Depo Luxe, a film production company for luxury brands: a pure black #000000 canvas with white #ffffff EB Garamond type (36px capitalized titles, 13px and 16px serif labels at slightly negative tracking), roman-numeral work index, 0px corners and video imagery as the only color.", "sha256": "18e2ce31a9b513461f94cd8a107d8405a0e86d9396ef9d4b16617e99ff807223", "bytes": 9691}, + "deque": {"name": "Deque", "category": "Design Systems", "description": "Deque's marketing site sets Graphik at weight 500 with tight negative tracking on a warm cream canvas (#f6f3ed), with 9999px pill buttons in terracotta (#cc463b) and charcoal (#282a26), a #ffbc64 highlighter behind the key headline phrase, and pale blue (#c5dde9) bands. Its Cauldron library uses Roboto and 3px charcoal-blue buttons instead.", "sha256": "159f48ce2f2480d3164267321c630526eb9fd35bf276a432dc220effe985888b", "bytes": 13871}, + "der-baukasten": {"name": "Der Baukasten", "category": "Tech & AI", "description": "Der Baukasten, a 3D character concept site by tubik: a #000000 canvas with off-white #effcfc futura-pt type (500-weight wordmark at 255.701px with -20.4561px tracking), three saturated panels in blue #0581fe, red #f54d25 and yellow #efc11b, and 11.25px outlined download buttons.", "sha256": "0a7652af2a303fe1a79573a584d972d1d5a7e531ada38f2541785570c30f8fbe", "bytes": 10683}, + "der-spiegel": {"name": "DER SPIEGEL", "category": "News & Publishing", "description": "DER SPIEGEL, Germany's news site: an orange-red #e64415 header on a warm grey #f1efed page with white #ffffff cards, black #000000 headlines in SpiegelSlabCdUI 800 at 36px, SpiegelSansUI 16px body, 1.5px corners and a 44px orange register button.", "sha256": "2e5f7e043f35802fdf7c0f49af7312c45c05149d0a338171904c2c7ec2ce4d7c", "bytes": 13630}, + "descript": {"name": "Descript", "category": "Design & Creative Tools", "description": "Descript, the text-based AI video and audio editor: deep maroon #390a1a page with a #fff7fa blush canvas, coral-red #f73b3b primary buttons at 12px radius, gamuthDisplay serif headlines at 88px over booton sans body at 18px/25.2px, near-black #190308 testimonial cards and a #110a0d footer.", "sha256": "766769396231c1144a0837d09bbb13c27ae18cb5f647dfeb4b65ca7f4000e40f", "bytes": 14762}, + "detroit-paris": {"name": "Detroit (Detroit Paris)", "category": "Fashion & Apparel", "description": "AI production house in Paris for luxury brands: a stark black-on-white page with a 184px Mangogrotesque 700 uppercase headline, tiny 9.6px uppercase Barlow chrome, square-edged campaign imagery, hairline #0b0b0b1a borders and a difference-blended fixed nav. Built in Webflow.", "sha256": "3e292472cf82691ebd5f4eb99be84a7b8b22a4d5d3adb490485be48dc86d501f", "bytes": 15411}, + "deutsche-bahn": {"name": "Deutsche Bahn", "category": "Logistics & Mobility", "description": "Deutsche Bahn international booking site (int.bahn.de/en): DB red #ec0016 buttons with 4px corners on white and #f0f3f5 grey bands, slate #282d37 text, DBScreenHead 900 headings (32px/40px desktop) over DBScreenSans 400/700 at 16px, one 8px-blur nav shadow, built on the DB UX Design System's --db-* variables.", "sha256": "2ae5d780712e34d0971e2c7ce5e11bb2630a1ba4b93a7a56ab04a25d5c5a2299", "bytes": 17618}, + "deutsche-bank": {"name": "Deutsche Bank", "category": "Banking & Insurance", "description": "Deutsche Bank's group home page (db.com): white canvas with black text, navy #1e2a78 and #16184e accents, a bright blue #0550d1 for buttons and links, a #e7f4fe light-blue band, 2px-radius buttons and soft 24px-blur card shadows, set entirely in the proprietary Deutsche Bank Text face at weight 400.", "sha256": "ff5973948032d32cb747a02bfb03d17846f0ed4dacbaeeca709991754057f021", "bytes": 15122}, + "deutsche-bank-thailand": {"name": "Deutsche Bank", "category": "Thai Brands", "description": "Deutsche Bank Thailand country page on country.db.com: white canvas, black ink, action blue #0550d1 on outlined 2px-radius buttons and expand icons, deep navy #1e2a78 info cards and links, #16184e headline, the Deutsche Bank Text typeface at 16px body and 44px display.", "sha256": "d2ee9246fec491fb3e1dbcf166b517ba7e22e217a85719f1267a42d5a02ee848", "bytes": 10045}, + "dexcom": {"name": "Dexcom", "category": "Healthcare & Wellness", "description": "Dexcom US home page (dexcom.com): Gilroy 700 headlines with negative tracking (52px/56px hero), fully pill-shaped 56px green #137d00 buttons with white 16px/700 labels, #161a1d ink on white and #f5f5f5 bands, a plum #412636 Stelo section, and a Chakra UI theme underneath.", "sha256": "e0f8289c46b55dfc96e046fa9d17c0ff1572d53d602754c9d796171115b76223", "bytes": 11820}, + "dga": {"name": "Digital Government Development Agency (DGA)", "category": "Thai Brands", "description": "DGA's English home page (dga.or.th/en): Prompt typeface at weights 400 to 700, orange #da3c0c headings and links with 100px-radius outlined pill buttons, grey #707070 paragraphs on white, a deep navy #1e154c footer, soft 8px-blur header shadow, built in WordPress with Elementor.", "sha256": "8b279ac8d088961965b877dc1a77b7cb0d3784bd42efa80a1df494be8045cf1c", "bytes": 12073}, + "dhipaya": {"name": "Dhipaya Insurance (ทิพยประกันภัย)", "category": "Thai Brands", "description": "Dhipaya Insurance's English home page (dhipaya.co.th/en): a saturated blue #21479a and navy #063291 page with white text, Superspace display type at 36px, Tahoma body, square-cornered 48px buttons with a white 2px border (red #e41a23 or periwinkle #7b9ce4), pill 50px inputs and flat, shadow-free Bootstrap-based layout.", "sha256": "09164d4e84abdc54848ee09bf8043781efd4ed3705722a352622268b8d1bed0e", "bytes": 12022}, + "dhk-architects": {"name": "dhk Architects", "category": "Architecture & Interiors", "description": "dhk architects' home page (dhk.co.za): an all-black, white-type studio site in Helveticanowdisplay at weights 400 to 700, with 60.544px section headings, 16px/22.4px body, bracketed text buttons, a dark/light switch, square-edged architectural photography and no shadows, borders or filled buttons.", "sha256": "54f3b059c8fa5e05c02d174ae424af4e2d6a8c3510e9df3d77459e87adac8176", "bytes": 11557}, + "dhl": {"name": "DHL", "category": "Logistics & Mobility", "description": "DHL's US homepage on dhl.com: a white #ffffff canvas with black #000000 text set entirely in the corporate typeface Delivery (800 for 36px/46.8px headlines, 300 for 28px and 20px intros, 400 for 16px/20.8px body), a 63px Postyellow #ffcc00 top bar with the red logo, and DHL Red #d40511 buttons with 12px corners (Track: 52px tall, 7px 15.4px padding; CTAs: 14px 32px) that darken to #9a0000 / #95040c on hover. Cards are white with a 0 1px 4px shadow, grey #f5f5f5 panels, 7px spacing steps.", "sha256": "f5214a63457f631eac03d199e5330142fd0d9409afebd1d43495481067fa5840", "bytes": 25097}, + "dichtm-fashion": {"name": "DICH™ Fashion", "category": "Fashion & Apparel", "description": "DICH Fashion concept site (dich-fashion.webflow.io): a black #070707 intro with a pink-violet-peach gradient ring, then a peach #ffdfc4 page, ultra-large uppercase T 012 display type (253.293px), tiny 10.0928px Nbarchitektstd terminal-style labels, hairline grid lines, no shadows and no filled buttons.", "sha256": "b87efbedf006d15fddf2b728c3bd3559bde48f0398c787cf2cccf57b584d2b31", "bytes": 10766}, + "didi": {"name": "DiDi Global", "category": "Logistics & Mobility", "description": "DiDi Global's official home page (didiglobal.com): light #f8f8f8 and white screens with grey #666666 text, DiDi orange #ff7f41 for links and a circular outlined 'Learn More' button, Aspira Regular type with generous tracking (47px/54px at 2.6px), a circular hero image mask, flat and shadow-free.", "sha256": "d8af33bd773696b936530bb9c834a23d5d6cc4fe4048635540a46c528355f1be", "bytes": 10429}, + "digilab": {"name": "Digilab", "category": "Tech & AI", "description": "Digilab (digilab.co), a New Zealand bioacoustics AI company: cream #f2eee5 canvas, dark purple #160e20 headlines in denimInk 500 at 75.5555px with -2.27px tracking, lilac #cda6ff pill buttons (26.67px radius) with 10.67px uppercase groteskMono labels, flat with ghosted tree illustrations.", "sha256": "11bbe583cb782d406a958794fbaecfca1eabe72b3ec7edfbf902257816225655", "bytes": 11692}, + "digital-agency-jp": {"name": "デジタル庁 (Digital Agency, Japan)", "category": "Design Systems", "description": "The Digital Agency of Japan home page (digital.go.jp) is a plain government news portal: Noto Sans JP at 28px/700 headings and 17px body, #333333 text on white, a single deep-blue #00118f used for underlined links, black 1px outlines on 16px and 24px rounded cards, and a translucent white #ffffffe0 header.", "sha256": "d29a21a39b44456d92b69e1695171dd6d06fec9387c818d7eb86d96ffdba3491", "bytes": 10885}, + "digital-design-days-x": {"name": "Digital Design Days Palermo (DDDx)", "category": "Architecture & Interiors", "description": "Digital Design Days Palermo (palermo.ddd.live), the Sicily edition of DDD: a magenta-to-purple gradient hero with 111.224px neue-haas-grotesk-display 600 uppercase titles at -1.67px tracking, midnight-purple #201a39 ink, 13.7143px DM Mono uppercase labels, 100px pill buttons and 10px frosted cards.", "sha256": "1831e60279f0a94b318b236103a9f023ef938b2a4d4e391b131966479bd5a39a", "bytes": 11485}, + "digital-economy-promotion-agency": {"name": "depa (Digital Economy Promotion Agency)", "category": "Thai Brands", "description": "depa Thailand's English home page (depa.or.th/en/home): a bright yellow #fff200 and white portal with sukhumwit type in very light weights (100 to 200) at 16px, navy #173b6b section titles, slate #586667 text, a #333333 footer, 4px-radius yellow buttons, 45px-radius tiles and soft 18px-blur card shadows.", "sha256": "0c7f47fdc81114b6b67d60a9b13f9125e028d1f55db6bd1b1158d178853eadef", "bytes": 11499}, + "digital-gov": {"name": "U.S. Web Design System", "category": "Design Systems", "description": "USWDS, the U.S. Web Design System, gives federal sites a plain, accessible look: Source Sans Pro Web type (16px body, 700 buttons), federal blue #005ea2 with hover #1a4480, near-black ink #1b1b1b, slate #3d4551 and #565c65 bands, and 4px-radius rectangular buttons; GSA.gov is the live implementation measured here.", "sha256": "312b7f910fc1e60023d011224a1c5309372b5a37c97c263bbdecb4971723c0f7", "bytes": 14660}, + "digitalists-1": {"name": "digitalists", "category": "Agencies & Studios", "description": "digitalists is a Vienna and Eisenstadt WordPress agency whose German site pairs a saturated lemon-yellow canvas (#f1e500) with pure black type, PP Neue Montreal 400/700, PP Fraktion Mono uppercase labels, 7px-radius black and yellow buttons and flat, shadow-free color fields.", "sha256": "b1e171570af1e248e0b9ac5d0de05ee090d6a65425e825233ddf215611c9e1e7", "bytes": 15448}, + "digitalocean": {"name": "DigitalOcean", "category": "Backend, Database & DevOps", "description": "DigitalOcean's AI-Native Cloud site is dark: #000000 canvas with #000f0f cards (16px radius, #f4f5f51a hairline), Plus Jakarta Sans 800 headlines (48px, -1.5px), Inter 16px/24px body in #e5eceb, #6fe0ed aqua pill buttons (999px radius, 40px tall) hovering to #1aafbf and a #104b55 teal announcement bar.", "sha256": "040551488b68f164536e70402342849e74f984669b245feae566754019d1d0e9", "bytes": 13138}, + "dime-mtl": {"name": "Dime MTL", "category": "Fashion & Apparel", "description": "Dime MTL is a Shopify apparel and skate storefront: white #ffffff canvas, black #000000 ink, Instrument Serif 80px titles in white over full-bleed photography, Habitus weight 300 at 12px and 10px with negative tracking, 0px-radius square geometry and no chromatic accent.", "sha256": "b9d43639d1e6e1a4f03e44357690116d345d99e238ba346e3a1455234ddbfed4", "bytes": 12323}, + "disaya": {"name": "DISAYA", "category": "Thai Brands", "description": "DISAYA is a Bangkok fashion label whose Shopify storefront (Shella theme) uses a white #ffffff canvas, black #000000 ink, a single Questrial face, a blush #f9dcd6 and deep-teal #224d51 pair for 30px-radius pill buttons, flat shadow-free surfaces and full-bleed editorial photography.", "sha256": "b3713c47d8c0d0efd5c1ea4779eb017168178cef8d24ae33086ef2062f2ab9e6", "bytes": 11831}, + "discord": {"name": "Discord", "category": "Media & Consumer Tech", "description": "Discord's home page puts white text on a deep indigo (#1a2081) illustrated night sky, with Blurple #5865f2 and white 12px-radius 56px buttons, ABC Ginto Discord Nord uppercase headlines at 44px/700, ABC Ginto Discord body copy, and big 88px-radius translucent feature panels.", "sha256": "b00ed9debd8b02c9a1e534dfac9e25bd2c79e1886995e61d4f8f088473b0fbf8", "bytes": 12774}, + "disney": {"name": "Disney Thailand", "category": "Gaming", "description": "Disney Thailand (disney.co.th), a Thai-language poster-wall storefront: neutral #f8f9fa canvas with white, #f1f2f3 and #054553 teal bands, Noto Sans Thai type at 16px/28px body and 30px section headings, and one cyan #02d6e8 pill button (24px radius, 48px tall) with black label.", "sha256": "491b65fe4518f7a3c7f3aa37ebb01f0b5e79c99e4a6874fb0b3b9c9d485abfe5", "bytes": 11166}, + "dithered": {"name": "Dithered", "category": "Retro & Nostalgic", "description": "Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.", "sha256": "b5988f7803ec4fbfae0ce58b2427f8885a829d8a89a45b7086750902be14049e", "bytes": 3072}, + "dji": {"name": "DJI", "category": "Consumer Electronics", "description": "DJI's Thailand English storefront pairs a white #ffffff canvas and #ededed product tiles with a #272727 footer, DJI blue #0070d5 pill buttons, Open Sans at 32px/16px with negative tracking, 64px capsule outlines and studio product photography.", "sha256": "f477ae1ade1296eb17abf8fa447901e08f44fd694068c5bf2d03f31637827acc", "bytes": 11048}, + "docker": {"name": "Docker", "category": "Developer Tools & IDEs", "description": "Docker's site pairs ABC Repro 64px/500 headlines (-1.92px) with Inter 16px/22.4px body in #2c333f on a #f9fafb canvas, #2560ff blue buttons (8px radius hero, 4px header) with #003db5 borders, 18px-radius product cards, a #00084d announcement bar, #0e1217 dark hero and terminal panels in ui-monospace.", "sha256": "915782ab4cd9975e710dd7e40d869c2a16980560050de1e55ccf1e035925bbda", "bytes": 15102}, + "documenso": {"name": "Documenso", "category": "Product & SaaS", "description": "Documenso.com home: white #ffffff canvas, Inter 44px/600 headlines (-0.88px) in #171717 over #4d4d4d body text, lime #a2e771 6px-radius buttons with dark-green #1f3d0a labels (hover #6bbd36), deep forest #101f05 bands with mint #c9f1ac headings, PT Mono code panels, #fbfbfb 18px-radius feature cards and a near-black #0f0f0f footer.", "sha256": "552cb3fcd7f6e35c1ba273735c76a477840b631c4bd3be3de33ea660b8a5033f", "bytes": 11104}, + "docusign": {"name": "Docusign", "category": "Productivity & SaaS", "description": "Docusign's home page pairs a deep violet hero gradient with white and sand content bands, set entirely in the proprietary DSIndigo typeface: an 80px/300 display headline, 24px/36px lead copy in #130032, uppercase 14px/600 'TRY FOR FREE' buttons in electric violet #4c00ff (hover #4000cc) with 8px radius, and lavender #ede5ff product cards.", "sha256": "78579b0f397d334554af224277090dccee5233095cd6982562a0d2e3f96227c9", "bytes": 16736}, + "dogstudio": {"name": "Dogstudio", "category": "Agencies & Studios", "description": "Dogstudio (Dogstudio / DEPT.) is a dark, cinematic studio site: near-black #131419 canvas, white #ffffff and periwinkle-tinted translucent greys (#a0a8dcb3, #bbc2e54d) for text, thin red #e43333 accent lines, GT Sectra Display Bold at 120px/700 for the hero, Heebo 200–400 for lists and body (80px project names, 14px/24px copy) and Gilroy 9px tracked uppercase labels.", "sha256": "082875c738c0d476aa532377be6391bab89396ff92932fb4225ae6b7e40539e8", "bytes": 13399}, + "dohome": {"name": "DoHome", "category": "Thai Brands", "description": "DoHome is a Thai home-improvement retailer whose Tailwind v4 storefront uses Prompt, a #f26529 orange primary with a #f15a24 promo panel, #343a40 ink on #f8f9fa and white surfaces, 10px-radius cards and add-to-cart buttons, and one soft 0 4px 12px shadow.", "sha256": "0b0cae6c3cd615d7411e98ec8bd869f7d06d6bf4b5d715dc97cf140c2dd6434b", "bytes": 11756}, + "doi-chaang": {"name": "Doi Chaang Coffee Co.", "category": "Thai Brands", "description": "Doi Chaang Coffee Co. (Thai Mountain Coffee) is a WordPress storefront in navy #14324e, burnt orange #df5929, yellow #f6ce3d and cyan #00a7e1, with Metropolis body at 21px, a Vestige Harmony serif display at 38px, square 2px-ring outline buttons and a triangle pattern motif.", "sha256": "81a60c2192bb2ffb473999e62787eda9d021b7e8f093411edc16938a8c788667", "bytes": 10705}, + "dolsten-co": {"name": "Dolsten & Co.", "category": "Agencies & Studios", "description": "Dolsten & Co. is an AI-first creative studio whose site uses a lavender #e3deea canvas, warm near-black #27231f ink, white 32px-tall square buttons, all-caps PP Neue Montreal headings and IBM Plex Mono 500 text, hairlines with plus-sign crosshairs and no shadows.", "sha256": "45dcc886594d8fa2dd686b35ac61ddd4c332e3643559b8adc16863dfa86f601d", "bytes": 11770}, + "dominos": {"name": "Domino's Pizza Thailand", "category": "Food & Beverage", "description": "Domino's Pizza Thailand (queued dominos.com resolves to dominospizza.co.th) is a Thai-language ordering site in DB Heavent at 24px and 30px, white and #f4f4f4 surfaces, #898989 secondary text, #006491 blue controls, 12px tiles and a #53565a footer with a 5px #9d2235 border.", "sha256": "3f34ee056a257b6d8a6983960b6b79b97ffa2ec6e9d12314276fc2842852b45e", "bytes": 10074}, + "don-molinico": {"name": "Don Molinico", "category": "Food & Beverage", "description": "Don Molinico is a Navarra piquillo-pepper brand whose site uses a cream #fbf5e7 canvas, signal red #d70321 type, gold #cba058 button labels, one uppercase condensed face (super-med) with 192px and 166.4px headlines, 64px square buttons and no shadows.", "sha256": "0786ae70c3f6651863959e306649ec631a1704d831bc53e7da65eb512a459960", "bytes": 10574}, + "don-mueang-international-airport": {"name": "Don Mueang International Airport", "category": "Thai Brands", "description": "The Don Mueang International Airport (DMK) site in the Airports of Thailand network uses Kanit throughout, a #03a9f4 airport bar, #00aff4 sky-blue accents, #4b4b4b ink on white and #f1f1f1 bands, 7px-8px cards with soft grey shadows and a pill-shaped flight search.", "sha256": "a8e8d1165556124a0a8dc55d7cee7e58cfef2b5eca4053df7b791651548f8ac8", "bytes": 11185}, + "dont-board-me": {"name": "Don't Board Me", "category": "Product & SaaS", "description": "Don't Board Me is a San Diego pet-sitting site with a candy-pink #f4ced3 canvas, signal-red #e33529 type in uppercase Bayon at 165px to 260px, #693413 brown ink, a #2b6786 blue counterpoint, Neue Montreal labels, square red buttons and round overlapping discs.", "sha256": "115747a13dd167a0129a391b09f16f596c6013acde0d2888c8ac7d6fae01fed0", "bytes": 12463}, + "doodle": {"name": "Doodle", "category": "Creative & Artistic", "description": "Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.", "sha256": "333571b701df06cc05d6374f2d75fbd413fe7cce14020a7cd40882b957b086e4", "bytes": 3070}, + "dot-property": {"name": "Dot Property", "category": "Thai Brands", "description": "Dot Property (dotproperty.co.th), a Thai-language property portal for buying, renting and listing homes, condos and land. Noto Sans Thai at weights 200 to 500, white and #f3f4f6 surfaces, near-black ink, #2a6b2a green accent text, a declared #4FB84F brand variable, pill-shaped search bar and 8px-radius cards over photography.", "sha256": "cbe9a174ce002d29857fb41529a18577e54f7bb7ffb133d5d1887ac94ac179cb", "bytes": 10942}, + "double-play": {"name": "Double Play", "category": "Agencies & Studios", "description": "Double Play GmbH is a German web and brand studio whose Webflow site uses one chroma, ultramarine #002bba, on an off-white #fbfbfb canvas, Perfectly Nineties serif at 120px and 64px, Neue Montreal at 32px, tennis-themed copy, full-width blue bands, square corners and no shadows.", "sha256": "f0a89fc514dab7a95026ecf0810bf46c5bf3b1b225ef036abff733a2d829907c", "bytes": 9843}, + "dove": {"name": "Dove", "category": "Beauty & Personal Care", "description": "Dove (dove.com, US English home page): a navy-and-white personal-care storefront. Navy #001f5f buttons with square 0px corners and white SHOP NOW labels, #3b3b3b body copy in Sofia Pro Regular, a Helvetica 40px light h1, a Century Old Style Italic 64px accent word, and #f6f6f6 grey bands between full-bleed navy promo blocks.", "sha256": "07d2acd3cca4128e404f10bc7e23a2c1aa3bd5bd4d46468959ebead8706bf62a", "bytes": 15076}, + "dragonfly-redux": {"name": "Dragonfly Redux", "category": "Tech & AI", "description": "Dragonfly Redux (dragonfly2.studiofreight.dev): an all-black #000000 crypto-fund site with a huge orange #fa4c14 DRAGONFLY wordmark, #7d7d7d grey body copy in FK Roman Standard 300, uppercase NON Natural Grotesk section titles at 16px, NON Natural Mono 10px labels, and #f2f2f21a hairline rules on an 8-column grid.", "sha256": "5aa7ad8f04902c8fd0ebbb1f5688757ff69b5900262eed655821633e4137594a", "bytes": 11066}, + "dramatic": {"name": "Dramatic", "category": "Bold & Expressive", "description": "High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.", "sha256": "40756ea224d42ae4a579cc6c771226b0d9d20e48b953f49e221dfd1382791d16", "bytes": 3051}, + "drawbotics": {"name": "Drawbotics", "category": "Design Systems", "description": "Marketing site of Drawbotics, a Brussels-linked real-estate sales and marketing software company. Rubik at regular weight throughout (60px display, 16px body), a single cyan action color #3db5d0 that deepens to #247488 on hover, deep navy headings #0a083b, slate body copy #57586e, and small 4-5px radii on rectangular buttons over a near-white canvas with pale blue-grey section bands.", "sha256": "b5a65510ae02aeae770fa31b7780abff0c6210baa3a4e164a24aff01f2df9701", "bytes": 14510}, + "dribbble": {"name": "Dribbble", "category": "Agencies & Studios", "description": "Dribbble's live design language — a white (#ffffff) gallery canvas with near-black indigo ink #0d0c22, pill-shaped (9999px) ink buttons that lift to #3d3d4e on hover, and the signature Dribbble pink #ea4c89 reserved for search, Pro upsells and badges. Every word is set in GitHub's open-source Mona Sans (hero 52px/600, UI 14px/500), shots sit in a three-column grid of 12px-radius thumbnails, and the component layer is Shoelace web components re-themed with --sl-color-primary set to pink.", "sha256": "04fb168f9c5fa6149e30ae49170654e188d20484d962150127055fc7fc3a6e0d", "bytes": 28410}, + "drizzle": {"name": "Drizzle ORM", "category": "Backend, Database & DevOps", "description": "Drizzle ORM (orm.drizzle.team) is a white #ffffff, system-font page: #444444 12–14px text, a 40px/700 hero with a handwritten ship-ship-ship joke, square #f6f6f7 tile buttons hovering to #eff0f3, a navy #282b3b 4px-radius action button (16px 32px, 48px tall), 8px-radius cards with #e8e8e8 hairlines and hand-drawn raindrop mascots.", "sha256": "6b91e721ba137bd41ae477936fdaff53beaeedd7f975339362b1c5a16dac5a75", "bytes": 14409}, + "droga5": {"name": "Droga5", "category": "Agencies & Studios", "description": "Droga5 (droga5.com, Part of Accenture Song): a white agency home page with a 100px DroteskNo5-Bold black headline at -3px tracking, 35px DroteskNo5-Regular statements, a black rectangular 'See what we do' button, short #0000d5 blue rules above section labels, square corners, and cool-grey #949799 secondary text.", "sha256": "2f049a5d91fbefa9fdfa128730bae609efbc44ba328d3c8b19236296ace0c394", "bytes": 10904}, + "dropbox": {"name": "Dropbox", "category": "Product & SaaS", "description": "Dropbox (www.dropbox.com): warm off-white #f7f5f2 and white pages with graphite #1e1919 headings, a #0061fe blue call to action with 16px rounded corners, Sharp Grotesk 500 at 40px for the h1, Atlas Grotesk Web for body at 16px/24px, and a full-width graphite band for the AI-integrations section.", "sha256": "f421c69419397f7184e37d9e81bb9bd64e50853cdc6e050612bf9753159d01fd", "bytes": 12953}, + "dropbox-brand": {"name": "Dropbox Brand Guidelines", "category": "Agencies & Studios", "description": "Dropbox Brand Guidelines (brand.dropbox.com): a white page with a #0061fe blue 36px bold headline in the Dbsharpgroteskvariable Vf variable face, #736c64 body copy in Atlas Grotesk Web 14px/22px, and a stack of full-bleed colour tiles (yellow #fad24b, cyan #3dd3ee, tangerine #ff8c19, navy #283750, lilac #c8aff0) with 8px corners that turn #1a1918 on hover.", "sha256": "582e1817e59178b32054722fae659cd4ac4e502f8d2402fe5f3c3960bce49038", "bytes": 11058}, + "drunk-elephant": {"name": "Drunk Elephant", "category": "Beauty & Personal Care", "description": "Drunk Elephant's Salesforce Commerce Cloud storefront pairs a white #ffffff canvas and warm charcoal #45474a ink with BrownRegular display type at 66px/400 and -1.98px tracking (often lowercase), BrownBold 12px/700 uppercase buttons with 0.6px tracking in square 1px charcoal outlines (11px 40px, 38px tall), SentinelMedium serif product titles, #fafafa product tiles with 5px corners, and pop accent fills — electric lime #e6fe52, lavender #f6dcff and aqua #bffcf3.", "sha256": "7341a35ec950038fe1e638158c140a5e308e97d781f0df341f953f2d4a663973", "bytes": 25322}, + "dtac": {"name": "dtac", "category": "Thai Brands", "description": "dtac (www.dtac.co.th/en, 'dtac True Better Together'): a light Thai telecom storefront on white #ffffff and grey #f5f5f5 with dtacEvolution headings at 40px weight 500, Kanit Light body, #007ad0 blue text links that turn #e00000 on hover, 16px-rounded promo banners, and outlined 10px cards with #d6d6d6 borders.", "sha256": "34ff68de5ff814ed13905e8c9bc89681ec4b7751c7423b8e3189bc79708bdfe5", "bytes": 10947}, + "dub": {"name": "Dub", "category": "Product & SaaS", "description": "Dub.co home: white #ffffff / #fafafa neutral canvas, #171717 ink with a #737373 grey scale, Satoshi 48px/500 headlines over Inter 14-16px UI text and GeistMono numerals, black #000000 8px-radius buttons (hover #262626), #e5e5e5 hairline borders and small purple/green/orange product accents.", "sha256": "93b1cdf05df82f37055859ca8413258ba452cadda4cfb630b5e048123005df41", "bytes": 11979}, + "ducati": {"name": "Ducati", "category": "Automotive", "description": "Ducati's Thailand-market home page (ducati.com/th/th, English content): off-white #fafafa canvas, #0f0f0f ink and footer, Ducati red #cc0000/#cb1517 for actions and links, and three custom families — ducati-extended 48px/700 headlines, ducati-condensed 14px uppercase links tracked 1px, ducati 12px/18px body — with 2px corners.", "sha256": "4cccd6396ca087cd14b315e6610247501b5e6ffde9b0e811954e2efc34d0d09c", "bytes": 11266}, + "duet": {"name": "Duet Design System", "category": "Design Systems", "description": "Duet is the design system of Finnish insurers LocalTapiola and Turva: the localtapiola-sans typeface at 800 weight (58px display, 24px lead text), a #0077b3 blue header and primary action, #082a4d navy ink on white #ffffff with #f5f8fa panels, 4px component radii, pill (320px) controls and soft #00294d-tinted shadows.", "sha256": "f451aab725ba35cd02b813e48913139bbbcab36ee96fec0c5383ad7663499a78", "bytes": 12436}, + "dulcedo": {"name": "Dulcedo", "category": "Fashion & Apparel", "description": "Dulcedo (dulcedo.com), a Montreal talent agency: near-black #0a0a0a pages with champagne-gold #c5ae79 text, light #f4f4f4 sections with black type, Helvetica Now Display in uppercase weight 800 at 100px with -3px tracking, Saol Display serif for the wordmark, black pill buttons 34px high and 2px-cornered cards.", "sha256": "339a3399a7805c60d50250797c57d5489dcad27394a753eae73b9b6f39f62173", "bytes": 11267}, + "duolingo": {"name": "Duolingo", "category": "Education", "description": "Duolingo's web identity as measured on duolingo.com — a white Snow canvas, Feather Green #58cc02 3D \"lip\" buttons (12px radius, 50px tall, 4px Tree Frog #58a700 bottom shadow), Macaw blue #1cb0f6 secondary actions, Wolf #777777 body copy set in the served duolingo-sans family at 17px/500, and the bespoke Feather Bold display face (served as `feather`) at 48–64px in lowercase green. Flat surfaces, 2px Swan #e5e5e5 borders, 16px card radii and a full-bleed green footer.", "sha256": "8d376fdbd821184bd507b7c4d85b2272e5c886f1ca1710cffce0944d5bdf078a", "bytes": 26405}, + "duroc-1": {"name": "Duroc", "category": "Food & Beverage", "description": "Duroc (duroc.ma), Moroccan cherry-tomato grower: a saturated tomato-red #d23b37 site with white Okomito type in weight 900 uppercase (42px intro, 80px page titles), #d64119 orange-red CONTINUER and CTA buttons, darker #ae2521 pill chips with 26px radius, and a blue #2d78b2 impact section.", "sha256": "021d44215fc3b6c3bdb0b3afb08b5954d61211e3da17a9706164bff9c836a562", "bytes": 11341}, + "dusit-international-corporate": {"name": "Dusit International", "category": "Thai Brands", "description": "Dusit International corporate site (Dusit Thani Public Company Limited) - a calm blue-grey palette (#32323f ink, #5f7380 link blue, #eff1f2 page ground) with gold accents in the root variables, set in the proprietary Dusit Display serif and Dusit Text sans at 51px and 14px.", "sha256": "c98659d04df4eb5967e9c5dfdefc7ecd0fb9a1505d7f1e3862b0be197202e704", "bytes": 10030}, + "dusit-shop": {"name": "Dusit Hotels & Resorts", "category": "Thai Brands", "description": "Dusit Hotels & Resorts (dusit.com), measured because dusitshop.com redirects to it: a white luxury-hospitality site with a light serif display face at 48px, a bronze #bc8547 Check rates button with square corners, #31313f navy panels, and photography-led hero and offer cards.", "sha256": "00d8d892af383d521c56e9283ca0dc5b2f91c1e950a76daddcfaee947f9e2057", "bytes": 10942}, + "dutch-gov-rijkshuisstijl": {"name": "Rijksoverheid", "category": "Design Systems", "description": "The Dutch national government portal rijksoverheid.nl sets RijksSans (600 headings, 400 body at 17.2739px) in #0f172a ink on white, with #007bc7 sky-blue links, a #154273 logo-blue header and card blocks, #f1f5f9 tint panels and #01689b dark-blue outlined buttons 56px high.", "sha256": "9b761ee8fcf1f08bb3d41b55417ce2d9e5a4624e1e4d3aae295673531026cc5a", "bytes": 10767}, + "dutch-mill": {"name": "Dutch Mill", "category": "Thai Brands", "description": "Dutch Mill (ดัชมิลล์) Thai dairy site: a black top bar over a sky-blue hero with milk-splash photography, Prompt typeface at 15px, blues #076aad and #0fa1f2, an orange (#f17b1f) pill outline, and generous 14 to 60px rounding.", "sha256": "edf9f74c4ac57771d0ecebe1498f6151d8e1d40d80810be231e3f15f65a22f77", "bytes": 10383}, + "dwr": {"name": "Design Within Reach", "category": "Home & Furniture", "description": "Design Within Reach (DWR) sells modern furniture on a pale grey #f8f8f8 canvas with warm-black #242222 ink, a single in-house family served as \"DWR Sans\" at only two weights (400 and 700 — 34px/700 page titles, 15px/24px body), fully rounded pill buttons (36–53px radii: a #242222 Add to Cart pill, white and outlined 39px pills), seasonal colour bands such as burgundy #643335 and sand #d1ccbd, a #242222 footer, and #ce2a22 reserved for sale.", "sha256": "533e49c7b94b8ddd8eb8df9b218df95e44fad06fb72e66feb453ae71f5cf3c63", "bytes": 27761}, + "dyson": {"name": "Dyson", "category": "Consumer Electronics", "description": "Dyson's US storefront (Adobe Experience Manager) is a monochrome engineering catalogue: one proprietary face, DysonFutura (Light 300 / Book 400 / Medium 500), set light at 32px/40px for section headings and 14px/20px for #555555 body copy, on a #ffffff canvas with a #000000 header, #fbfbfb product stages, #ebebeb hairlines and 4px-radius cards. Action colour is a transactional green #79b928 with black text (66px tall, 4px radius, darkening to #65a01b through a circular ripple), backed by a #ececec 'linking' button and a #333333 'interactive' button.", "sha256": "77b083492ade7d7ef821e1a2b41c34697683eaa2d0ae99e50b2ed275dbc310f2", "bytes": 27303}, + "eastern-power": {"name": "Eastern Polymer Group (EPG)", "category": "Thai Brands", "description": "Eastern Polymer Group (EPG) Thai homepage (epg.co.th/th/home/): Noto Sans Thai at 14px body and 600-weight headings, royal blue #1e51a4 on white with #f8f8f8 menu bars, orange #f29400 accents, 5px and 18px radii and soft 0 0 10px shadows on news cards.", "sha256": "2e5296b17b34a14475c6f2a758c2884271916f28a20432131730e109f6f4d6be", "bytes": 10305}, + "easy-tomorrow-brand-website": {"name": "EASY TOMORROW", "category": "Food & Beverage", "description": "EASY TOMORROW (easytomorrow.com/en), a Samyang hangover-relief brand: a white page of bento cards with 33.73px to 66px rounded corners on #f5f5f5, Pretendard type at 34px weight 600 with -0.68px tracking, cyan #00a5e7 title accents, a navy #21439c About tile, 70%-black #000000b3 body text and round white arrow buttons.", "sha256": "7adc347719fb6b0ba5a38e7f4d2555ae114fe23e0b419ea74dc3c23e7a4abef2", "bytes": 11006}, + "easypost": {"name": "EasyPost", "category": "Logistics & Mobility", "description": "EasyPost (easypost.com), the shipping API company, presents a white-canvas marketing site set entirely in Poppins (700 hero at 48px, 600 display at 56px, 500 section titles at 38px), deep navy text (#061340) with slate body copy (#47547f), mint filled CTAs (#99f5df with navy labels, 8px radius, 15px 20px padding) beside electric-blue (#4671fe) outlined buttons, and 12px-radius white cards with a 1px #e2e7f0 border — values that track its open-source Easy UI token palette.", "sha256": "1d02de6d3d0e5c15d1ae93114fa60c40bba12ea32fbeeb92eb470a6f8440a7d8", "bytes": 26132}, + "ebay": {"name": "eBay", "category": "Design Systems", "description": "eBay's homepage runs on the Evo design system: Market Sans (Regular 400, Bold 700) on a white #ffffff page with #191919 ink, an accent blue #0968f6 Search button with a 44px radius, near-black #191919 pill 'Shop now' buttons, 16px-radius image tiles and a #f7f7f7 footer band.", "sha256": "928f5461ae4f085e8c0bdb141887a9e7b317d52a020479bac2717c05eefd3eac", "bytes": 13380}, + "ecobee": {"name": "ecobee", "category": "Consumer Electronics", "description": "ecobee (www.ecobee.com/en-us): a white smart-home store with Tiempos serif headlines (66px/80px weight 500), Bastion sans body, white 39px-rounded pill buttons outlined in warm charcoal #2d2926 that fill #2d2926 on hover, mint #deede8 bands, #1169c8 inline links, and full-bleed teal and navy product photography.", "sha256": "55b9d64e76c83cf7a26b0932e17549f13bb298f445196063fd0d0c0d3f85894d", "bytes": 12269}, + "eddie": {"name": "Eddie", "category": "Tech & AI", "description": "Eddie (eddie.eco), a Québec EV-charging assistant: warm #f7f4f2 pages with black Founders Grotesk type (107.462px display, 61.3889px bold headings), lavender #d8d1ff cards with 40px corners, black 25px-rounded pill buttons 60px high that turn #b7b2ff on hover, a lime #d2e534 promo card and soft lavender shadows.", "sha256": "49ee959603f811471102aa402a149b0c9c56c6b1b911d9a474ddf996cc991bcf", "bytes": 12008}, + "editorial": {"name": "Editorial", "category": "Creative & Artistic", "description": "Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.", "sha256": "fc2b9e3dddf4911796911cd0d11b8a02f039d74a96a361e67fea4fc2b1775e31", "bytes": 3053}, + "edoardo-lunardi": {"name": "Edoardo Lunardi", "category": "Portfolio", "description": "Portfolio of Edoardo Lunardi, a Creative Web Engineer, built as a desktop-OS interface: #232323 ground, white Inter 13.4776px text, Ubuntu Mono window titles, 2px radius windows with 1px #ffffff4c rings and a dithered wallpaper.", "sha256": "89fb8e094ca32bd343ae0e9dc3b11054238ac112595a5e61236abe07811a411a", "bytes": 10802}, + "edolus": {"name": "EDOLUS", "category": "Tech & AI", "description": "EDOLUS, an AI company site: black canvas, #c4c7c7 ink, General Sans 300 at 96px uppercase for the headline, JetBrains Mono for technical text, a square white #ffffff 'INITIATE SYSTEM' button with black 12px mono text, 0px radius everywhere, over WebGL 3D artwork with a gold light ribbon.", "sha256": "12e0e8b5c0a39823359f09c0f57315f34a9b96e7ae977965a36f9e0812d04b7a", "bytes": 11864}, + "eduard-bodak-portfolio": {"name": "Eduard Bodak — Portfolio", "category": "Portfolio", "description": "Portfolio of Eduard Bodak, designer and developer from Cologne: beige #f9f4ec and black grounds, one hot-pink #ff47e7 accent, a heavy compressed sans at 84.8095px with -6.78476px tracking, 20px-radius cards.", "sha256": "673633ed6f714773b0ab8c9373c5bc6484fae4ff65e89ff914e352d5635b16a4", "bytes": 10888}, + "edx": {"name": "edX", "category": "Education", "description": "edX's learning-marketplace language — deep \"elm\" teal-black #00262b for headings, dark bands and the footer, a single burnt-orange action color #d64000 on 94px pill buttons, warm \"putty\" neutrals (#f9f8f6, #edebe3, #e7e3da, #e1ddd1) for section bands, and Inter everywhere with heavy 900-weight italic display headlines at 72px and 56px. Course cards are white 12px-radius tiles with a #cccccc hairline; body copy runs #333333 at 16–18px. Learner apps are built on Open edX's Paragon design system (--pgn-* CSS variables).", "sha256": "326ce823e784683887a9e432bddb516b0f6e6907af0a4a2580b815f9c3600711", "bytes": 37657}, + "effortel": {"name": "Effortel", "category": "Tech & AI", "description": "Effortel, an MVNE telecom platform: dark slate #22282a ground, cyan #66e8fa buttons with #22282a text, Satoshi Variable 800 at 58.368px for headlines, Et Mono uppercase buttons, 9.19px button radius.", "sha256": "a56fc201e44b79be76dfb83d78d875c7fc9fdcc85905fa52a65cb14200067d5f", "bytes": 10843}, + "eflowsys": {"name": "Eflowsys", "category": "Thai Brands", "description": "Eflowsys, Thai ERP and e-Tax software vendor: white canvas, blue #046bd2 buttons with 5px radius, Sarabun 16px body, Arial 700 48px hero headline, 20px-radius translucent cards over photography.", "sha256": "7dffc2eca521306a793dc9ff4f1b42416219fb9fc0f7128ab21a24b034b6d754", "bytes": 10544}, + "egco": {"name": "EGCO Group", "category": "Thai Brands", "description": "EGCO Group, a Thai power producer: white canvas, ink #313131, orange #f58220 headings and green #409a3c accents, Prompt 300/500 type, 8px-radius white buttons with #bebebe border and soft card shadows.", "sha256": "8ee66c469a655f4dffec596e52855e8a0f599fd066a010d080b22630ac18478c", "bytes": 10156}, + "el-pais": {"name": "EL PAÍS", "category": "News & Publishing", "description": "EL PAÍS, Spanish daily newspaper: white canvas, #111111 ink, MajritTx serif headlines at 30px with -1.15px tracking, MajritTxRoman 15px body, 11px uppercase MarcinAntB navigation, one yellow #f7cf3c subscribe accent.", "sha256": "8d01a2741b7c7e707814b3bf946599ba9448b812c6985e3c451085458f28b717", "bytes": 9569}, + "elastic": {"name": "Elastic", "category": "Design Systems", "description": "Elastic's site sets display headlines in Geist Mono (64px, weight 500, -1.28px tracking) over Inter body text at 16px, on a white canvas with a single action blue (#0b64dd), 4px-radius buttons, a near-black #1c1e23 footer, and an isometric product illustration. Its EUI framework uses the same blue with 8px controls.", "sha256": "d9d291b06eba0ed11dde6ee8f5a37ad4be39072c7076c0f717ebaa33844744e8", "bytes": 13857}, + "electra-filmworks": {"name": "Electra Filmworks", "category": "Culture & Events", "description": "Electra Filmworks, a film and commercial production company: full-bleed film still over a #15110f base, white PP Pangram Sans 16px credits, Monument Extended 12px uppercase navigation, one orange #f16920 spark accent.", "sha256": "8aedd29f5888fbadd6920fe604865c6031e74b10fdb17292fff8c59708110a2c", "bytes": 8694}, + "electrify-america": {"name": "Electrify America", "category": "Energy & Climate", "description": "Electrify America, a US EV fast-charging network: white and #f5f5f5 bands, navy #0b0f4d header, royal navy #122771 accent, Ubuntu 800 italic 44.8px headlines, 16px/300 body, 4px-radius buttons and 8px photo cards.", "sha256": "a98b21021f3e7e95f4c67d546509dc2c6978839c6d4bad1cccfc4dad9aedf5b9", "bytes": 9846}, + "electronic-arts": {"name": "Electronic Arts", "category": "Gaming", "description": "Electronic Arts official site (ea.com): deep navy #00071f canvas with off-white #eaeaec text, electric blue #255af6 8px-radius CTAs (hover #1e4aca), slate #2b3044 game cards with #404557 borders and 12px corners, #151c32 footer. electronicartsdisplay 700 at 44px for headlines, electronicartstext 14–20px for everything else, no letter-spacing.", "sha256": "0c44a33adecb651b3ee22f7bee79eeba1cdbdd740f073e36a6b5d4258785c8aa", "bytes": 10391}, + "electronics-extreme": {"name": "Electronics Extreme", "category": "Thai Brands", "description": "Electronics Extreme, a Thai online-gaming company: charcoal #252525 bars, orange #f79533 accents and outlined Readmore buttons, white Kanit text at 16px to 20px, 10px-radius selector, warm hero photography.", "sha256": "23468b091ea631f7701ee849cf0c0de549da4667f0f1d8376b59f5af1d7760d8", "bytes": 9703}, + "elegant": {"name": "Elegant", "category": "Professional & Corporate", "description": "Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.", "sha256": "aab8a3bce10d8fac8763b7dee99168083963e1a0ec79c18546be75b46dd36cae", "bytes": 3069}, + "element-plus": {"name": "Element Plus", "category": "Frontend Frameworks", "description": "Element Plus is the Vue 3 component library whose docs site pairs Inter (with a Helvetica Neue / PingFang SC fallback stack) on a white #ffffff canvas, a bright #409eff primary, grey text ramps #303133 and #606266, 1px #dcdfe6 hairlines, and a 4px default radius (20px for round buttons).", "sha256": "5baae63e56e7e5c7fff2a5cf204ca31056d4d38e901e5af04a06c78a03171782", "bytes": 23734}, + "elementary": {"name": "elementary OS", "category": "Design Systems", "description": "The elementary OS website: Inter in 48px bold and 32px light headings, charcoal ink (#333333) on white and #fafafa, a light-blue (#64b9f1) gradient purchase button with 3px corners and a faint inset highlight, link blue #0088cc, and a saturated grape-purple band (#7239b3) for the AppCenter section, with desktop screenshots as the main imagery.", "sha256": "77597e33cc56fa999b030aa1d93c5184b1d3f0dd8b50f8ae0ccd0b685967658a", "bytes": 9981}, + "elevance-health": {"name": "Elevance Health", "category": "Healthcare & Wellness", "description": "Elevance Health, a US health company: white canvas, #231e33 ink, navy #1a3673 bands, blue #2861bb links and 24px-radius pill buttons, ElevanceSans regular 42px headings with Lato navigation.", "sha256": "50256e60ee3e93c160a0a182727dfaa0ac8d4e95df05f9205bc03bd34cf30f09", "bytes": 10974}, + "elevenlabs": {"name": "ElevenLabs", "category": "AI & LLM Platforms", "description": "ElevenLabs' marketing site is a warm-neutral, near-monochrome canvas (#fdfcfc page, #f5f3f1 panels, pure #000000 ink and CTAs) that sets light 300-weight Waldenburg display type over Inter UI text, with pill buttons and large 24px panel radii.", "sha256": "6847ac64e314204fcdaa6969d199bdab1d1c0dd097e3be981bc0dc1815c6eb21", "bytes": 19677}, + "eli-lilly": {"name": "Eli Lilly and Company", "category": "Pharma", "description": "Lilly.com home page: black-and-white film hero with a 100px Ringside Sans Extra Wide 900 headline, a condensed Garamond Narrow serif for statements, blush #f9eeed sections, ink #191919 text and Lilly red #d31710 pill buttons at 32px radius.", "sha256": "fe3d311b2f4cfa816166eb1ceeef07ff1a70806acd1582cf927f783ef74a0448", "bytes": 10436}, + "elisa": {"name": "Elisa", "category": "Design Systems", "description": "Elisa (Finnish telecom) consumer web design as built on the Elisa Design System (EDS): Jost headings and buttons with Open Sans body copy, a #005fed action blue and #00239d brand blue on a #fdfdfd canvas, #171c43 navy ink, 4px-radius uppercase buttons, 8px photo cards with a soft 4px 13px shadow, and saturated blue hero fields with arc-cut photography.", "sha256": "f875671bea76f130a9490f2f40ed60cc74ef8948220283d88373ea0536d45177", "bytes": 17051}, + "elliott-mangham": {"name": "Elliott Mangham", "category": "Portfolio", "description": "Single-screen dark portfolio of freelance WordPress developer Elliott Mangham: #121212 canvas, white text at 100, 80 and 40 percent, Neue Montreal 30px/36px weight 500 with Roobert Mono 11px detail, 30px-radius capsule toggle and 6px-radius thumbnails.", "sha256": "9f685f550fe28bd762cfaa519f88cf840fca6fd9eaed94862bf133fc89107c31", "bytes": 10047}, + "elva": {"name": "Elva", "category": "Agencies & Studios", "description": "Elva (elvalabs.ai), an AI video agent for phones: #131313 canvas, white and #b3b3b3 text, Neue Haas Grotesk Display Pro at 108px display and 42px headings, frosted #ffffff0d buttons with 16px radius and 48px height.", "sha256": "bd4ba8428c79638df1fe167e87b6e1b8217fd8b1ae1efb6115a35977d4ddacb1", "bytes": 8719}, + "emberjs": {"name": "Ember.js", "category": "Frontend Frameworks", "description": "Ember.js (emberjs.com) is built from the official ember-styleguide: brand orange #E04E39 (PMS 7417C) buttons with 5px radius that hover to #cf2d20, a #1c1e24 charcoal hero and header, cool grey #f4f6f8 / #ebeef2 page bands, #42474f body text, and Inter var throughout — a weight-200 48px hero headline over 16px/27px body copy.", "sha256": "1354aef1c21803f688307f1420d0ee763e2917124182d345b38d07bf5222f53b", "bytes": 13451}, + "emdistrict": {"name": "The EM District", "category": "Thai Brands", "description": "The EM District, The Mall Group's Bangkok district site: pure black #000000 canvas, white #ffffff ink, Prompt 700 headings at 53.3333px, Helvetica Neue LT Std 14px body, translucent white #ffffffcc pill buttons and hashtag chips, with saturated fashion and street photography doing all the colour.", "sha256": "f8d57a9a50d82bef84c6f7d35303484ab58b5e09b4be2cb2b783ada7a1b61c79", "bytes": 9500}, + "emele-collab": {"name": "Emele Collab", "category": "Portfolio", "description": "Emele Collab (emelecollab.com), a creative studio home page that is a typographic index: names in a heavy condensed uppercase face at 92.8px over 74.24px line-height, black #000000 on white #ffffff, with 15px edge navigation and no shapes.", "sha256": "6da00f9006b069a8891df7e9a8dbd08c0db7923a792000720b441c412166f6b3", "bytes": 8692}, + "emilie-aubry": {"name": "Emilie Aubry", "category": "Culture & Events", "description": "Emilie Aubry (emilieaubry.com), a minimal personal site whose entry screen is a white title card with a light Riccione-Serial name lockup and italic Emi, PP Neue Montreal 500 uppercase micro-labels, black ink #000000 and 29.97px capsule link chips.", "sha256": "38ff9b40f8f2a3016214a06a7c0a4e3bb30363ee45c8568747f7673626e3825f", "bytes": 8572}, + "emirates": {"name": "Emirates", "category": "Airlines", "description": "Emirates' booking site is a light-grey (#f6f6f6) canvas of white 3px-radius cards under a charcoal #333333 nav bar, with full-bleed cabin and destination photography carrying white display type in the condensed Heroic-Medium (120px, -5px tracking, uppercase) and the proprietary Emirates-Bold serif-like display face. UI copy runs in HelveticaNeue / HelveticaNeue-Light at 200-700 weights, and the only saturated colour is Emirates red #d71921 on the filled CTA, active-tab underline and text links.", "sha256": "f98bf17c4342806da75ac9757977a57296d70b0792b845835c974640542431af", "bytes": 36058}, + "emirates-nbd": {"name": "Emirates NBD", "category": "Banking & Insurance", "description": "Emirates NBD English home page: deep navy #072447 buttons with 10.8px radius, white and pale blue-grey #eef2f8 grounds, UAEDirham with Plus Jakarta Sans at 37.8px headlines and 12.6px body, dense banking modules with a loan calculator and FX strip.", "sha256": "c7370905a0b0d900ca316b6e5469fddedf5315b7f635f6b0c83b1c4c86f65dce", "bytes": 10530}, + "emotion": {"name": "Emotion", "category": "CSS-in-JS", "description": "Emotion's docs site (emotion.sh) is a Bootstrap-style white page with #212529 text in a system-ui stack, a pink brand (#d26ac2 wordmark, #c43bad links), #282936 dark code blocks in SFMono and hotpink #ff69b4 live-preview panels.", "sha256": "3834ca1e8e5028a67297652b0fbf59886ba6faaa984cd789f6bd1673b6149082", "bytes": 21148}, + "emporium": {"name": "Emporium", "category": "Thai Brands", "description": "Design language of the Emporium Bangkok luxury shopping complex site: a white page with black Cormorant serif display capitals at 88.8889px, light-weight GTWalsheimPro text in warm grey #8c8c8c, a muted gold #b5a06b theme accent, black bands, and frosted white pill controls at 42px height with fully rounded corners.", "sha256": "7ed31e650cd8e04968196373830006cbf974b9877ac0f73375464a9c2358d824", "bytes": 10706}, + "emquartier": {"name": "The EmQuartier", "category": "Thai Brands", "description": "The EmQuartier (emquartier.co.th), a Bangkok fashion and lifestyle destination: black, white and silver #8e8f97 with editorial photography, termina wide uppercase at 80px/76px plus DB Adman X Thai body at 24px/28px, and 50px-radius outlined pill buttons.", "sha256": "c23fbfe87b32816e3e30202cbd877d08215831d36e9c560d07ff7ee6ba7db29f", "bytes": 9867}, + "emsphere": {"name": "EmSphere", "category": "Thai Brands", "description": "EmSphere, the Bangkok shopping centre from The Mall Group, on a light #f5f5f5 canvas with black #000000 ink, a white #ffffff button that carries a pink-and-violet glow shadow, Helvetica Neue LT Std at weight 300 for body and nav, aktiv-grotesk-extended 700 at 84px for section headings, and 20px, 24px and 40px corner radii over full-bleed photography.", "sha256": "b6ce567388809a19306399e2a15c3aedc2087b2f4fa919efe2bb6da78fa65240", "bytes": 11236}, + "enel": {"name": "Enel Group", "category": "Energy & Climate", "description": "Enel Group corporate home page: white canvas, ink #0e141a text, Roobert bold 58px/68px headlines and 22px body, magenta #d3135a links, ocean #0047cc secondary, snow #eff2f7 sections and square-cornered components with round carousel arrows.", "sha256": "742de770eb8ca1b4a14d71fd46b2e8fadc5a794350a3bd9065967d682a7894ae", "bytes": 9820}, + "enel-x": {"name": "Enel X", "category": "Design Systems", "description": "Design language of the Enel X Italia web presence as captured in October 2026: the Roobert ENEL typeface at weights 300 to 900 (70px/900 display headline, 20px body), a deep purple #461e7d hero wash over night photography, a #3a16ff electric-blue action color declared as the site's --primary, and near-white #f7f7f7 and #fbfbfb chrome with hairline 1px shadows. Radii are small (4px to 16px) with a 50px pill.", "sha256": "69e8611a7c426bb1422ca3f25df800bb4d6da77a2dfdcfc06fe72300f4c3d160", "bytes": 14175}, + "enerblock": {"name": "Enerblock", "category": "Product & SaaS", "description": "Enerblock (enerblock.net), industrialized digital construction: signal orange #ff5949 ground, paper #f0efeb and ink #0c0b11 planes divided by hairline grid rules, Neue Corp at 72px/64.8px display and 16px/20px body, square black buttons with arrows.", "sha256": "2d5e8f8a5ac624a8539c0aee4bc9a7ab49b767c42f54a0a2ab77e710fb6a2c73", "bytes": 10176}, + "energetic": {"name": "Energetic", "category": "Bold & Expressive", "description": "Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.", "sha256": "86ef6124eccf8d85f9ba66d48cff44031fdeb67b470aea7186da0cdf815ba168", "bytes": 3147}, + "engie": {"name": "ENGIE", "category": "Design Systems", "description": "ENGIE's web identity is built on Lato in bold at very large sizes (72px display, 48px statements), white canvas #ffffff with near-black ink #171d21, an action blue near #007acd with a 0px-radius outlined button, deep ultramarine #182663 footers, full-bleed industrial photography in the hero, and the brand's #00aaff to #23d2b5 gradient ray, all documented by ENGIE's own Fluid design system.", "sha256": "b3887b630528b109878810427afaf4d530645a030f675a43fc8b510ad0a42141", "bytes": 12661}, + "enphase": {"name": "Enphase", "category": "Energy & Climate", "description": "Enphase Energy's web system: warm off-white #faf6ef pages with white #ffffff panels and black #000000 header and media bands, Enphase orange #ea6100 (hover #ff8b49) reserved for the 'Get started' pill, black and white pill buttons (36px and 56px radius) in enphase-visuelt-medium, enphase-visuelt-regular 400 headlines at 64px/-1.28px and 42px, 20px/32px body, and T-Star Pro uppercase 20px labels tracked 1.6px.", "sha256": "044bc8d7141ba336dc11671caacc7f06cb4b2069ef5dbfd1b0e0fd3683b44967", "bytes": 19128}, + "enterprise": {"name": "Enterprise", "category": "Professional & Corporate", "description": "Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.", "sha256": "13b943a0c0de43ac84bbb0951ae13f7d613d2cbf2279ff08e0ced3e187b11cf7", "bytes": 3109}, + "envato": {"name": "Envato", "category": "Design & Creative Tools", "description": "Envato (www.envato.com redirects to Envato Elements): PolySans 600 headlines at 48px with 16px/400 body, near-black #191919 ink on a peach-cream #fff5ed canvas with white #ffffff cards, lime #87e64b buttons with dark-green #1a4200 labels and 4px corners, and 16px-radius bordered tiles.", "sha256": "02abadf2f6e269ca8d2ff53ac0a22096ce90a5276a1cb31469bd3b083743a957", "bytes": 12155}, + "epic-games": {"name": "Epic Games Store", "category": "Gaming", "description": "The Epic Games Store web storefront (store.epicgames.com) — a near-black #101014 canvas stepped through #18181c, #202024, #28282c and #404044 surfaces, white #ffffff headings over 65%-white #ffffffa6 body copy, and a single cyan accent #26bbff reserved for the Download button, Get / Add To Cart purchase buttons and discount pills. Type is Inter (body, buttons, prices) paired with Inter Tight 700/900 for game titles and section headings; promo CTAs are white 10px-radius 48px buttons, cards use 12px corners with a 1px #ffffff1a hairline, and game key art carries all colour.", "sha256": "a5f577543921f08cdddaf36b80238866101d8a71a0e6c6964fec47176905ba49", "bytes": 27246}, + "equinor": {"name": "Equinor", "category": "Energy & Climate", "description": "Equinor corporate home page: white canvas, #3d3d3d text, Equinor typeface at 65.3px/81.7px with -3.27px tracking and 17.7px body, Energy Red #ff1443 arrows and links, slate #243847 footer, soft layered card shadows and 6px/13px card radii.", "sha256": "a92f9807deca0d4504d8b6a7f8254177136a84237c5e56cea72c21b20759b05d", "bytes": 10590}, + "equinox": {"name": "Equinox", "category": "Sports & Fitness", "description": "Equinox's equinox.com as measured — an all-black canvas (#000000) with white uppercase display type in the proprietary Equinox Sans at weight 400 and tight negative tracking (72px/-1.44px, 104px/-2.08px), grey reading copy (#aaaaaa), Messina Sans Mono 11px eyebrows, square 0px-radius buttons (solid white #ffffff with black text, hover #ededed; or 1px translucent-white outline), and a white, hairline-bordered sign-up form.", "sha256": "71c3a057fd812748c6c29f2bc451934e5eb9334409158a1bf89f552d7b9b7ab5", "bytes": 26753}, + "era-residence": {"name": "ERA Residence", "category": "Architecture & Interiors", "description": "ERA Residence (era-residence.com), Contemporary Mediterranean residences in Estepona: velvet plum #340c24 planes, cream #f3f3ec and navy #17233b, uppercase ambroise-francois-std display serif at 153.6px, Maison Neue Extended body and arch-shaped panels with 307.2px top radius.", "sha256": "e39a342d926bdf89d63f161101ea24fed6ac7f63ebdc8911c69fb18d3cbb3d90", "bytes": 10021}, + "esa": {"name": "ESA", "category": "Government & Nonprofit", "description": "The European Space Agency home page: photography-first editorial layout, NotesESAbold headlines at 48px and 75px over Arial 14px body, petrol ink #003247 on an off-white #e8e8e4 canvas, white 2px-radius READ buttons.", "sha256": "2a2e2334bb24403eb8ef86c218a09a1194b7cf72d09e3e4127a62f0c63e62b37", "bytes": 10402}, + "espn": {"name": "ESPN", "category": "Sports & Fitness", "description": "ESPN's web front page (international edition, global.espn.com) — a dense three-column news board on a cool grey #edeef0 canvas with white 10px-rounded story cards, a #2b2c2d top bar, the red #dd0000 skewed logo slash, system-font text in #48494a/#1d1e1f, BentonSans 14px/700 uppercase section headers, PublicoBannerExtrabold 28px feature titles and 40px-radius pill buttons.", "sha256": "c1a77747feb02f5756f13758dd763820ebefe8fb59d11a568b6a37cb91d385e4", "bytes": 23717}, + "estonia-e-residency": {"name": "e-Residency of Estonia", "category": "Government & Nonprofit", "description": "The official e-Residency of Estonia site: Aino and Aino Headline type with a 72px light-weight blue headline (#005eeb), ink #0f172a on white, #0062f5 pill buttons with #0030de hover, 16px-rounded photography and pale #f1f5f9 cards.", "sha256": "f6c2df27afa2e85180a15546dc47d254abd3ca2b0abb0edd7371cc879212396c", "bytes": 11472}, + "estrela": {"name": "Estrela Studio", "category": "Agencies & Studios", "description": "Estrela Studio home page: near-black #020202 ground under a luminous glass-prism render, PP Migra serif display (48px and 110.222px) with PP Neue Montreal 16px body, off-white #fbfbf4 text and translucent glass buttons with 1.78px corners.", "sha256": "d89e437bc3b628f6673ba41e09112471e3b6852538ef35bda65b64f565ea213d", "bytes": 11307}, + "etda": {"name": "ETDA (Electronic Transactions Development Agency)", "category": "Thai Brands", "description": "ETDA English home page: DBHeavent condensed type (23px to 70px), navy ink #102a52 on white and grey, amber #f89b08 accents, 20px-radius teal-outlined nav pills, blue gradient wave bands with white service cards.", "sha256": "3195c0b2c333e61f74f6200c31a53fd162d99b9c6fc95446e55a159708d8a27d", "bytes": 10293}, + "eth-zurich": {"name": "ETH Zurich", "category": "Education", "description": "ETH Zurich German home page: DINPro in a single family (16px body, 32px lead heading), black ink on white with pale cyan #e7f4f7 washes, teal #007894 labels, a red #b7352d callout, ETH blue #215caf theme and square 2px corners.", "sha256": "7b474733f1533849ef37506ae55765f899ea8e4fa1543eb48dcaad04214d192e", "bytes": 10299}, + "ethan-tom": {"name": "Ethan & Tom", "category": "Portfolio", "description": "Ethan & Tom film-director portfolio: near-black #010101 stage, white #ffffff 8px to 9.6px type in Switzer and Geist Mono, a five-column grid of film stills with bracketed index captions, no radii, shadows or accent colors.", "sha256": "d0e7ae65687e8610afc64c5d63f21591d451d8f4e435151719094ff71b8c4163", "bytes": 9077}, + "ethical-life": {"name": "Ethical Life", "category": "Food & Beverage", "description": "Ethical Life vegan multivitamin gummies product page: Sora 600 headings (62.5px, 46px) over Inter 18px body, charcoal #2d2d2d on off-white #fbfbfd, lime #dcf343 pill buttons that hover to #4145c8, 3D product renders.", "sha256": "4038dbd6cffc853c759372aeef04a26ed349dabb05759576440a067668d4d348", "bytes": 9701}, + "etienne-planeix": {"name": "Etienne Planeix", "category": "Portfolio", "description": "Etienne Planeix designer portfolio: a Framer build in one family, Neue Haas Grotesk Display Pro 65 Medium at 12px (weights 400 and 600), black on white with 40% and 50% black greys, a 3D arc carousel of projects and no radii or shadows.", "sha256": "c42a8310790056f595955c475b5544cdc20b0deba1d3caaa8dffd126bac8a171", "bytes": 8743}, + "european-union": {"name": "European Union", "category": "Government & Nonprofit", "description": "European Union portal home page built on the Europa Component Library: Arial 16px body with 42px and 36px regular headings, EU blue #0e47cb on white and #f3f6fc bands, yellow #ffcc00 card bars, 4px and 8px radii and blue-tinted shadows.", "sha256": "9383c0d09ca2e1bc853803efc64756c65bac1a3595b55431cf1ec230d7dafecc", "bytes": 10761}, + "eurostar": {"name": "Eurostar", "category": "Logistics & Mobility", "description": "Eurostar booking site (Rwanda market, English): La Pontaise headlines and ABC Social 16px body, navy #00286a chrome, brand blue #106dff with #0a4199 hover, yellow #ffc305 search button, plum #7d0552 and teal #086264 promo blocks, 4px and 8px radii.", "sha256": "07ebfd1e845a6097f00ac993a4c26aef508d43e737bbe63c2e918bbc20d7e14b", "bytes": 11387}, + "eventpop": {"name": "Eventpop", "category": "Thai Brands", "description": "Eventpop (Thai event ticketing platform) design system: proprietary Eventpop typeface with 28px bold headings, white canvas, deep violet #260176 login button with 3px radius, red #ee3124 date lines and poster-led rows.", "sha256": "96a2ab823eb84a2c8c1d111e2a47350dc326a66d7d3e950a5bad24fcebfe6aee", "bytes": 10087}, + "evergreen-ui": {"name": "Evergreen", "category": "Design Systems", "description": "Evergreen is Segment's React UI framework: white and #fafbff surfaces, a #3366ff blue primary, a navy-grey text ramp (#101840, #474d66, #696f8c), SF UI Text/Display type at 12-14px, 4px control radii and 32px controls.", "sha256": "305a36b31b1bba27c9d65c47650fb2e136788d03c81948370e40af473acd9f79", "bytes": 24611}, + "everland": {"name": "Everland", "category": "Thai Brands", "description": "Everland (everland.co.th) Thai residential developer site in DBHeavent 300 to 700: deep green #006341 headings and links, gold #c6893f price and rule accents, slate #545859 body text, near-black #1e1e1e header and hero on a white #ffffff canvas, 3px radius.", "sha256": "3c3c9f3590c1e6e00eeb8767014604d9c0fcd5e3752ea94fcda1eafcf218e198", "bytes": 9410}, + "everlane": {"name": "Everlane", "category": "Fashion & Apparel", "description": "Everlane's Shopify storefront (Dawn 15.3.0 theme, customised) is a quiet, photography-led apparel system set entirely in Maison Neue Book at weight 400: a 32px letter-spaced EVERLANE wordmark, 12px/0.24px uppercase nav and CTA labels, 14px/0.28px body, #ffffff canvas with #000000 ink and #121212 graphite, a #f4edd9 cream announcement band, square 0px corners everywhere, and a #262626 ADD TO BAG bar 47px tall with 15px/1px type.", "sha256": "45ac267cc4199abeba1856d80a49f7996a8c90f28fda22ebe1dcbb4af11a69ed", "bytes": 31139}, + "evernote": {"name": "Evernote", "category": "Productivity & SaaS", "description": "Evernote's marketing home: warm paper #f9f6f2 canvas with sand #f4eee5 panels, near-black #141414 buttons that turn Evernote green #00a82d on hover, a lime #94e130 AI button on a #262626 band, Figtree 600 headlines at 72px with -3.6px tracking, Inter/Figtree body, 5px button and 10px card corners.", "sha256": "ad302c2b4da302b24945f0facd933103f79ab5f4b2b6c677ca3cdc8c6253550b", "bytes": 13265}, + "everswap": {"name": "EverSwap", "category": "Tech & AI", "description": "EverSwap DeFi home page: a painterly mountain hero, Feature Display light serif and Britti Sans, off-white #fbfff4 text, a forest-green #203727 palette from root variables, a translucent pill Launch App button and a fluid type scale on a 16-column grid.", "sha256": "f951883d3ec0b47a390c9e5f1598977511337adbce32bd5dabbcbebf35f7bcc4", "bytes": 10387}, + "evolve-2": {"name": "Made in Evolve", "category": "Agencies & Studios", "description": "Made in Evolve ecommerce agency home page: near-black #111111 ground, white neue-haas-grotesk 500 type with a 166.4px uppercase H1 and negative tracking, a lettered case-study table in Bull 5 Typewriter, lime #c3ff00 accent and 7px to 14px radii.", "sha256": "8e5b298900e4bbeb4c24a9cf41d74523b5c18957a11e7b8a375e79e6e115b9c7", "bytes": 10322}, + "example": {"name": "Example", "category": "Food & Beverage", "description": "Example (weareexample.com), a Sydney and Dubai brand strategy, design and PR agency for hospitality and consumer brands. A warm off-white canvas #f3f3f0, near-black navy ink #0e1623, American Grotesk Compressed at weight 900 in uppercase up to 182.4px, American Grotesk for body, a 6.4px radius on imagery.", "sha256": "5f8041a5493e89cabbca5cabef07430dcf273cd192a227b934092785e5891c1e", "bytes": 12296}, + "excalidraw": {"name": "Excalidraw", "category": "Design & Creative Tools", "description": "Excalidraw (excalidraw.com), the open-source hand-drawn whiteboard: a white #ffffff canvas with floating #ececf4-on-white UI islands, Assistant 14px UI text in #1b1b1f, Excalifont 18px hand-lettered hints in #b8b8b8, the #6965db violet brand, a #f0efff 8px-radius Try Excalidraw+ button with a #d7d5ff border, and 6px–8px radii.", "sha256": "fbdf56f217bb5824b49250f49de2b2ab5eeb63338a5c2c2c80a4aed8a61622c2", "bytes": 12701}, + "exim-thailand": {"name": "EXIM Thailand", "category": "Thai Brands", "description": "Export-Import Bank of Thailand (exim.go.th/en), a state banking site in a navy #034ea2 and signal red #ed1c24 palette on white, with DB Heavent for headings and buttons, IBM Plex Sans Var for body, a red 6px-radius button and a blue-to-red gradient service band.", "sha256": "053b4d7fd1e5c0eb08107c76362142bad25be06192cfd6141fdc2c8219215428", "bytes": 13012}, + "expedia": {"name": "Expedia", "category": "Travel & Hospitality", "description": "Expedia US home page: Reckless XPD serif headlines (44px hero, 36px and 28px) over Centra No2 400/500/700 UI text, #191e3b navy ink on #ffffff, #1668e3 blue for filled search buttons, links and outlined pill buttons (hover #0d4eaf on #ecf4fd), #fddb32 brand yellow, #0c0e1c and #191e3b dark panels, 40px-radius search fields and 16px-radius cards.", "sha256": "80c1c5b652b6f1ad4cefbdc5f02696babd9adf84fcd51da09db06e961809b1d4", "bytes": 12795}, + "explore-primland": {"name": "Primland Residences", "category": "Architecture & Interiors", "description": "Explore Primland (explore.ownprimland.com), the Blue Ridge Mountains real estate microsite of Primland Residences. Full-bleed aerial imagery, wide-tracked uppercase PetitSerif (46.8px, 9.36px tracking), Centra sans buttons, a cream #fffbe7 square button with forest green #456a4b text.", "sha256": "82004410224fc93b2d4fe4f131ee859ceaa6424a71d145ccb83581594c73cb74", "bytes": 10562}, + "expo": {"name": "Expo", "category": "Developer Tools & IDEs", "description": "Expo's site is a white and cool-grey canvas (#ffffff, #f9f9fb) with near-black #1c2024 text set in Inter 600 at -2px tracking, pure #000000 pill buttons, 40px-radius cards and a JetBrains Mono eyebrow.", "sha256": "f1670c2e01309024c58fd299f7e53de2f7f3812a5c423dcab47b8b9ca12bba7a", "bytes": 23132}, + "expressive": {"name": "Expressive", "category": "Bold & Expressive", "description": "Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.", "sha256": "6c7b3bd5952e1857a96485c692652e06ca29826fcf98e28884f12b6e36b361fe", "bytes": 3107}, + "exxonmobil": {"name": "ExxonMobil", "category": "Energy & Climate", "description": "ExxonMobil corporate site (corporate.exxonmobil.com): white and light grey #f1f2f2 pages, signal red #fe000c square buttons (hover #d5000a), charcoal #333333 text, the EMprint family in Light 300 for 60px headlines, a deep navy statement band and photo-led story cards.", "sha256": "ac630ea38a5501ab6443b75bf6db73797966327ae9771df14176b24ff953a657", "bytes": 12107}, + "ey": {"name": "EY", "category": "Agencies & Studios", "description": "EY US home page (ey.com/en_us): EY Yellow #ffe600 on dark #2e2e38, #1a1a24 and black bands over a #f6f6fa and white canvas, EYInterstate in 300 and 700 weights (40px headlines on 48px), square buttons, yellow-topped dark insight cards.", "sha256": "1b24a44021c4211515b14c25b6cae3bacaedaec57ecb551c378b6a0e3e8af0f2", "bytes": 10886}, + "ezy-airlines": {"name": "Ezy Airlines", "category": "Thai Brands", "description": "Ezy Airlines (ezyairlines.com), a Thai regional airline site: Kanit type at 52px/600 headlines, navy primary #213a56 buttons with 8px radius and hover #142334, a deep navy #06203b destinations band, a yellow #f9c017 booking accent and soft blue-grey layered shadows.", "sha256": "24261a154451ced4be6a78fe6f8516f5a270437f8d04abad924ffa6d3c14b215", "bytes": 11868}, + "faint-film": {"name": "Faint Film", "category": "Business & Corporate", "description": "Faint Film (faint-film.com), a developer's personal black-and-white photography site: white #ffffff and #f2f2f2 split screen, charcoal #222222 text, PP Neue Montreal Medium only, a 32px year display, a 4 by 5 thumbnail grid and a dark pill Grid and Slider toggle.", "sha256": "2134e19e3104008ef074072b2784e498bc35b520a52ad8ebb1db6adaa3c0df6a", "bytes": 9143}, + "fairphone": {"name": "Fairphone", "category": "Consumer Electronics", "description": "Fairphone shop (fairphone.com): forest green #00433d brand ink on white and sand #f0f0ee surfaces, Bricolage Grotesque 600 headlines at 64px, DM Sans body at 14px, uppercase 14px buttons with 0px radius, 24px-radius product cards and a published sand and forest token scale.", "sha256": "c0ec9ca32d921cf7c0a52959d875efd7f85b616206ffdff6732022769faee9f9", "bytes": 12190}, + "fantasy": {"name": "Fantasy", "category": "Agencies & Studios", "description": "Fantasy (fantasy.co), an AI-native digital product design agency: a black #000000 stage with white #ffffff text, one custom sans at weight 400 in 18px and 40px with negative tracking, a 10px radius on media frames and a Menu pill, dark device renders and client logos as the only colour.", "sha256": "d7c3accf628533fbbb6db837a2bf321dbeb436eeb7a07d5b6cca731347afa24e", "bytes": 8787}, + "farm-minerals": {"name": "Farm Minerals", "category": "Retail & E-commerce", "description": "Farm Minerals CropTab promo page (farmminerals.com/promo): deep moss #404f1d ink, olive #636f3d buttons and headings, warm beige #f4ede6 sections, Aeonik at 122.88px with -2.4576px tracking, tiny 11.06px uppercase pill buttons, a blurred foliage hero around a 3D carbon tablet.", "sha256": "03761ed4edfc0ceac4e1c6016ec5fecf4f8714f2408a7afbea0ce45952aa2503", "bytes": 10538}, + "farmhouse": {"name": "Farmhouse", "category": "Thai Brands", "description": "Farmhouse (ฟาร์มเฮ้าส์) bread brand site: a solid red #d90000 header and campaign carousel over a cream paper world of illustrated bakery props, with Thai FC_Lamoon display type at 50px, 20px rounded form fields and round red carousel arrows.", "sha256": "2d7a6e3411808ee52de7fe5f73ba20ced7d4f873c9fc42dd90f54b59597fbb88", "bytes": 10651}, + "fashion-island": {"name": "Fashion Island", "category": "Thai Brands", "description": "Design language of the Fashion Island mall website: Helvetica with Kanit as Thai companion, black text on white, a hot magenta #ec098d for the active tab, 10px-radius tab buttons with a soft 13% black gradient overlay, a #5f6062 grey quick-link bar, and a four-colour (orange, green, red, blue) letter-block motif for large display words.", "sha256": "8f36f7a8c19c77bab81bf37a5a18c0c6176544496f4908e7fb47605cff2b7f3d", "bytes": 9979}, + "fastly": {"name": "Fastly", "category": "Backend, Database & DevOps", "description": "Fastly alternates #f8f5f4 beige and #000000 black full-width bands, sets everything in TT Hoves Pro (72px/400 headlines at -2.88px, 16px/22.4px body in #4a4a49), uses #0067d1 blue 4px-radius buttons (#0073eb on black, hover #165099), white #dfdcdc-bordered cards and red #ff282d line-art accents.", "sha256": "2e7543dcec0fb23d317b1c2cda43eab4e9f1bd46e51db8eb5f9f492b3345fde7", "bytes": 13161}, + "fastwork": {"name": "Fastwork", "category": "Thai Brands", "description": "Thai freelancer marketplace at fastwork.co: Fastwork and Noto Sans Thai type, #1d6ce2 buttons with 3px radius, deep blue #08439b headings, white 8px-radius cards with a blue layered shadow, a pill search field with Ask AI, soft blue gradient canvas #fafcfe.", "sha256": "57335b2917b0de9800fbe2209e1e56bf2b117ca6013abeed544ad52961523af9", "bytes": 11433}, + "fathom-analytics": {"name": "Fathom Analytics", "category": "Product & SaaS", "description": "Fathom Analytics' site: white and green-tinted grey #f4f6f5 surfaces, system sans text in green-grey inks (#242925 headings, #4e5551 body at 18px/27px), a 56px bold headline with -1.4px tracking, violet #6a51ec CTAs (6px, or 24px pills in the header) darkening to #3d22c3, and a monospace founders' letter.", "sha256": "db2fc9d86ed8b95f4256cead9b4d0e291a67414dc306acd7f6b2a5c62ec0e8cf", "bytes": 16017}, + "fauna-robotics": {"name": "Fauna Robotics", "category": "Tech & AI", "description": "Fauna Robotics (faunarobotics.com), a New York humanoid robot company: warm cream #f8f0e3 canvas, near-black plum #180102 ink, orange #f16b46 buttons with a 32px and 8px mixed radius, Matter at weight 500 with 64px/-2px headlines, rounded 100px logo tiles.", "sha256": "4cd80a352e2c1d010229a48a49b6e9b83f8c6d4e7056a3ad8fe840f5aea9503f", "bytes": 11103}, + "fc-porto-memorial": {"name": "FC Porto Memorial", "category": "Retail & E-commerce", "description": "FC Porto Memorial (memorial.fcporto.pt), a Portuguese-language tribute microsite for Jorge Nuno Pinto da Costa: a midnight navy #01060e canvas, warm cream #e8e1d2f2 type, GT Super Display serif at 111.424px with -5.5712px tracking, system sans body at 16px, an EN/PT switch and a scrolling timeline.", "sha256": "5919f16bd2c8a6638dccfc85e9ea32db696ccdb1fabe9c36db3ab82074f6abb0", "bytes": 10462}, + "fedex": {"name": "FedEx", "category": "Logistics & Mobility", "description": "FedEx US home (fedex.com/en-us/home.html) measured at 1280px: FedExSans in 300/400/500/700, FedEx purple #4d148c header and secondary pills, orange #ff6200 square TRACK button with 19px uppercase label, blue #007ab7 text links, #fafafa page ground and mostly 0px radius.", "sha256": "6c2560342d7ab96490fa17d82af8bf5d90c452b573f02e14652a515cc02792ae", "bytes": 11425}, + "fender": {"name": "Fender", "category": "Music & Audio", "description": "Fender international store: a black (#000000) canvas with white text, TheFuture uppercase headlines at weight 900 (48px section heading), dark #191a1f pill buttons (100px radius, 32px high) and white 44px pill CTAs, over full-bleed music photography and video.", "sha256": "7b9ecb8c69f28d47920e6d35ddca2cf170e7c52675d3f9d33fac1dd21850697d", "bytes": 10507}, + "fenty-beauty": {"name": "Fenty Beauty", "category": "Beauty & Personal Care", "description": "Fenty Beauty by Rihanna's Shopify storefront is a stark black-and-white system set entirely in Lineto's Brown — uppercase 700-weight fluid headings (71.1112px wordmark h1, 42.6666px/28.4444px/21.3334px at 1280px), 14px/400 body, 12px/700 uppercase buttons with 0.3px tracking — on a #ffffff canvas with warm-black #2d2929 ink, square 0px black (#000000) buttons 40px tall that invert to white on hover, #bd0100 sale prices, and full-bleed campaign colour such as magenta #cc2d75.", "sha256": "ec061923a68eb3e0440cbd5dd1a025f5de2fcd774cdc0f6900f86c847ca613d1", "bytes": 27789}, + "ferrari": {"name": "Ferrari", "category": "Automotive", "description": "Ferrari's site is a cinematic black-and-white editorial grid: #181818 bar and footer, white #ffffff content bands, full-bleed photography with uppercase Title-Font headlines, a Ferrari red #da291c accent and FerrariSans / Body-Font at 12-16px.", "sha256": "3842f287974992757dd622ce73bea87ba808b238a156f82a453f6a53f459b9e5", "bytes": 20845}, + "ferrero": {"name": "Ferrero Group", "category": "Food & Beverage", "description": "Ferrero Group global site: chocolate-brown (#59200a) text on white and cream (#fffaf0), Merriweather serif uppercase headlines at 50.08px over Rubik 16px body, light-orange (#ffa646) CTA, square-cornered outlined buttons and full-bleed heritage photography.", "sha256": "8b45d757499a06b839e74ebf3f074cc65dc11b413fd849a58505973ab6e2752c", "bytes": 10697}, + "fifa": {"name": "FIFA", "category": "Sports & Fitness", "description": "FIFA (fifa.com/en) is a pale blue-grey #eef2fb news-and-tournaments portal set in FIFASans with Poppins and Noto Sans fallbacks, deep navy #03122b text, a #045694 FIFA-blue header, a navy #020f2a hero and footer, white 100px-radius 'Read more' pills and 5px-radius story cards.", "sha256": "d83c30424bc0a7e24613d7da7de2cbb07b37f4d2bf36a1f396d33bab2140fb03", "bytes": 14249}, + "figma": {"name": "Figma", "category": "Design & Creative Tools", "description": "Figma's marketing site is a strict black-and-white frame (#ffffff canvas, #000000 ink and primary) set entirely in the custom figmaSans variable grotesque by Grilli Type at regular weight with tight negative tracking, with 8px-radius buttons, 24px cards and a 9999px pill, and all colour supplied by product imagery rather than chrome.", "sha256": "b05d59c4227e2be64e3372f5d9ac5dd6d2f0f31992ca1df02c852f378ba44072", "bytes": 21894}, + "financial-times": {"name": "Financial Times", "category": "News & Publishing", "description": "The FT's site sits on its signature paper background #fff1e5 with #33302e body ink and #000000 headlines: financier display VF serif headlines (48px/48px lead at variable weight 397), metric 2 VF sans for standfirsts, nav and labels (16px/24px), claret #990f3d topic kickers, teal #0d7680 links, a slate #262a33 Subscribe button and footer with 2px radius, and FT Pink #fcd0b1 accents — all defined by the Origami o3 token system.", "sha256": "a4e2ebc5b9b262340432548a762d0399cb4430127b77f0fd88c9538744937f25", "bytes": 23928}, + "fine-thought-site": {"name": "Fine Thought", "category": "Portfolio", "description": "Fine Thought portfolio: a code-editor interface on a charcoal #282828 canvas, with a fine-thought.js tab, a monospaced line-number gutter in code-saver, ASCII-art grid lines in grey #898989, and giant neue-haas-grotesk-display 600 headlines in #bababa (281.4px).", "sha256": "4ffbb4df32398998edbe28edaa5f25198cb95c00060c83432c05d014f82bd695", "bytes": 8686}, + "finland-gov": {"name": "Suomi.fi", "category": "Design Systems", "description": "Suomi.fi (suomi.fi/etusivu), Finland's public-services portal, is set in Source Sans 3 with a #235a9a blue for buttons, #2a6ebb link blue, a blue hero band, #f0f6ff and #d5e4f6 section tints, 2px-cornered buttons and white 4px cards with a soft shadow.", "sha256": "eaf6df44bec62dcf95250756b14c1f099b7772f8c5588420f68c93b281de2324", "bytes": 11624}, + "finland-toolbox": {"name": "Finland Toolbox", "category": "Design Systems", "description": "Finland Toolbox is a materials library by the Finland Promotion Board, set in Finlandica with uppercase bold headings, a single deep blue #002ea2 for buttons, links and underlined fields, near-black #060a14 text, a #f0f1f2 grey filter panel on white, and square (0px radius) controls throughout.", "sha256": "14e957b19c7ae683739bdb788de00a5c44225e847c5f0041176ce64bb8a7e1c7", "bytes": 10637}, + "finnair": {"name": "Finnair", "category": "Airlines", "description": "Finnair's web system — Nordic Blue #0c0243 as the single ink and outline colour on white, an accent blue #3772de (hover #2f62c0) reserved for filled primary buttons, proprietary FinnairHeadlinePro (variable 300–900, headings at 400/450/500) over FinnairText (400/500/700), 40px-radius pill buttons, 8px cards with whisper-soft 3% layered shadows, warm beige #edebe6 and pale blue #e1eafa surfaces, all expressed as semantic CSS variables like --surface-accent and --text-icon-primary.", "sha256": "50d6182ad00257ef81fb64f000076d177413880ce8b06c3d022e13dc26413e26", "bytes": 25516}, + "finnomena": {"name": "Finnomena", "category": "Thai Brands", "description": "Finnomena (Thai mutual fund investing platform) design system: aktiv-grotesk-thai type at 17px, white canvas, dark navy #01172c banners, acid yellow #f2f93c button with 4px radius, navy 200px sign-up pill and pale-yellow #fbfdbf cards.", "sha256": "0d05046937e45b73eeeeb42aaa01d152f81fac697e7b81e86c50fbd7bfa10448", "bytes": 10589}, + "firefox-acorn": {"name": "Firefox", "category": "Design Systems", "description": "Firefox's marketing site in a deep violet #210340 canvas with white text, a #7543e3 pill download button (128px radius, #6132bc on hover), Mozilla Headline VF at 80px/600 for the hero and Mozilla Text VF at 16px for body copy, and near-white lilac #f1e7f8 cards with 48px radii floating on the dark page.", "sha256": "d6ba5ad926135b99bac05596eeabf9762868d140b263cd6c26d9368cd2d25512", "bytes": 12980}, + "first-frame-2": {"name": "First Frame", "category": "Agencies & Studios", "description": "First Frame (Paris creative and post-production studio): a pure black (#000000) canvas with white (#ffffff) uppercase text, IBM Plex Mono 10.6667px for interface labels, HKRequisite 42.6667px uppercase for project titles, hairline rules and a slideshow of work with a 01/06 counter.", "sha256": "93777f88569a6ef819a3bdd19766f48b0d2590cf127c157e7af854c54832ae9c", "bytes": 8784}, + "first-solar": {"name": "First Solar", "category": "Energy & Climate", "description": "First Solar corporate site: deep navy #00355f buttons and panels, charcoal #212529 text on white and warm #f1edea bands, Franklin Gothic (URW) condensed headings at 48px with 300-weight body at 16px, HelveticaNowDisplay 68px hero headline, 5px-radius buttons and plant-floor photography.", "sha256": "2356e183ead294fca943f489e45d10dedb16d59b78067b9842da374437d24c33", "bytes": 10120}, + "flabbergast-agency": {"name": "Flabbergast Agency", "category": "Portfolio", "description": "Flabbergast Agency: a near-black #151515 canvas with off-white #fafafa text, Aeonik Regular at 83.264px with -1.66528px tracking for the hero line, Aeonik Fono uppercase mono labels at 12.96px, a red #e62200 footer, and a white 10px-radius service card over team photography.", "sha256": "fa6223752a2d3fa00e0ea3e890f4b9efa77f4212197870dfb010e703f98d81b1", "bytes": 9985}, + "flash-express": {"name": "Flash Express", "category": "Thai Brands", "description": "Flash Express Thailand (English site): signature yellow #ffea33 header, buttons and promo cards with charcoal #303133 text, Prompt typeface (14px body, 32px section headings, 57px bold promo display), white 8px-radius cards with soft shadow, and a tracking search bar.", "sha256": "fc7f7ee62c8b6d6a859338de424d855760c5ae25d665bbfa4d1a773f673323e5", "bytes": 10599}, + "flashlights": {"name": "Flashlights - Our Roots (history of jailhouse lawyers)", "category": "Culture & Events", "description": "Flashlights, the Our Roots history site on history.jailhouselawyers.org: buttery cream #f1eada canvas, near-black #101010 ink, saturated pink-red #e8465e and green #10935b chapter panels, ultra-condensed Fkscreamertrial 900 headlines at 124.444px, FK Grotesk body and mono labels.", "sha256": "bc40d0f650cf07d03e722305ede5c5e35c670de715af334afbdd9527539a0f42", "bytes": 10393}, + "flat": {"name": "Flat", "category": "Modern & Minimal", "description": "Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.", "sha256": "9d2d86cb15bfbb3f94748e06452f5a55023db2053cb62888a902f8b6d923bcf6", "bytes": 3068}, + "flexport": {"name": "Flexport", "category": "Logistics & Mobility", "description": "Flexport's 2026 site on flexport.com: a white #ffffff canvas with black #000000 headings, light Zalando Sans (ExtraLight 200 for the 58px/63.8px hero and 52px section heads, Light 300 for 20px/24px body in grey #595959), Roboto Mono uppercase for every button, nav link and eyebrow, and square-cornered (0px) Indigo #3048df buttons 48px tall with 12px 16px padding that darken to #182a9c on hover. Dark video hero (#000304), midnight #020e16 utility bar and a footer that fades from periwinkle to Midnight Blue #052439.", "sha256": "cafa2a1f482f18ae8ae40eefbc6043474cd3c36201de3cea21b7568971fc27e9", "bytes": 27690}, + "flim": {"name": "Flim", "category": "Tech & AI", "description": "Flim, an AI search engine for film stills: white and #f5f5f5 canvas on a visible grid, near-black #141414 ink and buttons, Swizzy sans at 19.6px, PP Neue Montreal Mono 12px uppercase labels, a 113.569px wordmark, rounded image tiles and a pill search bar.", "sha256": "da4d92375a81c79887257218ff9fc8261dec3b07fa246279f2ba79a5770d0290", "bytes": 9958}, + "flipkart": {"name": "Flipkart", "category": "Retail & E-commerce", "description": "Flipkart India: white marketplace canvas with #f1f3f6 backgrounds, Flipkart blue #2874f0 for links and the search outline, midnight blue #2a55e5 Login button (2px radius), golden-yellow #ffc200 chips, Inter 14px body and 12px captions, 12px-radius white cards over saturated sale-banner panels.", "sha256": "a62bba3aa3e13998b1fe211a7a86fbd1dedfcb1c144f50b35ea8a7748d2b9b3a", "bytes": 10411}, + "floema": {"name": "Floema", "category": "Retail & E-commerce", "description": "Floema (sustainable urban signage and equipment): warm ivory #f2efea canvas, stone-brown #241f21 ink and buttons, flour-yellow #e9e778 footer, Zimula typeface with tight negative tracking (53.36px display, 14.67px body), white pill navigation, and floating product thumbnails.", "sha256": "2e0aed008444501fce7f5f2b60fbcd93144bf80a27f2a15d7e2ec93c4891b9a6", "bytes": 10320}, + "flowaccount": {"name": "FlowAccount", "category": "Thai Brands", "description": "FlowAccount Thai online accounting site at flowaccount.com: Prompt 38px h1 and Chat Thai UI body, #66bd00 sign-up button with 5px radius, #2898cb brand blue outlines and numerals, #f8f9fb canvas with white and #e9f5fa bands, 20px cards with a 10px soft shadow.", "sha256": "71e52ce2c12664e47cf763ceef7382fe3d910bf0711614b2ddf6f21adb646b05", "bytes": 10732}, + "flowbite": {"name": "Flowbite", "category": "Frontend Frameworks", "description": "Flowbite, the open-source Tailwind CSS component library, presents a white marketing page set in Inter with 800-weight 60px headlines, gray-900 ink (#111827) over gray-500 body (#6b7280), a royal-blue #1a56db primary with 8px-radius buttons, and docs demos whose brand blue is #1447e6 with 12px radii.", "sha256": "20e1b1fcba7f23ff0f0bfc2af3cfb0a3ffac669a385570bc17028dc0be0235bf", "bytes": 20323}, + "floyd": {"name": "Floyd", "category": "Home & Furniture", "description": "Floyd (Detroit modular furniture) runs on a warm vintage-cream canvas (#f8f6ed, the site's --color-vintage) with brand-black #231e1e ink and buttons, large tightly-tracked sans headlines served from a face named \"Regular\" (40px/44px at -1.6px, 36px at -1.44px), body at 18–20px, monospaced uppercase eyebrows in \"Mono\" / GT America Mono, the custom Floyd Gothic in nav and product headings, and near-square corners (1px modal button, 5px Add To Cart, 3px chips).", "sha256": "621248fe19247e80fa9de59b215680817399a6aa16325b156759c721b6cad18b", "bytes": 28554}, + "fluent-design": {"name": "Fluent UI React", "category": "Design Systems", "description": "Microsoft's Fluent 2 as shipped in Fluent UI React v9: Segoe UI at 14px/20px body and a 10-step semibold ramp up to 68px, neutral #242424 ink on white, a #0f6cbd brand-80 primary with 4px-radius, 32px-high buttons, #d1d1d1 strokes and a documented 2-to-40px radius and 2-to-32px spacing scale.", "sha256": "1c6716e48189e8f0d2a185dd898f6222b3c8e98f0446bfc06ad5f8fda3affdfd", "bytes": 19855}, + "fluent-web-components": {"name": "Microsoft Learn", "category": "Design Systems", "description": "Microsoft Learn home page: Segoe UI at 16px/28px body with 40px headings, action blue #0f6cbd, near-black #161616 ink, warm beige #e8e6df bands, 4px-radius controls, 8px cards with a soft two-layer shadow and a navy Ignite banner.", "sha256": "c8f41e7f2f93698ee5d169f3b8088e379b7a0d8c787e01d4dec1063d928d2171", "bytes": 13412}, + "fluid-glass": {"name": "Fluid Glass", "category": "Architecture & Interiors", "description": "Fluid Glass (fluid.glass) is a UK bespoke architectural glazing site built on a graphite canvas #212325 with cream #f3f0ec panels, white type, Aeonik Pro for reading text and Aeonik Mono for uppercase micro-labels, square 0px buttons filled #0b1012 and one 16px radius.", "sha256": "5338d993eef1961c8dbed3a9d53cb3c30fbf370fcc0c49ca45a2263965a6bfc9", "bytes": 11585}, + "flyio": {"name": "Fly.io", "category": "Backend, Database & DevOps", "description": "Fly.io pairs a Mackinac serif display (72px/500, -1.44px tracking, #2e2e2e) with Fricolage Grotesque body text in muted violet-grey #686082 on white, #7c3aed violet 8px-radius buttons that darken to #6d28d9, 10px-radius #f4f3fb cards with #d5cfef hairlines, pastel watercolor gradient bands and a #191034 night-violet footer.", "sha256": "5ac690d6d73efd9df7b9bc5e1ac753e95d4c52f5287bc1894269ec9a8b327720", "bytes": 15933}, + "follow-art": {"name": "FOLLOW.ART", "category": "Tech & AI", "description": "FOLLOW.ART (follow.art) is a creative-practice card platform for artists and curators: full-bleed flat color fields in orange #f4793a, green #8e9487, pink #c5939d and blue #8498ac, white type, a giant uppercase Hardbop wordmark at 199.89px and HeadingNow for all reading text, with no rounded corners measured.", "sha256": "1d99fa6d0a0eec41edc9601ce0ba7f646a187343d43f4985e51d39c611d50508", "bytes": 10367}, + "fontshare": {"name": "Fontshare", "category": "Design & Creative Tools", "description": "Fontshare, the Indian Type Foundry's free-font library: a cream #ffffe3 canvas, near-black #10100e ink, Passenger-Sans 12px/16px UI, 120px live specimens in each typeface (Satoshi, Clash Display, General Sans), hairline #c0c0ab rules, a black active tab and 9999px pill toggles — no shadows.", "sha256": "f1e39fee1f0650873e19cbc26302e734abde3ab12069e92dc82e94a8632b5438", "bytes": 10258}, + "foodworld": {"name": "Food World", "category": "Thai Brands", "description": "Food World (foodworld.in.th) is CPF's Thai food-court and catering service site: white canvas, warm brown #665c53 text, lime #d5e03c headings, orange #ff9d24 pill buttons, Kanit and Prompt type with a 96px hero, and soft 32px and 50px rounded brown cards.", "sha256": "dca9ad18a095acb7a6fdf4652d606583f238fe11005a6b305d6d27925baf2194", "bytes": 11407}, + "ford": {"name": "Ford", "category": "Automotive", "description": "Ford.com's US home page: black #000000 hero and spotlight bands alternating with white #ffffff, #333333 body ink, Ford blue #066fef pill buttons (hover #044ea7) with 400px radius at 40px tall, #0562d2 links and promo bars, 8px media corners, and FordFont throughout from 54px/600 headlines to 14px/700 button labels.", "sha256": "2143f1cd27df99ff2d7759376e280ff9789c9d8235036b8b59f14f34402e6fa5", "bytes": 13477}, + "form-energy": {"name": "Form Energy", "category": "Energy & Climate", "description": "Form Energy (formenergy.com) is an American iron-air battery company whose site pairs full-bleed factory photography with uppercase Roboto Condensed headlines (86px hero), Roboto Mono labels, light-grey #f4f4f4 and white bands, black footer and a single amber #faaf40 outline accent with 3px square-ish corners.", "sha256": "d619092b52188adef93062a0e1d27c2f7e0d4274f7064c9fd92985bbf1299215", "bytes": 11252}, + "form-fun-studio": {"name": "Form&Fun Studio", "category": "Portfolio", "description": "Form&Fun Studio (formandfun.co) is a global creative technology studio site: white #ffffff canvas with warm grey #f5f4f2 tiles, near-black #1d1d1d ink, Aeonik at 12.8px for UI and up to 89.6px for section words, one pill-shaped #1d1d1d \"Learn more\" button with 25.6px radius, and 8px-radius media cards.", "sha256": "b66b2d07c6d5f80327077930b5af34f8049383d1662ae93d6b15708e1beaab5e", "bytes": 9392}, + "formula1": {"name": "Formula 1", "category": "Sports & Fitness", "description": "Formula 1's formula1.com — a news-and-video sports surface built on a carbon #15151e hero band, a white #ffffff content canvas with warm #f7f4f1 story cards, and one racing red #e10600 for pill CTAs (1000px radius). Headlines use the proprietary Formula1 face at 900 in uppercase (32px desktop / 24px mobile); everything else is Titillium Web 400/600/700 at 16–17px with #1c1c25 ink and #606066 meta text; cards are 8px-rounded.", "sha256": "118c3d74b847d1b40c0b210fea2cb730d6a760d0d17bd3147376db439b0bb059", "bytes": 25508}, + "foudre-human-social-club": {"name": "Agence Foudre (Human Social Club)", "category": "Business & Corporate", "description": "Agence Foudre (agencefoudre.com, wordmark Human Social Club) is a French social-media agency site in pink #f29ebd and deep pink #db3c8a on white and forest green #00522d, with Beni 900 poster headlines (94px), Clash Grotesk 500 body, 10px-radius buttons and 20px-radius cards.", "sha256": "c836ad5b33cbd8f7cb34207c4594b00f8668e71e1f60dfeb8f727b649bbf3b6e", "bytes": 9793}, + "foundation": {"name": "Foundation", "category": "Frontend Frameworks", "description": "Foundation for Sites by ZURB, a responsive front-end framework: its docs and marketing use #fefefe and #0a0a0a with the default $foundation-palette (primary #1779ba, secondary #767676, success #3adb76, warning #ffae00, alert #cc4b37), square 0-radius framework buttons, Helvetica Neue docs type, and a 200-weight Proxima Nova homepage.", "sha256": "739c5f315be0745993127209e0778e3f20e6fde9ec5c4d56fa45a4f64c2fa68c", "bytes": 19156}, + "four-seasons": {"name": "Four Seasons", "category": "Travel & Hospitality", "description": "Four Seasons Hotels and Resorts (fourseasons.com): a black-and-white luxury hospitality site. Saol Display 300 uppercase headlines at 60px, Monotype Garamond 18px/27px body copy, Neue Helvetica 10px bold uppercase labels with 3px tracking, square 0px buttons with a 1px #000000 border on #ffffff, and full-bleed photography on a #000000 page.", "sha256": "8d3778588e7408c513c377b7a8966a3c07718dc74ff38f9e06f90024efbd8575", "bytes": 16812}, + "fourmula-ai": {"name": "Fourmula AI", "category": "Tech & AI", "description": "Fourmula AI (fourmula.ai) is an AI product-imagery platform site in near-black #020108 on white #ffffff and grey #f7f7f7 panels, set in SF Pro Display with -2.66px tracking at 88.5981px, a black pill \"Get started\" button that turns orange #ff6b02 on hover, and large 17.72px to 35.44px rounded media cards.", "sha256": "936f4bdf38b8e317fd719e8a57308c50f06041290c6d5012184c57575777fec6", "bytes": 10736}, + "foyer": {"name": "Foyer", "category": "Design Systems", "description": "Foyer is a Luxembourg insurer whose website sets Barlow (400 to 700) on a white canvas with slate ink #3b4856, a single electric blue #2957c8 for actions and the footer, a deep navy #041d58 for card text, and pale feather-grey #f8f9fc bands. Buttons are 50px and 200px pills, cards use an 8px radius with a soft blue-tinted shadow, and photography of smiling households sits beside flat blue illustration.", "sha256": "106c5ce69e189b3b09afabde95a0ad47342dbd20683b4c58e20fc6263f07a145", "bytes": 14091}, + "framer": {"name": "Framer", "category": "Design & Creative Tools", "description": "Framer's homepage is a pure black stage (#000000 canvas, #ffffff ink) set in GT Walsheim Medium at 54px/-2.16px for headlines and Inter Variable for text, with white 8px-radius buttons, #111111 and #171717 panels with 15-25px radii, and Framer Blue #0099FF appearing only as a glow, link and focus accent.", "sha256": "7a16cd77876c47505bd6686b0505ea96a35c0dd815ca09c8e077428f2cadad8a", "bytes": 17887}, + "framer-motion": {"name": "Motion", "category": "Frontend Frameworks", "description": "Motion (motion.dev, previously Framer Motion) is a near-black #080808 developer site set in TASA Orbiter 700 headlines with grey-green #979d97 body text and #edebe5 highlights, square-cornered uppercase Geist Mono buttons in yellow #fbd509 and green #52cd86, 6px-rounded code cards and a light #f8f8f6 footer.", "sha256": "32308f616c67e95820a9f656934698d2d28b62a3ecca40c95787bdd4ed795ab7", "bytes": 15565}, + "framework7": {"name": "Framework7", "category": "Design Systems", "description": "Framework7 homepage: warm brown-black #201a19 canvas, off-white #ede0dd text, peach #ffb4a4 pill buttons with 44px radius, Inter 700 headings at 44px and 48px with 18px body, and a red-orange logo, plus an iPhone demo of the framework.", "sha256": "c00ba294527a970fc741835f6b367eec5f41856d3fc01bccb46701a1d3009327", "bytes": 10584}, + "freee": {"name": "freee", "category": "Design Systems", "description": "freee marketing site: Japanese cloud accounting brand in Noto Sans JP (34px/51px headline, 16px body), saturated blue #2864f0 with navy #1e46aa on white and #f7f5f5, 8px primary buttons 48px high, white cards with a soft 2px shadow and pale-blue illustration tiles.", "sha256": "d613fb01cc14f836aa33c59388312d83e48ffb2de1535cf94aaffe2737ef7724", "bytes": 10467}, + "fremtind": {"name": "Fremtind", "category": "Design Systems", "description": "Fremtind Forsikring (fremtind.no) is a calm, editorial insurance site built on its Jøkul design system: a warm sand canvas (#f4f2ef), granite ink and action colour (#1b1917), a near-black footer (#000000), light-weight Fremtind Grotesk at 30px/40px, outlined pill buttons (9999px radius) and an 8px-radius dark navigation card laid over a full-bleed street photograph.", "sha256": "be8d9984d9e9ab433176da1f4cc2a4f3bdf666a085c45508321fc8d109d85b92", "bytes": 10307}, + "freshket": {"name": "Freshket (เฟรชเก็ต)", "category": "Thai Brands", "description": "Freshket (freshket.co, เฟรชเก็ต) is a Thai B2B fresh-food ordering marketplace for restaurants: white canvas, brand green #008065, sale red #de1b1b, Noto Sans Thai at 10px to 16px, 8px-radius cards and a 32px green \"สมัครสมาชิก\" button with a soft blue-grey shadow.", "sha256": "172c7e13a2edafd06724b7d93e578e06f8263c33b2720b8b28c19980e55e7a43", "bytes": 10715}, + "freshman": {"name": "Freshman", "category": "Fashion & Apparel", "description": "Freshman (freshman.tv) is an award-winning production company site: a full-viewport dark reel on #101010 and #000000 with a giant white italic \"freshman\" wordmark, Editorial New at weight 200 for statements, Altform bold uppercase for client names, the handwritten Wasted Year face for tags, and red #ff2936.", "sha256": "39fc16ec99439555838e89e9c01c5a5c7ba5deaf5adbf814ae5a1b39cb668b4c", "bytes": 10166}, + "freshworks-g": {"name": "Freshworks", "category": "Product & SaaS", "description": "Freshworks.com home: warm off-white #f7f7f4 canvas with full-black #000000 bands, Lora serif headlines (72px/80px, with bold-italic emphasis words), Inter and Roboto UI text in #1d2026 and #6c6c6a, black 9999px pill 'Get a demo' buttons, 12px-radius media cards and saturated testimonial panels in #ffb42d, #ff574a, #eb3da7 and #73bc29.", "sha256": "5d90b6dbe0ea0389fcd7242eeafe4c040f6e7920d8ad4811705de50663cac0da", "bytes": 12120}, + "friendly": {"name": "Friendly", "category": "Creative & Artistic", "description": "Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.", "sha256": "837c798e10342a6e1281fdeeb05fc80ce4b74d1467543155bf6db13c935c4ce2", "bytes": 3046}, + "fritz-hansen": {"name": "Fritz Hansen", "category": "Home & Furniture", "description": "Fritz Hansen (fritzhansen.com) is the Danish furniture, lighting and accessory design house: white #ffffff and beige #efeeeb pages, black #000000 text, HansenGrotesque in uppercase at 43.75px and 27.5px for headings, 15px body, square 0px corners, and full-bleed room photography with product tiles.", "sha256": "ec299e3f716302623d1fae3feba6b56f0653889638079db18fb703eff2ab6594", "bytes": 11041}, + "frog": {"name": "frog", "category": "Agencies & Studios", "description": "frog (part of Capgemini Invent) runs a near-monochrome, cinematic system — pure #000000 canvas with #ffffff type, the self-hosted frogSerif at weight 300 for 60–180px editorial headlines, GT America (400/500/700) for everything else, square 0px buttons with a 3px border that invert on hover, a single 16px-radius region chip, and five Bootstrap-era highlight colors (--hl-green #4ee601 etc.) kept in reserve.", "sha256": "bdf5a9d041bf03c9aed61d80b3a0e7db4274167f4e7dd3566dcf02eb3e0905c6", "bytes": 31769}, + "fromanother-love": {"name": "fromanother", "category": "Portfolio", "description": "fromanother (fromanother.love) is an artist-led creative studio site on deep navy #051236 with cream-yellow #fffde2 text, twkFont uppercase headlines at 73.3333px and -2.2px tracking, herbikFont italic captions, a glowing teal hero shape and one brand blue #1740a9 declared in the stylesheet.", "sha256": "daf2969987a27e9e6341cf03fc616619a2b94992b1f88bfc1106f4a6768cfdbd", "bytes": 9740}, + "fromsoftware": {"name": "FromSoftware", "category": "Gaming", "description": "FromSoftware (fromsoftware.jp, フロム・ソフトウェア) is the Japanese game developer's corporate site: near-black #0f0f0f with #151515 and #222222 panels, white and grey #a6a6a6 text, Archivo for Latin labels and a Noto Sans JP system stack for Japanese, edge-to-edge key art, 4px corners and grey #838382 date chips.", "sha256": "bfe878b9c0888a7f2145cbcebe8d3a6665c98069996892858ddbcee6fa694583", "bytes": 9852}, + "frontier-familysearch": {"name": "FamilySearch", "category": "Design Systems", "description": "FamilySearch's global homepage (www.familysearch.org/en/global) is a warm, humanist genealogy site: HeritageHeadings and HeritageBody sans faces, near-black #202121 text on a #fefefe canvas, one deep teal #057091 (hover #0383a4) for 4px-radius uppercase buttons, full-bleed documentary photography and soft flat illustrations.", "sha256": "1c9489fa707f48d91df521b537874f01539bed71bba4921492dd97594925d666", "bytes": 11625}, + "fujifilm": {"name": "Fujifilm [Global]", "category": "Consumer Electronics", "description": "Fujifilm [Global] (global.fujifilm.com/en) is the group's region-selector and corporate home page: white canvas with #f1f2f1 panels, charcoal #333333 square-cornered buttons (2px radius), Clarimo UD PE in light and narrow cuts with 0.96px tracking, green #018463 line icons and a declared red #fb0020.", "sha256": "01d4be5170a6a66ddaa997eb957f648981395d161da3b5af0efcd4cd7c98760f", "bytes": 11359}, + "fullstory": {"name": "Fullstory", "category": "Product & SaaS", "description": "Fullstory's fullstory.com site: deep teal #0a2828 / #0e3c3c / #135050 bands with white text, neulis-neue display type (62px regular hero) over neulis-sans body (20px/30px), green #11ab85 uppercase 4px-radius 'GET A DEMO' buttons (hover #059573), and a three-color product code: green #07c799, pink #ff6f94 and purple #9e36f1 on 10px-radius outlined cards.", "sha256": "6b936d9f82b31c49954f76e73649b40912bcdcc11871ed9093c605e7cba52dd2", "bytes": 12307}, + "function": {"name": "FUNCTION", "category": "Culture & Events", "description": "FUNCTION (function10.ca) is a Ballroom culture platform for stories, audio, events and portraits, set entirely in TWK Everett 400 uppercase with negative tracking (71.1168px hero, 22px headings, 12px body), black #000000 ink on a white #ffffff canvas, full-bleed event photography, and lilac #9389c5 and cyan #24ceea portrait cards with 2px corners.", "sha256": "8aea654940eed51e9b92c937c045818ad1156e159c9ce4be36efdd181cae66a1", "bytes": 11189}, + "function-health": {"name": "Function Health", "category": "Healthcare & Wellness", "description": "Function Health's lab-testing membership site — a warm beige canvas #fef9ef with cream #f5eee1 cards and footer, midnight #2a2b2f ink and gray #515151 secondary text, light Financier Display serif headlines (76.5418px/300) with one orange italic phrase, FT Base sans at weight 300 for body (16px/24px), Fragment Mono uppercase tags, and burnt-orange #b05a36 fully rounded pill CTAs (12px 25px, 50px tall) that flip to midnight on hover.", "sha256": "3aaba3c27a6f04987a22ed6f3315650fcdee94254154cff72d0d2e50810c4591", "bytes": 24529}, + "future-park": {"name": "Future Park Rangsit", "category": "Thai Brands", "description": "Future Park Rangsit and ZPELL (futurepark.co.th) is a Thai mall site on a warm off-white #fafafa canvas set in LINE Seed Sans TH, with 32px bold uppercase headlines in charcoal #44424a, fresh teal #2dd4cd section eyebrows, a deeper #13afab for links and outlined buttons, soft lime-to-mint gradient bands, and generous 15px to 32px rounded cards.", "sha256": "a7241bd22f31a8264a763716fd0ffe94d38b2b6f391803711b124436c0478182", "bytes": 10822}, + "futuristic": {"name": "Futuristic", "category": "Themed & Unique", "description": "Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.", "sha256": "7aca9e082a2c20876331e7aca13e3c16847e3f51c37db19612e009a247bde376", "bytes": 3049}, + "fwd-thailand": {"name": "FWD Thailand", "category": "Thai Brands", "description": "FWD Thailand (fwd.co.th/en) is a life insurance site built on the FWDCircularWeb typeface (300 body, 700 headings, 48px hero) with FWD orange #e87722 buttons and 2px outlines, cream #fef9f4 product cards with 16px radius and soft shadows, peach #fae4d3 promo bands, mint #6eceb2 discount badges and lifestyle photography.", "sha256": "aa936c470a1490258660a7fe9659920f902ad33ac39aa7d75c40e23146e66fc6", "bytes": 10545}, + "g-capital": {"name": "G Capital", "category": "Thai Brands", "description": "G Capital (gcapital.co.th), Thai personal and agricultural lender whose Sabai-jai loan brand uses Prompt type, a royal-blue #324695 action and footer color, light grey #dddcdc and #e5e5e5 bars, 50px-radius pill buttons and an uppercase 34px bold Thai heading.", "sha256": "ee6d395a8588e1202fbb486ff86c2af7bf1017f8f904a7d8301840ab66c7be0a", "bytes": 10874}, + "gap": {"name": "Gap", "category": "Fashion & Apparel", "description": "Gap (gap.com) is a US apparel storefront set in Gap Sans v1 weight 400 (55.7333px hero, 14px body), with black #000000 and white #ffffff controls, 0px-radius rectangular buttons, a black 46px brand bar, full-bleed lifestyle photography with white headlines, and neutral greys #757575 and #ededed.", "sha256": "d0a00a8519757024d6731822f24b759180eadef93376ddf1c1e2169995052895", "bytes": 10916}, + "garmin": {"name": "Garmin", "category": "Consumer Electronics", "description": "Garmin's US site is a black-and-white retail system exactly as its Consumer Brand Style Guide prescribes: Oswald (the web stand-in for Knockout) at weight 400 with 0.8px tracking for every headline — 40px/50px h1, 32px/40px section and card titles — over Roboto 16px/24px body, #ffffff canvas, #000000 ink and footer, square 0px buttons (8px 24px outlined, 16px 32px contained), 2px-radius product cards with a soft 0 2px 4px 1px shadow, and Candy Blue #6dcff6 reserved for ADD TO CART.", "sha256": "6f153fb0a09be99a446b1c122737c8d12fcfe7c228810c6e8c5d4b1d82fe414a", "bytes": 26469}, + "gary-and-the-endless-forest": {"name": "Gary et la forêt infinie (Garance)", "category": "Culture & Events", "description": "Gary et la forêt infinie (play.garance.com) is a French-language game page by Garance: a full-viewport illustrated forest scene with cream #fbffdc UI text in Kilimanjaro 400 (14.6286px), a 65px nav bar, chunky 29.2573px-radius controls, a green #006468 palette and orange #f47f46 action buttons.", "sha256": "9415a2ff5ad0c89c36d5175ca43fcf5770ba0e994156d67539900b3e8a3c67ff", "bytes": 10330}, + "gavin-schneider-productions": {"name": "Gavin Schneider Productions", "category": "Fashion & Apparel", "description": "Gavin Schneider Productions (gsproductions.co.za) is a photography and film portfolio in SuisseMedium 500 at 8.88889px, black #000000 text and grey #979797 labels on a #fbfbfb page, a 28px navigation bar, no radii or shadows and tall full-colour portrait photographs in a narrow column.", "sha256": "b636d545281c77e1c3752499746eee7c3137b3287cf2a1684aefb0144f36d850", "bytes": 8945}, + "gdh-559": {"name": "GDH 559", "category": "Thai Brands", "description": "GDH 559 (gdh559.co.th) is a Thai film company site set in Kanit (45px weight 800 uppercase news heading, 15px body) with GDH blue #009be4 links and 3px outlined square buttons, grey #868e96 body text, a #f2f2f2 article band, 25px pill tags and a #262b2f footer with orange #fd590f accents.", "sha256": "101e3bb0c0f582268cfda69e45393d65479153c6c37e686439c92936d571a583", "bytes": 10338}, + "ge": {"name": "GE", "category": "Business & Corporate", "description": "GE.com (General Electric) is a short corporate hub on a #f0f3f7 grey canvas set in GE Sans (gesans-regular/bold), with a #1e2f46 dark blue-grey header and footer, #0870d8 GE primary-blue links, a 69px light-weight hero headline with tight tracking, and three square company cards in navy #00003d, teal #005e60 and purple #6022a6.", "sha256": "a3232c8d30b975874c3ab9ecd85ec2bedc5dbf041738d1f766fc8931b754ebee", "bytes": 12075}, + "ge-healthcare": {"name": "GE HealthCare", "category": "Healthcare & Wellness", "description": "GE HealthCare (gehealthcare.com, US) is a medical technology site in Source Sans Pro 400 (48px headlines, 18px body), with GE purple #6022a6 links and top bar, lavender #f4f1f8 category bands with 16px-radius cards, dark #222222 headings, 8px-radius 44px buttons and clinical photography.", "sha256": "15b01c885b2bb8ee36bb26cc07f449231440d18558805c7bbbb64c347aa6ed7a", "bytes": 9999}, + "ge-vernova": {"name": "GE Vernova", "category": "Energy & Climate", "description": "GE Vernova (gevernova.com), the energy-equipment company spun off from GE: white #ffffff pages, deep evergreen #012d2f video hero and #212121 footer, Evergreen #005e60 as the dominant text and link colour, and Urgency Green #c8ff08 for pill-shaped CTAs (30px radius, 56px tall, 16px/600 ge-inter-semibold label in #005e60; hover fills #05625e with #f9fbfb text). Display type is the condensed ge-sons-condensed-extrabold, uppercase at 92px/74.52px; body is ge-inter-regular 18px/28px with -0.54px tracking. Story cards are white with 8px corners on an #e4f1f1 band.", "sha256": "f0519711a8b2c452cc86582a95cc0ff3c46dc97dbc551771ddf2451500a18e10", "bytes": 21056}, + "geico": {"name": "GEICO", "category": "Banking & Insurance", "description": "GEICO (geico.com) is an insurance storefront set in GEICO Roobert (72.8px weight 600 hero, 17.6px body) with action blue #026df1 100px-radius pill buttons, navy #062342 text, cream #f6f5ee bands with 15.2px-radius cards, a deep-blue #004894 panel and a lime #c8f547 accent.", "sha256": "917ca088f6f7a1424407e9f93c7deb3b1281a59b9376ad3c30d5cdccfeb168d5", "bytes": 11253}, + "gemini": {"name": "Google Gemini", "category": "AI", "description": "Google Gemini (gemini.google.com/app) is the signed-out chat app in Google Sans Flex (36px weight 320 heading, 13px legal text) on a #faf9f9 canvas with white pill surfaces, a light-blue #c2e7ff Sign in button with #004a77 text, 9999px radii and a soft blue radial glow behind the prompt field.", "sha256": "834ecd14ff30c5b168812e4708b095683055aaf5e3b282ffa27823d0eb2faab7", "bytes": 9532}, + "generali": {"name": "Generali Group", "category": "Banking & Insurance", "description": "Generali Group (generali.com) is an insurer's corporate portal in Roboto (38.7981px weight 300 headings, 15.008px bold uppercase buttons), with Generali red #c21b17 5px-radius buttons, #f6f6f6 cards with 8px radius, #20252b text on white, and red feature panels behind photography.", "sha256": "dc5c1a28242335a9afc0aab99bb0226e37a476b0b1d4c05ba2a2e2526446c08e", "bytes": 10879}, + "generali-life-thailand": {"name": "Generali Thailand", "category": "Thai Brands", "description": "Generali Thailand homepage (generali.co.th): white canvas with #ebeaea grey bands, Noto Sans TH at 16px body and 30px headings, Generali red #c21b17 on 3px-radius buttons (45px tall, 15px 35px padding), #7a7a7a secondary text, 10px-radius cards with soft grey shadows.", "sha256": "9db970a8a544b0f22883576475803d8be63332d28bef3071d5525ae6936156a8", "bytes": 10108}, + "genesis": {"name": "Genesis", "category": "Automotive", "description": "Genesis (genesis.com/worldwide/en) is a luxury automotive site in GenesisSansHeadKr weight 300 (48px) and GenesisSansTextKr (14px body), with near-black #111111 2px-radius buttons, a translucent black header, white-on-photography captions, #535356 body text, copper #af6249 press labels and 4px-radius model cards.", "sha256": "f2de33e884fd2c88e258e59ff51667117b53d1106df98393389f5533c9f0ef00", "bytes": 10272}, + "get-hyped": {"name": "Get Hyped", "category": "Product & SaaS", "description": "Get Hyped (gethyped.nl) is a Dutch social-first content agency site in Inter 600 (85.3333px headline with -4.26667px tracking), on a cream #faf4ec canvas with #161616 text, orange #fa5424 actions, flat pink #fcb8fa, blue #0d8dff and green #33c791 tilted cards with 32px radii.", "sha256": "eb6b49f1537d58109d6f397ef8d6f160ee569fecbff7853d4cdea6c850b3a745", "bytes": 10300}, + "getyourguide": {"name": "GetYourGuide", "category": "Travel & Hospitality", "description": "GetYourGuide's website pairs a midnight-blue ink #1a2b49 on white with a vivid interactive blue #0071eb, a coral #ff5533 brand mark colour and critical red #c72a3d for discounts; GT Eesti bold at 36px for the hero, 80px pill buttons, 12px photo cards and a published semantic CSS token layer.", "sha256": "5405dc422eba063c981c4378d9e520e0c12179b155a6fd28a116d29bf447c6e4", "bytes": 17252}, + "ghb": {"name": "ธนาคารอาคารสงเคราะห์ (Government Housing Bank, GH Bank)", "category": "Thai Brands", "description": "Thai state housing bank site on a white #ffffff canvas with #333333 body ink, orange #e64500 and #fe5000 as the brand colors, Google Sans at 13px to 18px for Latin and Thai text, DB Heaventbold at 24px for the Thai menu, 6px card radius and a #f0f0f0 grey footer band under an orange rule.", "sha256": "654a8639c6c20e955ef1f22a9a21a451811c133982917a7043caefc81c32c863", "bytes": 10905}, + "gibson": {"name": "Gibson", "category": "Music & Audio", "description": "Gibson guitar retail site: white #ffffff canvas with #000000 ink, full-bleed black photographic hero, Inter Tight at 16px to 48px in weights 500 and 600, pill buttons at 25px radius, a gold #86764b secondary button and #f7f7f7 product cards with a 10px radius and soft shadow.", "sha256": "baa9f0179b72ddf1eba91d1128b376b688d1f33e52756faf872a3e095016a4ec", "bytes": 10490}, + "gil-huybrecht": {"name": "Gil Huybrecht — Freelance designer & art director", "category": "Portfolio", "description": "Black portfolio page for freelance designer and art director Gil Huybrecht: #000000 canvas, #ffffff text, a single sans typeface at 14.5067px weight 500, a six-column header row, project rows of numbered thumbnails and a 4.27px radius on tags, with no buttons, shadows or accent colors.", "sha256": "fedcb6d50af26d932349709fb1d28d88bc2492716c40f858284cd6ef06681c94", "bytes": 8871}, + "gilead": {"name": "Gilead Sciences", "category": "Pharma", "description": "Gilead Sciences corporate site: white and #f4f5f4 canvas, #222222 text, crimson #c5203f square-cornered buttons 50px to 60px tall, proxima-nova from 18px to 40px at weights 400 and 500, pale pink, teal and blue stat panels with a 5px radius and soft grey shadow, and a #e2eaf4 blue footer.", "sha256": "5c0b7bbdf5d08008710702f14db21c05746032dd022779949ef642c1a9761d19", "bytes": 10376}, + "gitbook": {"name": "GitBook", "category": "Developer Tools & IDEs", "description": "GitBook's home page sets General Sans Bold headlines (45px/700, -0.9px) in warm near-black #1c1917 on white, with General Sans 18px body in stone grey #57534d, a single flame-orange accent #fe551b, black 99px pill CTAs and 8px/16px-radius white product panels on a #fafaf9 warm-grey band.", "sha256": "df5da944df334db723728b0f1eb21eaca9c7cbc7ca72bd615d233106467f6c47", "bytes": 14771}, + "github": {"name": "GitHub", "category": "Design Systems", "description": "github.com home in Primer Brand dark mode: deep #0d1117 canvas over a black page, white Mona Sans headlines at 64px (weight 425, -2.24px tracking), muted #a4aea6 body, a green #08872b primary button with 6px radius, translucent white cards at 24px radius, and mint #5fed83 accent borders.", "sha256": "e10f574214a294dbc0dfd469994c0fcb7bbbadac55236a317c4f8f57319f75ea", "bytes": 12119}, + "gitlab": {"name": "GitLab", "category": "Design Systems", "description": "GitLab's homepage pairs a Charcoal #171321 hero with white sections, GitLab Sans at 85.76px/660 for the hero headline, 18px body, 4px-radius Charcoal buttons, GitLab Mono eyebrow labels and warm orange to purple gradient art; the Pajamas design system documents the brand palette and a separate 8px-radius product UI.", "sha256": "de1ae9c52696fbe672649edc0e22015ce8d4ee04a3d8f1e7a42358bca99f8fec", "bytes": 11935}, + "giztix": {"name": "Giztix", "category": "Thai Brands", "description": "Giztix (Thai online trucking service) design system: db_heavent Thai type with a 66px weight-700 hero, white canvas, saturated red #d90101 booking button, #333333 text, 6px button radius and 5px cards with soft shadow.", "sha256": "bd7b954bc08b3d817e5d972b7711eb0628d70c6578b6b685c9c6eca8839d5707", "bytes": 9870}, + "gkc-architecture-design": {"name": "GKC Architecture & Design", "category": "Architecture & Interiors", "description": "Canadian architecture firm site with a #ffffff canvas, #151f26 dark navy ink, ABCDiatype at 66.6667px display with -2.66667px tracking, 31.1111px body, hairline #a2a2a2 rules, square 0px corners everywhere, 75px rectangular white and navy buttons and full-bleed building photography.", "sha256": "9499bd1026038e6945683d95c513fc3d83bd5375d713019e9b470a41b6a54fef", "bytes": 10935}, + "glassmorphism": {"name": "Glassmorphism", "category": "Morphism & Effects", "description": "Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.", "sha256": "e2c75dbd21f932336d59767c2042551cc859780248f17857b3da2334e82388f6", "bytes": 3174}, + "glastonbury": {"name": "Glastonbury Festival", "category": "Culture & Events", "description": "Glastonbury Festival (glastonburyfestivals.co.uk): a deep navy #1a1a36 night-sky site with white uppercase Bebas Neue Pro SemiExpanded headings on a fluid scale (52.111px max at 1280px), Proxima Nova body text, and news cards in flag colours — red #d93a4d, blue #3969a9, gold #cd840e, green #147c41 — with round 50% social buttons.", "sha256": "0473aebd092691158dfb7d46bbf85335e21081083885f34dc61415f30c1dd6bf", "bytes": 12525}, + "glenn-catteeuw-portfolio-1": {"name": "Glenn Catteeuw - Interactive Art Director", "category": "Culture & Events", "description": "Portfolio of interactive art director Glenn Catteeuw (glenncatteeuw.com), measured on its entry screen: off-white #f2f2f2 canvas, off-black #1a1a1a ink, Druk Bold uppercase 56.8888px display, Replica Mono 10.6667px uppercase labels, small 2.67px and 3.56px radii and no borders.", "sha256": "3573cb862d5e9ccbed7e5265d00ad7436c159de7e316029e216daf2d47803d7e", "bytes": 10277}, + "glitch-grit": {"name": "Glitch&Grit", "category": "Portfolio", "description": "Glitch&Grit creative studio portfolio: pure #000000 canvas, #fffbf6 warm white, brand green #9be187 and a cyan #99f8ff, elza at weight 900 uppercase 140.274px with -7.0137px tracking, 14px weight 600 nav, 4.38px radius and full-bleed project showcases.", "sha256": "d4507adf61670adf3381818ad2317ae4fb7aedbf7313bf2d1ee32f13f95cc831", "bytes": 9556}, + "global-green-chemicals-th": {"name": "Global Green Chemicals", "category": "Thai Brands", "description": "Corporate and investor site of Global Green Chemicals Public Company Limited (GGC, ggcplc.com), a Thai oleochemicals producer. Inter with Kanit and Sarabun, white text over a green-to-blue gradient home page, lime green #72bf45 accents, sky blue #25afef links, charcoal #383838 footer and 10px-radius photo cards.", "sha256": "fdb6963c8a2d5916bf6fb831a69aeab9465b1958b0bfaa5610a972c4bb8b053c", "bytes": 9956}, + "global-house": {"name": "Global House (โกลบอลเฮ้าส์)", "category": "Thai Brands", "description": "Thai home-improvement retailer's online store: white #ffffff canvas, #101828 ink, yellow #ffcb4b buttons with #1a1a1a text at 15.75px weight 700 and 15.25px radius, green #2c5640 top bar, red #e20720 sale accents, IBM Plex Sans Thai with Sarabun, and white cards with an 18px radius.", "sha256": "85d0896a4cbb040e3d574870bc0188d72e7c122fa85360af652e4ad10c7b6de4", "bytes": 12404}, + "global-innovative-solutions": {"name": "Global Innovative Solutions Co., Ltd.", "category": "Thai Brands", "description": "Thai IT solutions provider: deep navy #00194c sections and white pages, electric blue #0055ff buttons with 6px radius and uppercase 14px Kanit bold text, a #ffc107 yellow promo ribbon, Kanit at weights 500 to 800 with a 55px uppercase hero, and ISO 27001 certification badges.", "sha256": "c7438c916cc5e11b19c21d6bcd5ca4fefcce00b50244db5defaf200b3339ce93", "bytes": 11116}, + "global-power": {"name": "Global Power Synergy Public Company Limited (GPSC)", "category": "Thai Brands", "description": "GPSC corporate site, a Thai energy utility: white #ffffff canvas with #3b3b3b ink, cyan #00adee accent and outlined 3px buttons, navy #1e325a footer, Mulish at 49px weight 300 uppercase for the hero and 21px body, with full-bleed photography and four-up statistic panels.", "sha256": "8e4658b74b038c288b399fbcdf8a2c63149d84c0d2c3dfa6d4b0ab3c08305cc8", "bytes": 9848}, + "globish-thailand": {"name": "Globish Thailand", "category": "Thai Brands", "description": "Thai online English-course school: white canvas, #333333 ink, a single orange #f46500 CTA fill, Rubik with Kanit fallback for Thai, square 0px primary buttons, 4px inputs and 5px cards, over a dark photographic hero.", "sha256": "5db6567908eca311a171fc28f5dbf56b6e717c0c10a8ed4e614dd438c3ef0adf", "bytes": 12731}, + "globlex": {"name": "Globlex Securities", "category": "Thai Brands", "description": "Thai brokerage portal declaring Kanit but loading no font file: #f4f6f3 page body, white column, #32373e text, #42a9d3 sky-blue tabs and links, #d6c83e olive section headings, #232b5b navy contact card, 4px top-rounded tabs and light shadows.", "sha256": "83bc617ec4009267bb4afa883208aa3774875f38baa28324a13d771406aa8679", "bytes": 9621}, + "glossier": {"name": "Glossier", "category": "Beauty & Personal Care", "description": "Glossier's storefront is a white (#ffffff) Shopify theme set entirely in Colophon's Apercu at weight 400 — 14px/19.6px body, 12px uppercase nav, Apercu Mono 12px uppercase badges — with pure black (#000000) ink, square 0px corners everywhere, light-grey #f7f7f7 product tiles, a #e8e8e8 conversion button framed by an animated \"marching ants\" 1px black border, a single electric-blue #0600ff accent for NEW badges and focus, and a pale pink #faf2f4 footer.", "sha256": "c747e7efdc28159619b8190fbde72d5195f61e3077e3b7dd8ad236cf152108a1", "bytes": 28193}, + "glow-energy": {"name": "Glow Group", "category": "Thai Brands", "description": "Glow Group (glow.co.th), a Thai power, steam and industrial-water producer, uses a white canvas #ffffff, brown-grey ink #4a3c31, corporate blue #004a9c and a vivid orange #f85f00 accent, with Prompt for headings and Sarabun for Thai body text at 16px/28px, and 3px corners.", "sha256": "d00fc75b0066a811ec46b550c9afd5a130663842ee2b4723fb542c50049d0463", "bytes": 10941}, + "glyphic-biotechnologies": {"name": "Glyphic Biotechnologies", "category": "Tech & AI", "description": "Glyphic Biotechnologies, a protein sequencing company: white #ffffff canvas with #2c2d32 graphite ink and #e8e9f5 lavender-white on dark, a custom fontPrimary face at 64.5714px weight 500 with -2.58286px tracking, 15px body, hairline rules, and pale green 3D molecule imagery.", "sha256": "ae313c40bf91aa6ca8352488a88a10b6df6a21560e1a220d3ed4f00408fc933f", "bytes": 10294}, + "godiva": {"name": "GODIVA", "category": "Food & Beverage", "description": "Godiva Chocolatier retail site: warm white #fcfaf7 canvas with #ffeceb blush and #faf4eb cream bands, #212121 ink, gold #dcc193 square buttons with uppercase 16px gotham bold, 64px gotham uppercase hero, Castoro serif 18px body, 12px card radius and product-led holiday photography.", "sha256": "b067c0444394090c1eb9acc4431a7a545faecd2b1bdcfc25a5c7cc047e790cf9", "bytes": 11272}, + "gojek": {"name": "Gojek", "category": "Design Systems", "description": "Gojek's corporate site — Gojek green action buttons (#00880d, 96px pill radius, 44px tall) on white and deep navy (#101820) sections, set in the Maison Neue family (Extended Bold 48px headlines, Demi 16px buttons, Maison Neue 18px body), with oversized 40-64px rounded cards in saturated green, pink and orange and soft green glow shadows.", "sha256": "3b0225df0de55e52844f0bbe2af11d2122b7a75ad74f977e050d437c7f97a956", "bytes": 15083}, + "goldman-sachs": {"name": "Goldman Sachs", "category": "Banking & Insurance", "description": "Goldman Sachs home page measured from the live site: editorial, square-cornered corporate design in GS Sans, GS Sans Condensed and GS Serif, near-black #000000cc ink on #ffffff, a black #000000 primary button with 0px radius, and a single steel-blue #7297c5 navigation bar.", "sha256": "ff1502a6d9fba2495cc7c10190821a5924f28a01312418a118a8432f87ffeda8", "bytes": 11262}, + "good-fella": {"name": "Good Fella", "category": "Tech & AI", "description": "Good Fella, a digital studio: near-black #141314 hero over a light #eeeeee body, aktiv-grotesk headlines at 79.2816px with -2.77486px tracking, geistMono uppercase labels, orange #fd551d calls to action and strictly square 0px corners.", "sha256": "6101807b605cd4d87c3ed5bdd2966671a38d432a9702e102a788b66d900285ac", "bytes": 11109}, + "google": {"name": "Google", "category": "AI", "description": "Google's homepage as measured in a Thai-locale session: a white #ffffff canvas, #1f1f1f text, a #0b57d0 blue pill sign-in button with 100px radius set in Google Sans Text 500, Arial for search input and links, a large pill search field, and a centered logo doodle as the only imagery.", "sha256": "36a866e78699006a1bea5111ff4f5569627173812af728178962f2eaaf720ad7", "bytes": 9721}, + "google-deepmind": {"name": "Google DeepMind", "category": "AI", "description": "Google DeepMind home page measured live: near-black #121317 canvas, off-white #f8f9fc pill primary button, Google Sans Flex from 98px display down to 17.5px body, 24px card radius and 9999px pill controls, with color supplied by imagery rather than UI chrome.", "sha256": "41b4556829050922dba64039f8ecfbe522427833addb02ffc6e400fa8f4c8cc1", "bytes": 11653}, + "google-material": {"name": "Google (about.google)", "category": "Design Systems", "description": "The about.google corporate page: Google Sans at regular weight with 60px headlines (-0.5px tracking), Google Sans Text 18px body in grey #5f6368 on white and a pale #f3f5fa page tint, a single Google blue (#1a73e8) for fully rounded 48px-radius buttons, flat white cards with 8px corners, and no shadow-driven depth.", "sha256": "ea399af56dfaf4baf1a2f013f21ca4890dbb89f9ccbeecc3587a35ea95f5d683", "bytes": 10777}, + "gopro": {"name": "GoPro", "category": "Consumer Electronics", "description": "GoPro's storefront system on gopro.com: white #ffffff pages with #f9f9f9 hero bands and #e7e9ea product cards, ink #111111 for text and for every primary CTA (8px radius, 2px border, 48px tall), Klim's Söhne Breit served as 'SohneBreit' at weight 900 in uppercase for 52px/40px/30px headlines with 0.25px tracking, Söhne ('Sohne') 400 at 16px/24px for body, cyan #36bcf2 'NEW' pill tags at 24px radius and 16px-radius product cards.", "sha256": "54cecb3574e631696d5582c90084ebf07b35ac05e6e3e97f5df2642df844d5d6", "bytes": 25109}, + "gourmet-market": {"name": "Gourmet Market", "category": "Thai Brands", "description": "Gourmet Market (กูร์เมต์ มาร์เก็ต), a Thai online supermarket, is set entirely in Noto Sans Thai on a white canvas (#ffffff) with near-black ink (#252525), a single crimson action color (#b30838), soft grey surfaces (#f5f5f5), hairline #ebebeb borders and generously rounded pill controls (30px) and cards (16px).", "sha256": "5295080f22237f0f0b60bee2abfec60ad951b12d3fb8dc24c37048941751126d", "bytes": 12683}, + "gov-uk": {"name": "GOV.UK", "category": "Government & Nonprofit", "description": "GOV.UK, the UK government's single website, built on the GOV.UK Design System (govuk-frontend): GDS Transport at 19px/25px body and 55px/66px bold hero on a #1d70b8 brand-blue masthead, #0b0c0c text on a #ffffff body inside a #f4f8fb template, underlined #1a65a6 links, square 0px-radius green #0f7a52 buttons with a 2px #083d29 bottom shadow and a #ffdd00 yellow focus state.", "sha256": "2c1449eb8ccb3087a493218229fa565f51e186df35ec00cde35eacedb65cb635", "bytes": 23302}, + "government-pharmaceutical-organization": {"name": "Government Pharmaceutical Organization (GPO)", "category": "Thai Brands", "description": "Thai state pharmaceutical enterprise site measured at gpo.or.th: white canvas with #333333 text, a teal #00a99d top bar and pill buttons, a #f8f8f8 section band, the Iconic typeface at 20px body and 30px section headings, 7.5px card radius and soft Tailwind-style shadows.", "sha256": "9da1847a6e102accca5c80d533b9cc465a1c7d29a94a5b78a462e054accb59f6", "bytes": 9882}, + "gowabi": {"name": "GoWabi", "category": "Thai Brands", "description": "GoWabi beauty and wellness deals marketplace at gowabi.com/en: Raleway chrome with SF Pro card titles, teal #48a58e SEARCH button, mauve #885d7d secondary, red #ff3b30 discounts, white 5px-radius cards with a 9px soft shadow inside pale pink #ffeaea panels.", "sha256": "193b62495c7b2dbee171526c5c2f71ff2819cfb684b5aa0986c1b888930892a8", "bytes": 10191}, + "grab": {"name": "Grab", "category": "Logistics & Mobility", "description": "Grab's Singapore homepage on grab.com/sg: a white #ffffff canvas with slate #383e43 body text in Inter (18px/28px), heavy Inter 800 headlines (80px/88px white hero 'Grab. Making every day better.', 40px/44px #242a2e section heads), Grab green #00b14f for the full-width 80px 'Download App' band and the logo, deep green #002e27 for the secondary band, a #001e1f pill tab (56px radius, 12px 32px), green #00804a text links, 4px-radius cards and a #eaeff2 sitemap over a #363a45 legal bar.", "sha256": "e6102ec3a3c698030f33ed0126c383846067961306700cfb249506c230e9c95f", "bytes": 20544}, + "gradient": {"name": "Gradient", "category": "Morphism & Effects", "description": "Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.", "sha256": "7af0a637064eb9b0bd4244e93792adc1948e79cd4939c0dd36610298ce496c54", "bytes": 3051}, + "grafana": {"name": "Grafana Labs", "category": "Design Systems", "description": "Grafana Labs' homepage sets Poppins 600 display headlines (60px, -1.5px tracking) over Inter UI text on a cool grey canvas (#f4f4f6), with a single saturated blue primary (#1b55f5) on 8px-radius buttons, pastel tinted feature cards with 24px corners, and dark product screenshots as the main imagery.", "sha256": "3cb8562dc2d9db481215dde95d1c6c96fdc994f261aa7b5399f4825506c08f18", "bytes": 12632}, + "graff": {"name": "Graff", "category": "Luxury", "description": "Graff luxury jewellery home page measured live: white and #f8f8f9 surfaces, black ink, bronze-gold #897358 primary button, ChronicleDisplay serif at 50px with 2.1px tracking and OptimaNovaLTPro sans at 17px, square 0px corners and almost no shadow.", "sha256": "9329961c573ea8bb526c864b63f0aa26e8fd87fcb098a05220283f27ff9583b0", "bytes": 10251}, + "grammarly": {"name": "Grammarly", "category": "Productivity & SaaS", "description": "Grammarly's marketing home: white #ffffff canvas, Grammarly green #027e6f Sign up buttons and full-width bands (#014c43 on hover), #1f243c navy-ink copy, Matter 670 headlines at 42px with -0.42px tracking over Glyph 14px/21px body, 6px button corners, 8px #ebebeb-bordered feature cards.", "sha256": "5bb10852946d5ff22c3d3a622f86c9f7c8ddb722fbdcc55d6ae231467781480d", "bytes": 12754}, + "grandlinux-solution-co-ltd": {"name": "Grandlinux Solution Co., Ltd (Saeree ERP)", "category": "Thai Brands", "description": "Grand Linux Solution Co., Ltd English home page (Saeree ERP and Claude AI services): Bai Jamjuree throughout at 16.5px body and 34px display, #0f5dd0 blue contact block, #fe6b35 orange calls to action, #f7f9fc light surfaces and 10px as its most frequent radius and a soft card shadow.", "sha256": "73c361d94957f7cee9ee6593f30d692bf073b37a3f5e3fc71204f119a10ebb96", "bytes": 11471}, + "granmonte": {"name": "GranMonte", "category": "Thai Brands", "description": "GranMonte, a Khao Yai winery site: a full-bleed vineyard photograph, centred white RoxboroughCF serif lettering, a mauve (#7f6d83) button, blush (#ddc9be) paper panels, and OpenSans 14px body text in near-black #212121.", "sha256": "e2dae6feed4fe76dfaef13580d1f5c72a9d093ab44379345afd72ce07be6f9c6", "bytes": 10494}, + "graphite": {"name": "Graphite", "category": "Developer Tools & IDEs", "description": "Graphite's home page is near-black #0a0a0a with a #171717 announcement bar, matterFont 500 headlines (60px/60px at -1.5px) in #fafafa, matterFont 16px/24px body in #a1a1a1, light-grey #e5e5e5 'Get started for free' buttons with #171717 text and 8px radius beside #262626 bordered secondaries, and 8px-radius case-study cards on #7777774d hairlines.", "sha256": "d67b895d24da392d4b7f7b5e31ab01db8c4bc400ee44e62542cfee21429f34d7", "bytes": 15432}, + "graza": {"name": "Graza", "category": "Food & Beverage", "description": "Graza's Shopify storefront: a peachy #f6e6d9 canvas, olive #3c422e ink, a chartreuse #d1e030 pill CTA with a 1px olive outline and a 6px checker-dot 'shadow' offset 4px that the face slides onto on hover, cream #fff4ec cards with 20px corners, ITC Garamond Condensed 72-120px display set tight (-2.16px), and GT Alpina Typewriter 16/24 for everything else.", "sha256": "e59645266593c9f1d47a0d936363c5f64f5bf5c6aef9af7d5f7044c47713835c", "bytes": 24593}, + "greenpeace": {"name": "Greenpeace International", "category": "Government & Nonprofit", "description": "Greenpeace International (greenpeace.org/international) is a Planet 4 WordPress site: white #ffffff and beige #f6f4ef bands, #1c1c1c ink, GreenpeaceSans headlines at 40px regular, Source Serif Pro body copy, action-yellow #ffe100 4px-radius buttons, a green #80d643 Donate button and a dark-green #1f4912 footer.", "sha256": "a33f18a050a8045e8ed8184da362ba6177fe0d64489c6c24bc8e673baf735a1b", "bytes": 13957}, + "griflan-2": {"name": "Griflan", "category": "Portfolio", "description": "Griflan brand studio home page measured live: warm near-black #181616 canvas, cream #fffddb text, a single red #ff3831 button with 3.56px radius, a tall condensed serif at 67.5556px for headlines and a small sans for navigation, all sized by a fluid viewport unit.", "sha256": "8273c8d3660a73e82486559a7b388b6eb3e004c5684d90f95bbbd8de19e638ac", "bytes": 9754}, + "grommet": {"name": "Grommet", "category": "Frontend Frameworks", "description": "Grommet is a React component library whose own site uses the system UI font stack at 18px, #444444 ink on white and #ededed bands, a #7d4cdb brand-purple primary on 18px-radius pill buttons, accents #6fffb0 and #81fced, 600-weight lowercase headlines up to 82px, and a base theme defined by a 24px spacing unit.", "sha256": "f477cc58e592232688bf4997c0186539d851a5a67641d2fa28cc7d0177ae192c", "bytes": 20314}, + "groq": {"name": "Groq", "category": "AI & LLM Platforms", "description": "Groq's home page for its fast-inference neocloud: a warm paper #f3f3ee canvas, espresso #302b28 ink, Groq orange #f43e01 for the logo, links and a 1000px-radius outline pill, esBuild 50.498px/-1.51px statement text, komuna 16.002px uppercase mono-style labels with 1.28px tracking, and a 119.69px uppercase footer slogan.", "sha256": "de0098ac4f17d70f850b5d90e16df780dc184fc003ec417efa62762bb77ca2b0", "bytes": 12197}, + "gsb": {"name": "Government Savings Bank (GSB)", "category": "Thai Brands", "description": "Government Savings Bank of Thailand English home page measured live: magenta #ec008c brand color on #f5f5f5 and white surfaces, DB Heavent type at 21px body and 32px titles, 30px-radius pill buttons with a #ed017f hover and a full-width magenta footer.", "sha256": "427bb2e25cdf507470a3682654d3937d85c4fa93ba47daf4b41a43e180bdbe3c", "bytes": 10142}, + "gsk": {"name": "GSK", "category": "Pharma", "description": "GSK UK home page measured live: GSK orange #f36633 buttons with 8px radius on white and warm grey #ece8e7, soft-black #151515 text in the proprietary GSK light and regular faces at 22px, and 16px-radius white cards carrying very large orange statistics.", "sha256": "3c359d9a2e1701bebfe36e5491b1831fec58dae030510b3aea0977621cb4a41e", "bytes": 10324}, + "gucci": {"name": "Gucci", "category": "Luxury", "description": "Gucci's US home page: pure white #ffffff and black #000000 only, editorial full-bleed photography, a single typeface (Gucci Sans Pro) with negative tracking — 32px weight-100 statements, 16px/700 uppercase section titles at -0.48px, 12px/500 navigation at -0.36px — square corners, a 72px white header and a black footer.", "sha256": "326b097275e1a1dcea8cd007757756c11d78027a6c469dae01c5f054bb452b7a", "bytes": 11599}, + "guggenheim": {"name": "Guggenheim", "category": "Culture & Events", "description": "The Guggenheim Museums and Foundation (guggenheim.org): white #ffffff pages and a #171717 near-black footer, all text in the proprietary Guggenheim Sans (400 and 700) with slight positive tracking, #393939 20px body copy, 2px-outlined square buttons and 0px corners on every element.", "sha256": "e1c619545ad7699779d00caa2a1122e625780d0c2ab41d3b077a440ed780f992", "bytes": 10200}, + "guinness": {"name": "Guinness", "category": "Food & Beverage", "description": "Guinness's global site guinness.com/en measured live — a near-black #0a0406 stout-dark page with white #ffffff and cream #f1e4d7 text, harp gold #b9965b for the square SIGN UP button and Find Out More links, a white footer with #171717 text, tall condensed Knockout 50 headlines (88px with +5.632px tracking) over Gotham body copy at 16px/24px, and 0px corners.", "sha256": "df520291f3f4afa6f49199d2e1ca9470c5fa6e20fc8b2d2d0121bd2d14e849ab", "bytes": 12345}, + "gulf": {"name": "Gulf Development", "category": "Thai Brands", "description": "Gulf Development Public Company Limited homepage (gulf.co.th/en/home): Poppins at 16px body and 57px light-weight hero headlines, deep navy #004370 with footer navy #003050, a leaf green #6ab96f for stat figures, #f5f7fa panels, pill-shaped 40px language chip and curved section edges over full-bleed photography.", "sha256": "80640cb065c4078968619d60fe984db2dc4bd5fecea250ba8e3d4e1d907eb8c4", "bytes": 10138}, + "gumroad": {"name": "Gumroad", "category": "Product & SaaS", "description": "Gumroad's homepage sets ABC Favorit at regular weight on an off-white #f4f4f0 canvas, with black #000000 square and 4px buttons that flip to pink #ff90e8 on hover, white 24px-rounded cards with thin borders, and flat cartoon illustrations in pink, orange #ffc900, teal #23a094 and yellow.", "sha256": "bf400314ef3749f1e73cad1a430960075df3b824a76c55eeb14df9dfa8c5330f", "bytes": 16017}, + "gunkul": {"name": "Gunkul Engineering", "category": "Thai Brands", "description": "Gunkul Engineering Public Company Limited English homepage (gunkul.com/en/home): DB Airy typeface with 63.7683px bold uppercase hero headlines, deep ink #041d2c on white, navy #1e2864 footer, blue #1a5ed4 for circular arrow buttons, 20px-radius outlined news cards and 5px-radius ghost buttons.", "sha256": "0c9c2d0da0dd5acefe2fa4f43b73885aaeff286278a6ecc5497b53f44e8d5469", "bytes": 9543}, + "guri-technologies": {"name": "Guri Technologies", "category": "Thai Brands", "description": "Guri Technologies (Thailand) agency site - warm paper (#fafaf7, #f0f0eb) and near-black (#0e0e10) with a #a8351a brick-red primary button and #f26b3d orange accent, Space Grotesk 72px display, Inter Tight body and JetBrains Mono labels, 4px radius.", "sha256": "b092f0aae044b0eba9d91128e11b54706df81e6245eb08e81610d9671f4ff76f", "bytes": 12439}, + "gusto": {"name": "Gusto", "category": "Product & SaaS", "description": "Gusto's marketing site: a warm off-white #fdfdfb page, oversized Boogy Brut serif headlines (100.388px hero, -2.5% tracking) over Matter sans body text in #56514e, deep teal #0f6469 CTAs with 14px corners, #03393d and #00535c teal panels, and 8px-radius cards with lively photography.", "sha256": "cff7d81f690b72e0c173219da5f23f58c547995fc4ae89a2a2125449849884cf", "bytes": 17426}, + "gwm-thailand-great-wall-motors": {"name": "GWM Thailand (Great Wall Motors)", "category": "Thai Brands", "description": "GWM Thailand English home page measured live: black #000000 buttons with 3px radius and red #d7000f arrow accents on white and #f2f2f7, GWMSans from 900-weight 56px headlines to 14px specification text, and 16px-radius cards.", "sha256": "c4a9e4a22b08f8c7c3aa868e88b799a9b8ea54ccd7d81330d1da59a563fb9ad7", "bytes": 9678}, + "gympass": {"name": "Gympass (Wellhub)", "category": "Design Systems", "description": "Wellhub (Gympass) marketing is warm and consumer-friendly: cream bands #f6eddf and #fbf8ec, near-black ink #1d1d1f, a raspberry #d8385e pill button (9999px radius, 48px tall), NaN Holo Condensed display at 64px for headlines, Inter 500 body, and lifestyle photography.", "sha256": "54bf6daee7ccad24923ebee6edaca99f93776b102b6d0216550934b63f6c26e8", "bytes": 12167}, + "gymshark": {"name": "Gymshark", "category": "Sports & Fitness", "description": "Gymshark's storefront — a monochrome commerce system on white #ffffff with near-black #0d1012 ink and square-cornered (0px) buttons, SN Skandia 14px/19.6px for all UI text, Plaak Gymshark 800 uppercase display (45.6px hero, 30.8px product title), #dee0e3 product-image wells, #767a7f secondary text and #dc0428 for sale, built on the site's own FDS token set.", "sha256": "ba6a4ea099453bb50e48421720c871aa07465e92527606340e3e55c0b329ac02", "bytes": 18985}, + "handm": {"name": "H&M", "category": "Fashion & Apparel", "description": "H&M's US home page is a white #ffffff, square-cornered (0px radius everywhere) fashion grid: full-bleed photography with uppercase HM Slussen headlines (36px/30.6px) reversed out in white, black #000000 text, #666666 inactive nav links, a #eb0010 red logo and promo line, #cccccc hairlines, and 'SHOP NOW →' white bars under every image.", "sha256": "303dfe2053c60b5b23af78572bd453d03be1b40cf464b8f4f1880d46137c504f", "bytes": 11271}, + "haoqi-design": {"name": "HAOQI.DESIGN", "category": "Portfolio", "description": "Portfolio of designer-engineer Haoqi Wen measured live: warm #fbfaf4 canvas with black #000000 type in tiktok and mono families, a 53.76px statement style, uppercase 16px bold navigation, no UI radius or shadow, and all color supplied by glossy stickers and 3D lettering.", "sha256": "23cedb6a0215b853cee63b7923aef8261a43606221b3d1e8cba172d357e6a418", "bytes": 9027}, + "haribo": {"name": "HARIBO", "category": "Food & Beverage", "description": "HARIBO international home page measured live: flat brand red #d8232a, blue #005ca9 and green #78be21 on white, VAG Rounded at 53px bold display and 17.3px light body, pill navigation and 26px-radius controls with blob-shaped photography.", "sha256": "ebc968f93027a9ff7c414ea1c33736bc72261cf52c99036c6d339e3e7b0d6956", "bytes": 9686}, + "harley-davidson": {"name": "Harley-Davidson", "category": "Automotive", "description": "Harley-Davidson USA home page measured live: black and white bands with Harley orange #fa6600 promo strip and buttons, Franklin Gothic ATF in uppercase bold at 48px display and 16px body, 4px corners and #f6f6f6 product tiles.", "sha256": "6d663b4dcfeddfc105af3fe397b4e5a880853518470f01e8f1d23db9cc6786d1", "bytes": 9979}, + "harpers-bazaar-thailand": {"name": "Harper's Bazaar Thailand", "category": "Thai Brands", "description": "Thai edition of Harper's Bazaar (harpersbazaar.co.th, published by Digizen Media): a white-canvas fashion magazine site in a Newspaper-theme WordPress build, with Anuphan and Noto Sans Thai for headlines and copy, #111111 headline ink, #767676 body ink, a 0px radius everywhere and full-bleed black feature heroes.", "sha256": "7887f9d3e6a1d65c7e370883f1af97384d954b1f38f23e10106fdb6c1ac60b8c", "bytes": 11648}, + "harrys": {"name": "Harry's", "category": "Beauty & Personal Care", "description": "Harry's runs a Shopify Hydrogen storefront built with Tailwind tokens: a light grey #f7f7f7 canvas, navy #001d48 text in TTCommonsProVariable (28px/600 headings with 0.9px tracking, 16px/23.68px body with 0.5px tracking), Harry's orange #d44316 primary buttons (hover #be3d15) and royal blue #0626a9 secondary buttons with 4px corners and 2px-tracked uppercase labels, white 8px-radius product cards, pale-blue #eef6fb pill badges and a #ededed footer.", "sha256": "996c5d36b4f6b94af750197a45ad1cae6b41aca83bb53990a2a19e4f27772b40", "bytes": 26292}, + "harvard-university": {"name": "Harvard University", "category": "Education", "description": "harvard.edu, the home page of Harvard University: a light grey #f3f4f4 canvas with #1e1e1e ink, Canela Deck Web serif headlines (54.4px hero, 31.68px card titles) over GT America Standard at 18px/27px, white cards with 8px corners, circular arrow links, full-bleed research photography and a near-black #0e0e0e footer.", "sha256": "db305141f14f9b9c74b4510af242a7cd1550d20706fe5dca209702585f445881", "bytes": 10730}, + "hashicorp": {"name": "HashiCorp", "category": "Backend, Database & DevOps", "description": "HashiCorp's marketing site: a near-black #0d0e12 canvas with cool grey #b2b6bd body copy, HashiCorp Sans (600) display headlines at 82px, system-ui for UI text, a single electric-blue #1060ff action color, and 5px-radius buttons over iridescent purple-blue glass imagery.", "sha256": "7640eca0ca28b14b608707c726d77ba1a8d554915ceb4e01364ca865da557353", "bytes": 18320}, + "hashnode": {"name": "Hashnode", "category": "Developer Tools & IDEs", "description": "Hashnode's dark home feed uses a #080a0e graphite page with a #15171c sidebar, #e6e8eb headings in Geist 700 (48px/-1.2px hero), Inter 14px/20px body in #9fa1a5, a near-white #e4e5e8 'Get started' button with 6px radius, and 12px-radius #23262c cards — monochrome ink as the brand's primary.", "sha256": "38646831f1d9538a56ee91826016c36dcd34dfddad0a084bb952686b23d4323b", "bytes": 13244}, + "hasselblad": {"name": "Hasselblad", "category": "Consumer Electronics", "description": "hasselblad.com, the Swedish camera maker's site: a pure #000000 canvas with white and 65% white (#ffffffa6) text, widely tracked uppercase Tw Cen headlines (34px/2px, 22px) and Outfit 14px copy, 1px white outlined 0px-radius buttons that invert to white on hover, and an orange #d95e00 nav hover.", "sha256": "ccdc653e6c946575beaa80fb0df650bd082d2640307671e03f522a5cf7fb45c0", "bytes": 10806}, + "haus": {"name": "haus", "category": "Design Systems", "description": "haus, the hipuku portfolio's token-first, light-mode React design system documented in a Storybook: Manrope throughout (30px bold display with -0.9px tracking, 14px body on 24px lines), a dusty-plum brand action #7653ab with white labels on 8px-radius controls, near-black ink #2e3338, cool-cream surfaces #f6f9fc and #f5f4f9, and 12px-radius cards, with every value routed through four CSS layers.", "sha256": "a61dc44fad4fdb2acbaa6533f6a7f80d1b82434630bca40c0672cfbc6dd594b6", "bytes": 15091}, + "hay": {"name": "HAY", "category": "Home & Furniture", "description": "HAY's brand site (hay.com) is a gallery-quiet editorial system on a flat #f2f2f2 grey canvas with #0a0a0a / #000000 ink: ITCNewBaskervilleRoman 20px/28px uppercase serif captions tracked 1.1px under square-cornered photographs, NeueHelvetica55Roman 12px uppercase navigation tracked 2px, a centred 100x35 HAY wordmark, 2px black underline bars for the current section, 56px-radius circular social icons, and no buttons, shadows or accent colour beyond a #d1dee7 newsletter tab.", "sha256": "25f0d6d04789defff342351be5c3726bc3c18e85a3e95617b6e4d5759fab243c", "bytes": 18841}, + "headlessui": {"name": "Headless UI", "category": "Headless UI", "description": "Headless UI by Tailwind Labs: a pure-black #000000 docs site in Inter var (48px/600 headline, -1.2px tracking) with 12px uppercase monospace labels, white text at 50% and 40% alpha, 5-13% white-alpha card fills, hairline grids, and 16px to 40px rounded panels around dark component previews.", "sha256": "85b23cb9f3d032ce2fff27424a7e37b0346dd53ebe9f8980f55c92461589ceaa", "bytes": 18424}, + "headspace": {"name": "Headspace", "category": "Healthcare & Wellness", "description": "Headspace's mental-health marketing system — a single custom sans, \"Headspace Apercu\", at 400/500/700 with tight negative tracking (-1.2px at 40px, -2.16px at 72px) in warm charcoal #2d2c2b on white #ffffff and cream #f9f4f2, a bright blue #0061ef pill CTA (32px radius, 2px drop-shadow, hover #0040ea), charcoal #2d2c2b secondary pills, and full-bleed sunshine #ffce00, sky #00a4ff and blue bands with round smiling character illustrations.", "sha256": "1f784c7d1012a6f265e9a12ccfa9aa7bd3e88b5df2274ef1cf99f88e56547976", "bytes": 27380}, + "heidelberg-ccus": {"name": "Heidelberg Materials CCUS Experience", "category": "Tech & AI", "description": "ccus.heidelbergmaterials.com, Heidelberg Materials' interactive CCUS (carbon capture, utilisation and storage) experience: a white rounded-corner card over a deep green particle scene, LexendHM at 14px (700 headings, 400 body) in dark green #004e2b, sandy-grey #e6e6df pill button with an electric green #00dd39 arrow, and 100px radii.", "sha256": "e5e43ed9d20bce3d16683b2ba157c3eced7c7405b97f116440fbbd895b6addba", "bytes": 10033}, + "heimdall-power": {"name": "Heimdall Power", "category": "Tech & AI", "description": "heimdallpower.com, the Norwegian grid-technology company's site (title \"Heimdall Power | The Power of Knowing\"): a #d9d9d9 grey canvas with #111113 near-black ink, signal-orange #ff5c39 CTAs, NimbusSanL bold headlines (71.111px hero, 42.6666px section), Geist mono dateline tags and rounded 7.11px black-and-orange arrow buttons.", "sha256": "a22b24314f9c05e0815e30313cd1eec93a31fa0481ab986f1ae52c2f76005186", "bytes": 12312}, + "heinz": {"name": "Heinz", "category": "Food & Beverage", "description": "heinz.com (Heinz US official site): a saturated tomato-red #d6001c canvas with white text, HeinzLabel1 condensed display at 96px and HeinzSans body at 16px, maroon #540b26 pill buttons with 9999px radius, cream #fef1dd card text, 24px-radius product cards and photography framed by the keystone label shape.", "sha256": "181e4bd926fda62eaeb6c1763462a3c89d9e03e132d6e7656ea902a6528cb0c0", "bytes": 11494}, + "hello-monday": {"name": "Hello Monday", "category": "Agencies & Studios", "description": "Hello Monday (Hello Monday/DEPT®) presents its studio site as a quiet editorial page: white #ffffff canvas, #000000 text, Clarendon BT Light (ClarendonBTWXX-Light) display at 80px/300 over NB International Pro body at 14px, a warm off-white #f8f6f5 footer, a #191919 feature panel, translucent #0000004d rules and 0px corners everywhere.", "sha256": "90116c5e84378940bd32baea9ea4232ae4704dcac331cdc5d072237051b83617", "bytes": 12551}, + "hellokhunmor": {"name": "Hello Khunmor", "category": "Thai Brands", "description": "Hello Khunmor, a Thai medically reviewed health-information site: white #ffffff canvas with #fafafa panels, #404040 body ink, blue #2d87f3 pill action buttons, Noto Sans Thai at 20px/600 section titles and 13px body, pastel sky #e3f2ff feature bands, navy #1b3250 footer and 8px to 24px rounded cards.", "sha256": "02b44e44f77667765d3ce4afc861f48fdb783d03fe4ee036c1961374b347e0af", "bytes": 11743}, + "helsinki": {"name": "City of Helsinki", "category": "Design Systems", "description": "The City of Helsinki homepage (hel.fi) uses HelsinkiGrotesk at weights 400 to 500, a white #ffffff canvas with #1a1a1a ink, square black buttons, a #c2a251 gold hero band with a wave edge and a 64px display headline at -1.2px tracking, plus #f2f2f2 service panels and a pale blue #e8f3fc news box.", "sha256": "e13d9204f92be5265140403c25a3e98411423795020f19bf6433c37675f2e243", "bytes": 11229}, + "heng-leasing": {"name": "Heng Leasing and Capital", "category": "Thai Brands", "description": "Heng Leasing and Capital (hengleasing.com), a Thai vehicle-loan company on WordPress: brand green #016938 header and headings, red #b20000 call-to-action buttons, white canvas, Prompt at 400 and 16px body, 30px display heading, square 0px buttons.", "sha256": "347e5836c4c14a2bae122219e59868308ee82aaecb48b3273c42940afb67a071", "bytes": 10956}, + "heptabase": {"name": "Heptabase", "category": "Productivity & SaaS", "description": "Heptabase (heptabase.com): a quiet eggshell-white landing page for a visual knowledge base. Instrument Sans 500 headlines at 48px/62.4px with -1.584px tracking, Inter 16px/24px body in #2e2e2e, a #2e2e2e charcoal 10px-radius Start your 7-day trial button, 6px-radius cards with rgba(0,0,0,.08) hairlines, and large pastel-sky product screenshots.", "sha256": "f769e165023b645a257f104a14f0f8bcf89dcb98d45c78bfc31951c3cb19cea5", "bytes": 14834}, + "herman-miller": {"name": "Herman Miller", "category": "Home & Furniture", "description": "Herman Miller's site (hermanmiller.com) is a bright, photo-led corporate system set entirely in FF Meta (served as 'Meta' at 400/500/700) with slight negative tracking: #252525 ink on #ffffff, a #ebebeb footer, the #e62b00 red circle-M logo as the only brand colour, 40px/52px bold white headlines over full-bleed photography, white 5px-radius 'Discover Now' buttons with a 4px white border that turn #ebebeb on hover, and a 1px #cccccc 5px-radius search field.", "sha256": "3547a635e81df190b7b0d50d5fd6300241a190485d3f4864e8a31f9d769bd27b", "bytes": 16940}, + "hermes": {"name": "Hermès", "category": "Luxury", "description": "Hermès' US online store (hermes.com/us/en) is a quiet cream-paper system: #fcf7f1 canvas with #fffcf7 media wells and a white footer, pure #000000 ink, three free typefaces in strict roles — EBGaramond italic for editorial (34px/440 titles, 20px paragraphs), Overpass Mono uppercase for labels and buttons (12px/300 category labels, 12px/500 buttons), Manrope for UI (12px/400, 10px/700 tracked nav) — 0px photo corners and a single 4px-radius outlined black button.", "sha256": "114a83ac965590dc9150a4b227103be51f0250c4df32cbd62c23448490593740", "bytes": 18901}, + "heroku": {"name": "Heroku", "category": "Design Systems", "description": "Heroku's marketing site pairs a deep-purple gradient hero (Purple 15 #300b60 to Purple 30 #5a1ba9) with white content bands, Avant Garde 600 headlines (40px/48px), Salesforce Sans body at 16px, Salesforce Blue (#0176d3) buttons with a 4px radius, and flat line-art icons.", "sha256": "5e338790891f0bb1d318d8c3ec59ad17fa69504cb66a63322841c5dfd53bff6b", "bytes": 11865}, + "heroui": {"name": "HeroUI", "category": "Frontend Frameworks", "description": "HeroUI (formerly NextUI) v3 marketing site: a light #f5f5f5 canvas with white #ffffff surfaces, Inter 700 headlines at 48px with -1.2px tracking, a single azure #0485f7 accent on fully rounded 24px buttons, 12px fields and 24px cards on faint layered shadows.", "sha256": "fa00520024d5a9caa86c3333ee45ee449a6975777e9cd00c72f432cd92ab403f", "bytes": 20332}, + "hersheys": {"name": "Hersheyland", "category": "Food & Beverage", "description": "hersheyland.com (Hersheyland, the Hershey Company's recipes, products and inspiration site, reached from hersheys.com): chocolate-brown #3f000b ink on #f6f6f6 and white, Gazpacho 900 headlines (48px hero) with TT Norms Pro body at 17px, #007bbd pill buttons with 35 to 50px radii, 8px-radius cards with navy #003594 bottom bars and plum #460e3d hero bands.", "sha256": "6e317c5581f88739c346e3e3d3be8156d7e19d2255e060a29653a4b9e5dea822", "bytes": 11251}, + "hgc-global-communications-thailand": {"name": "HGC International Business", "category": "Thai Brands", "description": "hgc-intl.com, HGC International Business (the parent group's international telecom and ICT site that the Thailand entry points to): white canvas with #212529 ink, signal-red #e02926 square buttons and panels, Montserrat 700 headlines (50px hero, 40px section) over Nunito 12px copy, and a 0px radius on every element.", "sha256": "66737c2e086f1fb36a05e75d34b565b52a6aa22c1a636206cc59b91e4624e0a6", "bytes": 10427}, + "hhhusher": {"name": "HHHusher", "category": "Retail & E-commerce", "description": "hhhusher.com, product site for HHHusher, a hi-hat sound enclosure for drum recording: #212121 near-black pages with #f3f1e0 cream text, a tan #ad9069 section field, a single #ffcc00 yellow BUY and feature card, UniversalSans Display at weight 100 (60.4444px) with Aeonik Fono uppercase 10.6667px labels and 4.44px to 5px radii.", "sha256": "e09fceea81d02bfe89f6210f44c84e73619d12845c396d18b5f5fb877cb77f48", "bytes": 11682}, + "hilden-kaira": {"name": "Hildén & Kaira", "category": "Product & SaaS", "description": "hildenkaira.fi, the Finnish-domain social media agency Hildén & Kaira: a #181818 black and #eae9e6 off-white page with lime #ecfdad accents, PP Editorial New serif headlines (55.8545px hero, tight -1.11709px tracking) over PP Neue Montreal 9.30909px copy, chrome 3D-rendered logo and icons, and 9.30909px rounded lime and black buttons.", "sha256": "29b9b572edd9cc3b3113268d8574d1ecb04bf275b292df9ac1a927c9ff8a4c83", "bytes": 10677}, + "hino-motors-sales-thailand": {"name": "Hino Motors Sales Thailand", "category": "Thai Brands", "description": "hinothailand.com, the Thai site of Hino Motors Sales (Thailand) Co., Ltd.: a white canvas of full-bleed truck photography in Poppins and Prompt (14px weight 300 labels, 27px bold uppercase headings), #727272 grey copy, signal-red #ed1c24 buttons and nav hover, 4px-radius controls with one 70px pill, and a dealer-search card.", "sha256": "bc368b62460e8eb15b9ab300e474c823297adc380ab7acc2da96e9de396ad0a8", "bytes": 10959}, + "hobro-digital": {"name": "HOBRO", "category": "Agencies & Studios", "description": "hobro.digital, the site of HOBRO, a design-first full-cycle digital agency: alternating #ffffff and #000000 bands, PPNeueMontreal text at 18px, AkkuratMono uppercase 14px labels, giant Kamerik205 and FreigBigProLigIta italic display (193.333px), pill buttons with a 33px radius, and a mint #00fb96 brand variable used for the cursor dot.", "sha256": "d5307bc628024758b9c68f79d328377e43055cbd678c27cdf3cee3a4448b667c", "bytes": 11408}, + "homepro": {"name": "HomePro", "category": "Thai Brands", "description": "HomePro (โฮมโปร) Thai home-improvement retail site measured live: Prompt typeface throughout, brand blue #0065b2 header, footer and CTAs with white text, #112332 body ink, #da3731 sale red, 10px button radius, 44px buttons, 48px search input, dense promo-tile grid on a white canvas.", "sha256": "1d8033698f3233031b1cc8adc6708c3d24065c4bd671867d671cf75a52fd3452", "bytes": 10929}, + "homerun": {"name": "HOMERUN Creative Things", "category": "Agencies & Studios", "description": "HOMERUN Creative Things (homerun.today), formerly ROSBEEF!, is a creative agency site measured live: near-black #181817 hero with cream #f8f7ec ink, oversized lilac #edd4f8 wordmark, orange #e56138, green #2d5a36 and sky #cdf0ff blocks, Space Grotesk headings, Figtree body, pill-shaped controls.", "sha256": "99c879c8c4cbca3bd41b7aa117cfa0ffcfa0a7a60f691c879097ea310ab73b1e", "bytes": 9664}, + "honda": {"name": "Honda Global Corporate Website", "category": "Automotive", "description": "Honda Motor Co.'s global corporate site global.honda/en measured live — white #ffffff and #f6f6f6 bands, charcoal #35363b text and outlined CTAs, black #000000 hero and legal strip, #cc0000 Honda red in the CSS, the custom HondaGlobalFontEN Regular/Light at weight 400 (32px tracked section titles, 16px body) and square 0px corners everywhere.", "sha256": "f3db3ef20e956325d967966197e7fd86fd191ce9d50a9542a331804c4be40e4c", "bytes": 12855}, + "honda-automobile-thailand": {"name": "Honda Automobile Thailand", "category": "Thai Brands", "description": "Honda Automobile Thailand (honda.co.th/en) measured live: dbHeaventFont throughout, Honda red #cc0100 GET DEAL button with square corners, #303030 headings on a #f0f0f0 and white canvas, #373f4e slate footer, 42.6667px display text, outlined Discover More buttons and photographic car heroes.", "sha256": "02533ec4664e2b070c375a3f1b67abaafa0779a17cd1c392541626ab5dfe6ad4", "bytes": 9947}, + "honda-motorcycle-thailand": {"name": "Honda Motorcycle Thailand", "category": "Thai Brands", "description": "Honda Motorcycle Thailand (Thai Honda, thaihonda.co.th/honda) measured live: ap_honda custom Thai typeface, Honda red #ec1b2e and #ed1a29 on white and #f2f2f2, #222222 ink, 40px bold section headings, 3px-radius red register button, red FIND DEALER side tab and motorcycle product carousels.", "sha256": "cbce3446173d5d288292053b420984e73d4974dace7010d174f8941ab7dbe795", "bytes": 10501}, + "hootsuite": {"name": "Hootsuite", "category": "Product & SaaS", "description": "Hootsuite's social-media-management site: Montserrat throughout (35.84px/600 hero, 36px/700 section heads, 16px/500 body), Nocturn #012b3a ink on white and #f2f4f5 bands, hyperlink-blue #1f60c9 buttons with 4.736px and 8px corners, Saffron #e03035 accents and soft navy-tinted shadows.", "sha256": "1db15e6d047e2171b5481aa86445ffa923fc8a66423100dc0df2c40773c96e48", "bytes": 13129}, + "hopper": {"name": "Hopper", "category": "Travel & Hospitality", "description": "Hopper's consumer travel-booking site is a white (#ffffff) canvas set in Proxima Nova, a full-bleed destination photograph with a pill search bar, a single saturated blue (#1878ec) for action and links, near-black (#111111) headlines, grey (#606060) body copy, and shapes stepping from 4px through 12px and 32px to full pills.", "sha256": "ca576c058d9b10f53c9f90feb4ae500fdb5dec51a6bf02b4f3a5fc7ad3ce770e", "bytes": 17654}, + "hotjar": {"name": "Contentsquare", "category": "Product & SaaS", "description": "Contentsquare's Hotjar landing page (where hotjar.com now redirects): white #ffffff and sage-white #f7f8f6 bands, near-black #0d0d0d ink, raspberry #cd3246 'Sign up free' buttons, wine #7c0033 and deep plum #440220 brand tones, NewEdgeRounded 48px/400 headlines over Inter 16px body, 8px cards.", "sha256": "73a5162ece08ab6d866a29790662fff0a7b590d04a66177c541022f7f5ed2e30", "bytes": 11793}, + "house-of-corto": {"name": "House of Corto", "category": "Retail & E-commerce", "description": "House of Corto (houseofcorto.com), furniture by Jessica Mille, measured live: warm #f2efe7 canvas, forest green #2b3e0d ink, olive #63692b, lilac #c7b1da menu, canada-type-gibson 900 uppercase micro-labels at 9.6px, square corners and a borderless photo grid of chairs and tables.", "sha256": "76651d278cb666552f1fc645ed938861ab6cd45a8b3d306096ae9ed369879d86", "bytes": 8899}, + "house-of-honey-1": {"name": "House of Honey", "category": "Architecture & Interiors", "description": "House of Honey (houseofhoney.com), a female-led interior design studio in South Pasadena, measured live: peach #edccbe and deep brown #331917 sections, hot pink #fc72c4 script wordmark, noeText serif uppercase display, neueHaasGrotesk body, square corners and a 32px Get in Touch button.", "sha256": "5f551dfb5750962f1ec92c322486536d248cc320a3f93dafca99e2649351df31", "bytes": 10769}, + "hp": {"name": "HP", "category": "Consumer Electronics", "description": "HP (hp.com/us-en) measured live: forma-djr-micro typeface, electric blue #024ad8 Shop buttons with 8px radius and white text, #1a1a1a ink, white and #f5f5f5 surfaces, 56px display headings at weight 500, 16px card radius and product-photography tiles under an hpi- token system.", "sha256": "e1996dc143a93f7e87b97b4eec97e2495ee464bdb8000fec6a67f1bcaded1521", "bytes": 10262}, + "hsbc": {"name": "HSBC Group", "category": "Banking & Insurance", "description": "HSBC Group corporate website (hsbc.com) measured live: UniversNext typeface in light 200 at 65px for hero display, black #000000 ink on white and #f5f6f7 surfaces, HSBC red #da0011 accents, 3px-radius outlined white hero button over photography, and white content cards in an offset two-column grid.", "sha256": "2f274042e0e20370ad241f038109c32f061c5232acb6c34e796f0f0c06d989d5", "bytes": 9548}, + "hsbc-thailand": {"name": "HSBC Thailand", "category": "Thai Brands", "description": "HSBC Thailand homepage: square-cornered, white-canvas corporate banking site in the licensed univers-hsbc face (weights 100 to 700), 60px weight-100 display headline, #333333 ink, HSBC red #db0011 on a 41px Log on button, light grey #ededed notice panels and hairline #d7d8d6.", "sha256": "444e810408354d40a0244428b3d7c2d10cd5637b00ba3c5ef7b2db9f80167a89", "bytes": 9119}, + "huawei": {"name": "Huawei", "category": "Telecom", "description": "Huawei corporate site (huawei.com/en) measured live: HuaweiSans Regular and Bold, Huawei red #c7000b for links, underline accents and chevrons, #191919 ink on white and #f3f3f3 surfaces, 16px-radius white cards, 6px 48px search input, built on an hwp- design token system with red 60 brand colour.", "sha256": "9714a0910cd623c4f1273931ab54ef30f6990371bc9ec9d6802960eeabb11312", "bytes": 10685}, + "hubspot": {"name": "HubSpot", "category": "Product & SaaS", "description": "HubSpot home page (hubspot.com) measured live: HubSpot Serif light 65px display headlines, HubSpot Sans body, orange #ff4800 filled and outlined 8px-radius buttons (68px tall), #1f1f1f ink on white and #fcfcfa, peach #fcded2 and dark teal #061c1d sections, 16px-radius hub cards under the cl- Canvas-style token system.", "sha256": "b0f7a9db69f68fc42c53b3197d04c916f4ded711cff45267518112c5bd9dbd74", "bytes": 11333}, + "hubtown": {"name": "Hubtown", "category": "Architecture & Interiors", "description": "Hubtown Limited (hubtown.co.in), an Indian real estate developer, measured live: near-black navy #020a18 canvas with pale periwinkle #d5e0ff ink, Commit Mono uppercase micro-labels at 9px with 1.44px tracking, Grotesk Bold buttons, 5 percent tinted #d5e0ff0d button fills and a glowing blue 3D cube hero.", "sha256": "a46abca327bf233a4f1654dabe28338338ecb1ccb3818a57200887c3d838a194", "bytes": 9667}, + "huge": {"name": "Huge", "category": "Agencies & Studios", "description": "Huge (hugeinc.com), a digital experience agency, measured live: matter typeface at weight 600 with -0.05em tracking from a 284.8px \"Hello.\" hero to 42px copy, magenta #ff0090 accents, #0d0b0a ink on white and warm #faf8f4 tiles, a white 999px pill Let's talk button and 16px client-logo tiles.", "sha256": "614108f6d0a62017bff6af10444ec23f7d896f05af9d3bd0d1fe7689bebf7dec", "bytes": 11924}, + "huggingface": {"name": "Hugging Face", "category": "AI", "description": "Hugging Face (huggingface.co) measured home page: white canvas with a near-black #0b0f19 hero panel, Source Sans Pro 400/600/700 with IBM Plex Mono for repo names, a #101828 pill Sign Up button, 8px and 12px radii, and a Tailwind v4 token layer. Brand marks are yellow #ffd21e and orange #ff9d00.", "sha256": "4427a3d20954372464d507fa7b6e3e85ebc80305a428310781bb987aeaccd1b0", "bytes": 13402}, + "hugo-boss": {"name": "HUGO BOSS", "category": "Fashion & Apparel", "description": "HUGO BOSS US online shop (hugoboss.com/us/home) measured: full-bleed campaign photography under a translucent #edededcc pill-cornered nav bar, AvertaPE sans in uppercase 800-weight headlines (54px HIGHLIGHTS, 24px hero), 15px weight-100 body text, a near-black #1c1c1c footer, and no shadows.", "sha256": "9c3605f037f4d601e62f8b69f40d2e4f8c767bee944019b8e927ed0a7b3ee595", "bytes": 9776}, + "huneety": {"name": "Huneety", "category": "Thai Brands", "description": "Thai career platform for interns and young graduates (Huneety, Thailand at Work): turquoise #50ccc0 accents, pastel mint, cream and cyan cards, Noto Sans Thai at 16px with 900-weight 48px display, 4px buttons and 8px cards, grey #737373 footer.", "sha256": "5076e71e6330a387aeb1dde426d4e760bdb0eec10c95e9c3b80266702fc8c874", "bytes": 10841}, + "hungry-tiger": {"name": "Hungry Tiger", "category": "Food & Beverage", "description": "Hungry Tiger (eathungrytiger.com) measured: a fire-roasted Indian sauce brand on a #823513 brown canvas with #faae33 saffron text and pill buttons, a #402011 dark-brown label color, Salmond 700 uppercase display type up to 189.44px with negative tracking, Graphikx 500 nav, and no shadows.", "sha256": "b48327c1683961261e4a80a141faf24a1836fd4322eccaae79ab4a496b19915b", "bytes": 10786}, + "hut-8": {"name": "Hut 8", "category": "Product & SaaS", "description": "Hut 8 (hut8.com) measured: a #080808 off-black canvas over full-bleed industrial footage, ITC Franklin Gothic Std 400/500 with negative tracking (60px/-1.8px headings, 14px body), off-white #f8f8f8 text, a #b3ff00 bright-green accent, square corners and no shadows or borders.", "sha256": "13f2bb50ddcc73823a28257a7422c4cb369e2945ef6c257c027cd74927f66d60", "bytes": 9847}, + "hyundai": {"name": "Hyundai Mobility Thailand", "category": "Automotive", "description": "Hyundai Mobility Thailand (hyundai.com/th/th, the Thai-language Hyundai site) measured: white and warm #f6f3f2 surfaces, Hyundai navy #002c5f square-cornered buttons (50px high), HyundaiRegular/HyundaiMedium with KanitRegular Thai fallback, 58px/71px headings, a #1c1b1b footer and a navy dealer-locator panel.", "sha256": "e124755222c96412bda53fd93db5575b907dadbc00abf63c69e721cf9d2542a7", "bytes": 10681}, + "ibank": {"name": "Islamic Bank of Thailand", "category": "Thai Brands", "description": "Islamic Bank of Thailand (ไอแบงก์) homepage: white canvas with Islamic-bank green #018749 pill buttons (50px radius, 45px tall), a deep green #164614 audience bar, gold #e4b963 and #ffb300 sections, teal #0ec1ac band, and the self-hosted Sukhumvit Tadmai Thai faces at 16px body and 50px display.", "sha256": "b4a9f92da069b11a3dcb9223db325d2d4ee814b7e948b4752896a143ab8e4119", "bytes": 10678}, + "ibm": {"name": "Carbon Design System", "category": "Design Systems", "description": "Carbon is IBM's open-source design system: square-cornered (0px) controls, IBM Plex Sans and Plex Serif, a #f4f4f4 and #ffffff layered canvas, near-black #161616 ink, a single IBM Blue 60 (#0f62fe) action color, #393939 secondary and #da1e28 danger buttons 48px tall, built on an 8px mini-unit 2x grid and role-based color tokens.", "sha256": "35bc09b13f269bf97edca084e8c17e44b57460b1c05d68c8f4e86b6990502f29", "bytes": 19964}, + "icbc": {"name": "中国工商银行 (ICBC Ltd corporate site)", "category": "Banking & Insurance", "description": "ICBC Ltd corporate site (icbc-ltd.com) measured: a 1280px white page of Arial 12px/22px text, ICBC red #bc0021 links and bullets, #666666 body copy, #f2f2f2 panels, a #d1d1d1 hairline on the 宋体 search field, a red navigation bar and 0px computed radii everywhere.", "sha256": "967158a242ab43f135d7d458425ba2c723d0993255dcbdd5ee1852f58873da67", "bytes": 9080}, + "icbc-thai": {"name": "ICBC (Thai)", "category": "Thai Brands", "description": "ICBC (Thai) public company site: a dense, legacy portal on a white canvas with Arial 12px text, #333333 body ink, ICBC red #bc0021 as the dominant stylesheet colour (red navigation bar, red login buttons), 3px and 30px radii, and bilingual Thai, English and Chinese navigation.", "sha256": "2ba78a8c84ebb5b71c29c0101371e9f8296bb1987081de6f737ad39f604950cd", "bytes": 8989}, + "ichitan": {"name": "Ichitan Group", "category": "Thai Brands", "description": "Ichitan Group (ichitangroup.com/en) measured: investor-and-brand site with Poppins and Noto Sans Thai, a 57px/500 white hero headline, #e30613 red pill buttons (40px radius, 8px 32px padding), 20px-radius news cards on a #f2efe8 band, a #3b996d green accent and a black footer.", "sha256": "7d846f3dcd5ff37c288783d3d99e75b1d947a82fafa14fc8d31faa4c809d6803", "bytes": 10225}, + "icomat": {"name": "ICOMAT", "category": "Tech & AI", "description": "ICOMAT (icomat.co.uk) measured: 'Engineer Without Limits' composites manufacturer on a #f8f8f8 canvas with a #080808 dark hero, LayGrotesk-Semibold headlines (69.3px, -1.04px tracking), AkkuratMono 11.24px uppercase labels, translucent #ffffff1c buttons with 7.49px radius, #cfd9e0 pale steel text and a 1px inset shadow.", "sha256": "59f3a92bda7d8a3af09c41fac3dbf1f8bece58e7816e316eab7c35e7169d5879", "bytes": 10566}, + "iconsiam": {"name": "ICONSIAM", "category": "Thai Brands", "description": "ICONSIAM (iconsiam.com/en) measured: a Bangkok riverside mall site in Gotham with Thai (DBAdmanX) and Chinese (NotoSansSC) companions, antique gold #8c7225 bars and footer, cream #f4edd7 bands, #475467 body copy, a #f7e907 yellow Register Now button, square 0px buttons 48px high and no shadows.", "sha256": "22cb4b107f26dba65e389b1abaf815f72fcea86dc7f66783700b002872395c95", "bytes": 11144}, + "ideo": {"name": "IDEO", "category": "Agencies & Studios", "description": "IDEO's 2025 Webflow site is a dark-ink editorial system — near-black slate #151f27 page wrapper, a single acid-lime \"Alchemy\" accent #d9ff00 for headlines, links and the Say hello button, white #ffffff copy, and slate blues #7b92a5 / #536575 for the footer, menu and hairline card borders. Type is FH Oscar (served as \"Fhoscar\") at Light 300 for 80px display and 40px section heads, Medium 500 at 20px for UI and lede copy, with Manrope 18px for long-form case-study prose. Every corner is square (0px radius), cards are 1px outlined boxes, and there are no shadows.", "sha256": "f7f6cdcb01015aeea623045350698b538cfd22dc9a4bc14e09e7622c5028a69b", "bytes": 28361}, + "iheartradio": {"name": "iHeartRadio", "category": "Music & Audio", "description": "iHeartRadio web player home (iheart.com) measured: a light app shell in Open Sans Variable with a #f6f8f9 page, white sidebar, #cc032e iHeart red pill buttons (990px radius, 32px high), #27292d ink, 6px radius tiles, 0.15-alpha elevation shadows and an internal 'accomplice' token set.", "sha256": "eeb7e3835afc926db19b2d378313a7665d381656a45be3468cab5f38d470f084", "bytes": 10543}, + "ikea": {"name": "IKEA", "category": "Home & Furniture", "description": "IKEA's US storefront (ikea.com/us/en) is a white-canvas, photo-first retail system set entirely in Noto IKEA at 400 and 700: #111111 ink with #484848 secondary text, #f5f5f5 light-grey pills and footer, a #111111 utility bar, #0058a3 IKEA-blue 'Add to bag' pills (56px tall, 64px radius, hover #004f93), #007cc1 IKEA Family tiles and badges, #ffdb00 brand yellow, square 0px photo tiles in a 12px-gap bento grid, and tight negative tracking on bold headings (40px/-1.39286px).", "sha256": "1be440f0c5b1178985c49b254b30dbf75af009dd8694e24c3e623dd35cad0849", "bytes": 26373}, + "il-capo-production": {"name": "IL CAPO PRODUCTION", "category": "Portfolio", "description": "Il Capo Production (ilcapoproduction.com, 'Industrial Cinema 2.0') measured: a #000000 canvas with one brand red #d60001 for text and a full-bleed red footer, IvarDisplay serif in uppercase (120px titles, 30px nav) paired with HelveticaNeue 21px, a giant red ILCAPO wordmark over film footage and 0px radii.", "sha256": "778da85f9358b66d66937946971f2db697ffda8a02b8fd1091919649e62ee873", "bytes": 9251}, + "illoca": {"name": "illoca", "category": "Architecture & Interiors", "description": "illoca is an architectural design tool whose marketing site pairs a graph-paper cream page (#eadfc9) and charcoal ink (#373737) with a single cobalt blue (#283f7d, the site's own --color-primary), setting headlines in F37 Analog, body in Graphik Web at 13.3333px, and UI labels in Geist Mono, with radii held to 1.33px and 2.67px.", "sha256": "56ea0c26bc9418d47d64c8231a7d0e920f304860c98af22f5896d8bc1d72fc24", "bytes": 12937}, + "illumina": {"name": "Illumina", "category": "Healthcare & Wellness", "description": "Illumina's home page is a clean white and warm-grey (#f4f2f0) science-marketing page set entirely in Inter (light 300 headlines at 49.024px, 17.536px body), with pill buttons of 100px radius in periwinkle #4e60ee and dark #1f1d1a spotlight bands carrying orange and violet gradients.", "sha256": "025dd1917bcfa2905174b85cf1515cc8c359afce7edb42ff3dcca06d6245f8c0", "bytes": 11665}, + "immersive-garden-website": {"name": "Immersive Garden", "category": "Business & Corporate", "description": "Immersive Garden, a digital experiences studio, shows a monochrome plaster-relief hero on a light grey canvas (#e8e8e8) with near-black ink (#030303), setting statements in the serif PSTimes at 28px and 32px and its single Menu control in HelveticaNeueRegular at 14px, with no rounded corners, shadows or colored buttons.", "sha256": "fe4de3ebab92f869828b05a8c2b355240f621b4842ab93191dffb4ce61cca171", "bytes": 9149}, + "impact-growth-reit": {"name": "IMPACT Arena, Exhibition and Convention Center", "category": "Thai Brands", "description": "Event-venue site for IMPACT Muang Thong Thani, set in Helvetica Neue on a light grey #ededed canvas with a #1c3fa3 pill call-to-action (9999px radius, 15px type, 1px tracking), black #000000 body ink, 44px display headings and 8px-radius white event cards.", "sha256": "0d8f5d3f194b72eaee743cabb025b57942c27bac7a86126c679eaa9d7fe39348", "bytes": 13100}, + "imperial-college-london": {"name": "Imperial College London", "category": "Education", "description": "Imperial College London pairs a white page and charcoal ink (#161a1d) with a bright spring green (#00ff7f) used for links on dark panels and the course-finder band, setting everything in its own variable font ImperialText at 19.447px body and 700-weight headlines from 26.8243px to 60.1061px, with square corners (0px) throughout.", "sha256": "0d752ba8910400ad4c6822ad08f662c89d4ddce0d6f84df96b2fce76a41c277d", "bytes": 10988}, + "impronta": {"name": "Impronta", "category": "Architecture & Interiors", "description": "Impronta (improntahome.com), Italian maker of designer windows and doors: white #ffffff canvas, charcoal #2a2a2a ink and button blocks, SuisseBPIntl Medium at 37.5px for headlines and 9px uppercase labels, square corners, split dark title bars and full-bleed architectural photography.", "sha256": "b2bd7ba6485610c80848952eb102577757e69b93e58789cac7adbfa6297338bb", "bytes": 11044}, + "inclusive-components": {"name": "Inclusive Components", "category": "Design Systems", "description": "Inclusive Components by Heydon Pickering: a blog-as-pattern-library in two values, off-white #fefefe and charcoal #222222, Miriam Libre 700 headings at 89.6px, Asap 19.04px body, #80b3ff focus ring, dashed rules and white plug illustrations.", "sha256": "c9f9fd414688aca277490ae470aa976e3326e4ce5968d0813f85c7fe8f1b6db1", "bytes": 10190}, + "indara": {"name": "Indara Insurance", "category": "Thai Brands", "description": "Indara Insurance (อินทรประกันภัย) Thai homepage: IBM Plex Sans Thai in four file-weights, near-black ink (#111111) with forest green (#257e65) accents and navy (#123663) detail, light #f1f5f8 and #fafafa bands, 12px-radius photo tiles with white captions, soft 1px 5px shadows and a green announcement hero.", "sha256": "a21b78327570d6b6d9ed1c82e64563add76eb540dbb1ff0030a0828fbbf43353", "bytes": 10488}, + "index-living-mall": {"name": "Index Living Mall", "category": "Thai Brands", "description": "Index Living Mall (อินเด็กซ์ ลิฟวิ่งมอลล์), a Thai furniture and home-goods retailer, runs a dense white storefront (#ffffff, #f6f6f6 bands) with body text #515151 and price-red #e00000, set in its own Index typeface at 16px weight 200, uppercase 32px bold section headings and 4px card corners.", "sha256": "d656beb3220c9bf67c8981afa3dfeeebc07be82e25c2063906d723b39ce0dad5", "bytes": 10760}, + "indigo-laboratory": {"name": "Indigo", "category": "Fashion & Apparel", "description": "Indigo (indigo-laboratory.it, '5 tales of being'), a contemporary jewelry house, builds an editorial experience on a warm paper canvas (#f4f3eb) and near-black ink (#030303) with violet (#6a15ff), in Hanken Grotesk 900 at 100px with -6px tracking, IBM Plex Mono labels, the display face Palette Mosaic at 240px, and square 0px corners.", "sha256": "3e74ec2001b7c0a2996dae585425226bd44c06bf7d7c4b53230cee58c546507a", "bytes": 10103}, + "indorama-ventures": {"name": "Indorama Ventures", "category": "Thai Brands", "description": "Indorama Ventures, a global PET, fibers and packaging chemicals producer, uses a white page with navy ink and panels (#002e61), signal red (#cc0033) and green (#009933) pill buttons, pale teal bands (#d6ebeb), and Noto Sans at weight 300 for 16px body with 36px light headlines and 24px bold uppercase business titles.", "sha256": "d7a8042a1262df396383fa8171b31bf2f8c93f0b4db91ed6fd7b256f5b628bec", "bytes": 10784}, + "infor": {"name": "Infor", "category": "Design Systems", "description": "Infor is an industry-cloud enterprise software company whose homepage pairs Montserrat headlines (500, 40px) with Source Sans 3 body text (18px) on white and light grey #f2f3f4, deep slate ink #15262e, a single violet primary #460daf for 8px-radius buttons, and a signature red #d5000e for the logo, eyebrows and active navigation.", "sha256": "c099890ae4bf3510bed51a16896458f87bc9548d55f3cb116e3f3e3124c0d177", "bytes": 13175}, + "ing": {"name": "ING", "category": "Banking & Insurance", "description": "ING (ing.com), the Dutch banking group, pairs its signature orange (#ff6200) with white, near-black ink (#151515) and indigo links (#525199), set in the proprietary INGMe and INGDisplay families (64px hero, 16px body), with pill outlines at 50px, 8px buttons and a floating rounded navigation.", "sha256": "9c7b22a1e9690db303c0f5bb4a9534bbaa935f76f8e7c2bd5880f2dbfcd8bd45", "bytes": 10518}, + "ini3": {"name": "Ini3 Digital", "category": "Thai Brands", "description": "Ini3 Digital PLC, a Thai online-games publisher, on a #353535 charcoal canvas with white ink, a single #ff7a00 orange accent, PT Sans Narrow 700 at 120px for headings, Hind Siliguri body at 21.6px, square-cornered outlined buttons with a translucent black fill, and black label chips over staff photography.", "sha256": "2030f64f7c256d54c072cbbf8b95f39d90ef615fb1c3275da5e9cf495dd6ee97", "bytes": 10291}, + "ink-games": {"name": "INK Games", "category": "Culture & Events", "description": "INK Games, a game studio and publisher, runs a near-black page (#0a0e11) with off-white text (#fafbfd), a full-bleed electric purple section (#c74fff) with deep violet type (#4c0070), huge uppercase RuderPlakatLL headlines up to 211.905px and PP Neue Montreal and Montreal Mono for 17px body and 15px buttons.", "sha256": "bd6605e157b50bd5592c0ce49f95dee426f042e68084d24525ed70b3f8aafefa", "bytes": 10623}, + "inkfish": {"name": "Inkfish", "category": "Agencies & Studios", "description": "Inkfish, a New York commercial production company, uses a white page (#ffffff) and pure black (#000000) with a near-black stage (#010101), setting 142.222px uppercase NT Dapper display words with -5.68889px tracking and 10.6667px uppercase Martian Mono labels, with square corners and no color accents.", "sha256": "73359efc83c3609eb175b8608f8588560f14198e317769f2f76885b6416215e1", "bytes": 9618}, + "inngest": {"name": "Inngest", "category": "Developer Tools & IDEs", "description": "Inngest's durable-execution site: a #1c1c1c charcoal canvas, white ink with #b3b3b3 secondary text, a salmon #f65c4f primary button with 6px corners and uppercase WhyteMono 12px labels, uppercase Whyte 72px display type, CircularXX 18px body copy and an electric-blue #013cf6 feature band.", "sha256": "c3d14f56bd245cab5c0b07e784f4917ed745e7ba2e9d3140e798bce9722a4525", "bytes": 13066}, + "insta360": {"name": "Insta360", "category": "Consumer Electronics", "description": "Insta360 (insta360.com), the 360-camera maker, uses a pale cloud-white canvas (#f8f9fc) with graphite ink (#262629), a single signature yellow (#ffe100) for the Store button, dark #1d1d1f Buy/Compare buttons, 24px-radius product cards, and Poppins Num with MiSans VF fallback at 56px/600 headlines and 14px body.", "sha256": "a7b169e70878031e93249cf067c7d05bc1db70455956cbd98943b65b9b4d6a03", "bytes": 10348}, + "instacart": {"name": "Instacart", "category": "Food & Beverage", "description": "Instacart's US grocery marketplace: a white #ffffff canvas under a warm #f7f5f0 header, a deep-kale #003d29 hero band, Instacart Green #108910 pill buttons (hover #007200) with 20px/28px radii, #343538 and #242529 grey ink, #e8e9eb filter chips at 999px, 8px-radius retailer cards with a #0000001f hairline, #ffdc23 deal badges, all set in the custom Instacart Sans (400/600/700).", "sha256": "fd6e75ff1f07518c8c070bcdc8cdcc8fbeecd2bc7797ab8b02a8e1ece6004f50", "bytes": 28908}, + "instagram": {"name": "Instagram", "category": "Product & SaaS", "description": "Instagram's logged-out web entry page: white #ffffff canvas, #111112 headline in Instagram Sans Regular at 35.84px, #737373 footer text at 12px, a #0064e0 blue for the login button and outlined create-account pill, Optimistic for form text, and 16px to 40px radii around a login panel next to a collage illustration.", "sha256": "a5c4cd64fb58419428f595de0858c4bd41ff768eb045e378a110a23d927cb4d5", "bytes": 9213}, + "instantly": {"name": "Instantly", "category": "Product & SaaS", "description": "Instantly (instantly.ai) is a sales-engagement SaaS site set entirely in Avertastd (600 Title-Case headlines at 40px, -1.5 to -2px tracking), black #000000 pill buttons (100px radius) on a near-white #fbfbfc canvas, grey #6d727e copy, blue-gradient product panels with #4580f7 accents and very deep layered card shadows.", "sha256": "c414919d28d4071c23e253565853a6b2130090cf32139709dc60fc62d0ea5be8", "bytes": 12022}, + "instructure": {"name": "Instructure", "category": "Design Systems", "description": "Instructure's site is a Drupal-built marketing page in deep navy ink #061c30 on near-white #fefefe, with Circular-style 'circularxx' type at 48px bold with -3px tracking, cobalt #0e35b3 pill buttons (25px radius, 2px border), navy rounded stat cards, and a white mega-menu panel.", "sha256": "409acc5b6ef221fbd6914fd0f189509992770345cc4519f6ac85d5199e7c0c6e", "bytes": 10541}, + "instrument": {"name": "Instrument", "category": "Agencies & Studios", "description": "Instrument (Portland digital agency) runs a monochrome editorial system — near-black #070708 on white #ffffff, a giant black masthead wordmark, the agency's own open-source Instrument Sans (variable, wdth 80–100) and condensed Instrument Serif at 60–285px, 999px pill buttons with 12% shade fills, 24px-rounded square media cards and fluid type that scales with the viewport (22.5px body at 1280px).", "sha256": "2b8f0de4ef218749b17fabc8802b75bd02e3b8fef38e8ecca7be6262a8f74177", "bytes": 30891}, + "integratedbio": {"name": "Integrated Biosciences", "category": "Tech & AI", "description": "Integrated Biosciences, an aging-medicine biotech site: warm off-white canvas #f7f7f5, deep teal-ink #222f30, Aspekta light-weight sans at 18.52px body with negative tracking, Roboto Mono uppercase 13.68px for nav and buttons, 8px button radius, large rounded cinematic hero image.", "sha256": "a72492abfe27451f1a98f9454175adc4cf742d408f49a022737e266c8edb9b86", "bytes": 11727}, + "intel": {"name": "Intel", "category": "Consumer Electronics", "description": "Intel homepage: a navy #000f28 hero and header over a white #ffffff body, intel-one-display-medium type at 218px with tight tracking, 20px/30px intel-one-body-text, Intel blue #0046c8 accent with cyan #00c7fd brand highlight, and small outlined 100px pill buttons.", "sha256": "27adbe4afb60ad17b358ab8fd371c2f50d6c5291578d9454074b8018d74eaf9f", "bytes": 10734}, + "intercom": {"name": "Intercom", "category": "Productivity & SaaS", "description": "Intercom's marketing site: warm off-white #faf9f6 canvas with white and chalk #f1eee9 panels, near-black #111111 buttons with 4px corners turning cobalt #0007cb on hover, Saans display at 80px with -2.4px tracking, Serrif light body, mono caps labels, and one Fin orange #ff5600 accent.", "sha256": "57de8c1b35784ac72cafedd0fc7fe82744e02b573713ee09b1a4558f159b8b08", "bytes": 18428}, + "interlink-telecom": {"name": "Interlink Telecom", "category": "Thai Brands", "description": "Interlink Telecom (ITEL), a Thai fiber-optic and data-center network operator: Prompt typeface in light weight 300 at 16px body, 45px display, brand orange #ff7b23 pill buttons at 36px radius, white canvas, grey #707070 text and dark #292929 footer over dark network photography.", "sha256": "9c275f4a0a55cd19c50da5c38f3bf4f7cb2c67dc2f48bf4d5436b976eeb68ab0", "bytes": 10150}, + "internalities": {"name": "Internalities", "category": "Architecture & Interiors", "description": "Internalities, the Pavilion of Spain site for the 2025 Venice Architecture Biennale: flat grey canvas #ebebeb, charcoal ink #393939, a gigantic wordmark, ShinkaMono monospace and ABC Camera Plain at 14px / 16px weight 400, zero borders or shadows, with a faint vertical column grid.", "sha256": "a2f0a865940e2ce56348e063723b2473abddbe98d60ced7f1b2639ce556ed3ed", "bytes": 9049}, + "international-gateway": {"name": "International Gateway", "category": "Thai Brands", "description": "International Gateway Co., Ltd. (IGC), a Thai neutral gateway and submarine-cable carrier: Noto Sans Thai headings at 700 / 40px uppercase in indigo #303188, Calibri 17.33px body, teal #00a8a2 hover accent, lime #4fd946, white canvas, rounded 20px to 50px green cards and pills.", "sha256": "dcbc9df5d5b78e82b1803b396de9995d2de7611628fe5c6e764de922b73dae45", "bytes": 10155}, + "intouch": {"name": "Intouch Holdings", "category": "Thai Brands", "description": "Intouch Holdings PCL, a Thai telecom and technology holding company: Inter with Noto Sans Thai at weight 300 and 16px body, brand green #69a72a with lime #ccdc04 pill buttons at 99px radius, white canvas, black footer, 20px to 30px rounded cards with a 0 30px 40px soft shadow.", "sha256": "f238c3f22e39d23e116555cf0b5edf0c4938df4c0ab6dd5568c759cf3d6a91e5", "bytes": 11281}, + "intuit": {"name": "Intuit", "category": "Design Systems", "description": "Intuit.com home page — white and pale-grey (#f4f5f8) canvas, deep indigo ink (#0d0031), a single saturated action blue (#236cff) on 60px-radius 52px-tall pill buttons, Tally and Tally Display typefaces with 40px/500 headings, and rounded gradient product cards (green, navy, yellow) holding rounded photographs.", "sha256": "62997089c709879e9253ed52d196687ccd1358ee2f6b796268b6bc245d1c20db", "bytes": 11016}, + "intuitive-surgical": {"name": "Intuitive", "category": "Healthcare & Wellness", "description": "Intuitive, maker of da Vinci and Ion robotic surgical systems: white canvas with #f3f3f3 and #dcdce0 panels, near-black #1c1c1f pill buttons at 24px radius turning cobalt #0f25d2 on hover, BrownPro headings at 72px and 36px, InterUI body at 15px, 16px rounded cards.", "sha256": "74938125bd90bd7e5daffe0cb5b8b403f2e1979c36af141aa98d94503b06beb8", "bytes": 10609}, + "ionity": {"name": "IONITY", "category": "Energy & Climate", "description": "IONITY, the European high-power EV charging network: deep navy canvas #000032, white text, magenta #ff0074 and purple #702283 gradient cards, Foco W Rg and Foco W Bd type with a 97.9px display, pill-shaped white and outline buttons at 999px radius, full-bleed photography.", "sha256": "8c00fd4e975c1059452082bdbdebb1074e390cd78b25ae745014867f89eabc5b", "bytes": 11093}, + "ironhill": {"name": "Ironhill", "category": "Food & Beverage", "description": "Ironhill (ironhill.au), an Australian drinks brand site themed as a place the maps don't show: warm cream #f4eddd canvas, forest green #344128 text and bands, yellow #fec820 menu toggle, PP Woodland Light at 260px, 70px and 16px, 4px radius and thin contour-line illustration.", "sha256": "44faf485a6660251c26613df8fb1bc49de9a7ed62723dea2068773a499769d71", "bytes": 8865}, + "isuzu-motors-thailand": {"name": "ISUZU Group Thailand", "category": "Thai Brands", "description": "ISUZU Group Thailand corporate entry page (isuzu.co.th), operated by ISUZU Motors Asia (Thailand) Co., Ltd.: white canvas, grey #707070 DB Helvethaica X menu at 26px, ISUZU red #ed1b2f and #ff0000 accents, black #000000 footer bar, all corners square (0px), full-bleed sky photograph.", "sha256": "689255b5d7943d49135913cc28a8be8bb12754389c9f533b51b3459e1799332e", "bytes": 8738}, + "isuzu-thailand-tri-petch-isuzu": {"name": "Isuzu Thailand", "category": "Thai Brands", "description": "Isuzu Thailand Official (isuzu-tis.com), the Thai consumer site for Isuzu vehicles: white canvas, near-black #1d1d1d ink, Isuzu red #ed1c24 buttons turning #a11116 on hover, NotoSansThai Regular and Bold at 18px body, EurothaiDemiExt 64px headings, 4px button radius and 12px cards.", "sha256": "174e96a64e3bf33306973c734bc1e91487e7906b6426eff4911fb039c90590d8", "bytes": 11049}, + "italy-gov": {"name": "Governo Italiano", "category": "Design Systems", "description": "Governo Italiano (www.governo.it), the Italian government's institutional site, is set entirely in Titillium Web with #0066cc institutional blue for links and navigation, a #444e57 slate Focus band, #eeeeee and #ffffff content areas, 4px-cornered cards, and a green-white-red stripe under the header.", "sha256": "9e97a4ae3b3865f785693072f388c511773777de654191ed612a5ee4f128a55c", "bytes": 11232}, + "itch-io": {"name": "itch.io", "category": "Gaming", "description": "itch.io is an open indie-game marketplace with a utilitarian, catalog-dense interface — a white #ffffff main column beside a #f4f4f4 sidebar, near-black #222222 Lato text at 12–20px, hot red #ff2449 actions with a deeper #da2c49 for tags and links, the official 'itchy carnation' #fa5c5c brand color, and tiny 2–4px radii on outline buttons, price tags and thumbnails. Cover art does all the color work; the chrome stays flat, bordered and quiet.", "sha256": "de0ba7981815c2d745e4ec299bd2e3f06fffc35d339d4aacd3369ba7c76b00ef", "bytes": 28346}, + "iventions": {"name": "Iventions", "category": "Culture & Events", "description": "Iventions, an international event, exhibit and sports agency: electric lime #e0ff98 sections and warm off-white #f3efeb, near-black #1e1e1e ink, Soehne at 500 with a 106.667px wordmark-scale display and tight negative tracking, ABC Arizona Mix 24px nav, lavender #9c93e8 and purple #8072ff accents.", "sha256": "9a190d178b68b99c633a7110e82db9c6d25fa4e5fdc5c59b2f30c18170f5f37b", "bytes": 11056}, + "ivress-spin-a-tale": {"name": "SPIN A TALE (IVRESS Brand Site)", "category": "Tech & AI", "description": "Dark, story-driven brand microsite for the Japanese company IVRESS: near-black canvas #000203, warm off-white ink #faf5f0, amber highlight #f9b639, Basilia Compress D condensed display, Josefin Sans UI labels, A-OTF Ryumin serif for Japanese narrative text, and 48px pill outline buttons.", "sha256": "d6f7008907c787afa5036716eaa7d608e344f6a14f488e0e073e5529c078ead1", "bytes": 13457}, + "iwc-schaffhausen": {"name": "IWC Schaffhausen", "category": "Luxury", "description": "Swiss luxury watchmaker's worldwide home page (iwc.com/ww-en): pure white canvas #ffffff, black #000000 ink, a single HelveticaNeue family at 400 and 500, 32px display with 0.32px tracking, 12px uppercase buttons with 0.6px tracking, a round 73px black PLAY control, and no shadows.", "sha256": "9837d0c3131baa8c29e110b1dc87c7563558c5948179b368ae98901d85fc2bc3", "bytes": 11735}, + "iyo": {"name": "iyO", "category": "Retail & E-commerce", "description": "Dark, near-black (#101010) home page for iyO, a maker of agentic voice computers: pearl-grey #dddee3 type, a three-face stack of Magnetik 33.6px display, Roobert Regular and Nbarchitekproneue 9.6px body, a floating pill nav, 12.8px to 42px radii and no shadows.", "sha256": "ab5e0de15c33d8df0c2b1a2b86bc12a79d9629c02ef63e97c703ebbc35453066", "bytes": 9424}, + "izanami": {"name": "Izanami", "category": "Product & SaaS", "description": "Japanese-harmony brand site (Dubai and Tokyo) set on a near-black warm field #0a0801 with soft stone-grey #d9d7d4 text, a Cinzel, Playfair Display and Shippori Mincho serif trio at 12.8px to 16px, 30.72px reading line-height, a full-bleed fog-forest hero and every corner square (0px).", "sha256": "d103e2617b7f3e48c1e13038145e1b70fc72afb023343685867b9a1d8e1dad8d", "bytes": 9825}, + "jacques-cie": {"name": "Jacques + Cie", "category": "Product & SaaS", "description": "French-Canadian dental clinic site (Quebec City, Sainte-Foy) in warm cream #f7f3eb with deep indigo #333347 text, a periwinkle #84b0e8 button fill, Aeonik at weight 400 from 14px to a 104px hero, and 20px rounded 50px-high buttons with no shadows.", "sha256": "1a7084007239c2afae923594d18fe628955cb2f400a74bcac5dd77e4db1b052b", "bytes": 10012}, + "jaeger-lecoultre": {"name": "Jaeger-LeCoultre", "category": "Luxury", "description": "Swiss watch maison's US English home page: full-bleed dark campaign video blocks over white and #f3f1ed stone, warm-black #201f1e square buttons, bronze-beige #b7a98e labels, uppercase Decimal 600 headlines at 45px and GothamSSm 15px body, 2px inputs and no shadows.", "sha256": "d3ab14221c12c322b4d02b8ff42d3bdb4e89cce8fde7f6f7ae85bd7bb41be89a", "bytes": 12029}, + "jaguar": {"name": "Jaguar", "category": "Automotive", "description": "Jaguar's international home page (jaguar.com/en-xi), warm stone #ebece6 with charcoal #333433 text, an in-house jaguar typeface from weight 100 at a 145px hero to 16px buttons, white 56px-high pill buttons with 56px radii, 9px cards and a dark footer wordmark.", "sha256": "e95a83e320bbf04221250b7dde5a9460c9b66ae5070fee21b9f35d2f72b2ddf3", "bytes": 10293}, + "jam-area": {"name": "Jam Area", "category": "Portfolio", "description": "Italian communication and branding agency (Lake Maggiore): a single 800px screen on cream #fefff8 with charcoal #1e1e1e, giant 301px FKScreamer JAM and AREA wordmarks, 18.8px NeueMontreal-Bold labels, a red #e11010 accent dot, floating work thumbnails and no shadows.", "sha256": "5e8e769a256813889e40fcc5d710d0e1390d3a60099908480bf96a813bbc5c1f", "bytes": 9458}, + "jao-chang": {"name": "จ้าวช้างไวไฟ", "category": "Thai Brands", "description": "Thai agricultural-machinery brand site (rice combine harvesters, Phitsanulok) in Prompt headings and Kanit body, orange #ff7700 as the brand action colour, navy #1e3a8a as secondary, slate ink #64748b and #1e293b on #ffffff with 22px-radius product cards and pill buttons.", "sha256": "1d79683f08ebcb93748e96fe34e3a18cec74bf57c094bdd7841198d09078d281", "bytes": 11680}, + "jas-asset": {"name": "JAS Asset", "category": "Thai Brands", "description": "JAS Asset (jasasset.co.th) Thai listed rental-space and property company site: red #bb020b accents and cards, Lora 500 serif display with Poppins body, grey #53565a chairman band, #f7f7f7 and #f0f0f0 light sections, outlined 16px buttons with a 20px bottom-right corner and 44px card corner.", "sha256": "12ecd6c47c28e67451e3a1b93e9e7e3e53eef82f33a44f5794260e28fbc90213", "bytes": 9683}, + "jasmine-gunarto": {"name": "Jasmine Gunarto", "category": "Portfolio", "description": "Motion designer's portfolio (New York): warm grey canvas #ebeae4 with near-black #090909 ink, a gigantic 252px uppercase mg display at weight 800 and Manrope 800 labels at 10 to 12px, cream #eee9d1 nav text, 25.4px pill tags, one dark project row and no drop shadows.", "sha256": "6d3e80646c581da9478663c0fff20a9b4ba82cb7c28c34918a1b04dc941c87b6", "bytes": 10443}, + "jason-bergh": {"name": "Jason Bergh", "category": "Portfolio", "description": "Director and cinematographer portfolio on pure black #000000 with lemon #ffeec8 type, an Editorial New 200 display at 84.48px (-1.6896px tracking), 6.4px Monument Grotesk Mono body labels, 9.728px uppercase Monument Grotesk nav, a #1e1e1c filter bar and 3px-radius thumbnails.", "sha256": "405ffb38fa0d61d79187d8ddff8e2c9450e6bb861ac593dd52fa38cb639030ca", "bytes": 9418}, + "jasper": {"name": "Jasper", "category": "AI", "description": "Jasper, the AI agent platform for marketing teams: white #ffffff and #f2f2f3 surfaces, deep navy #00063d ink, flame #fa4028 square-cornered CTAs (0px radius, hover #801a10), Feature serif display at 73.83px/-2.21px over ABC ROM 16px/22.4px body at weight 450, and pastel tiles in peach, sky, mint, pink and lilac.", "sha256": "c8f21103dbc7de279e5233361df249b48fb4e4e6593ba67aa6d647263eaa47f3", "bytes": 12913}, + "jaymart-group": {"name": "Jaymart Group Holdings", "category": "Thai Brands", "description": "Bangkok holding company's English investor home page: white canvas with black #000000 text, Jaymart red #ed1c24 accents, Mukta 800 uppercase headings (80px display, 42px section) over 20px/30px body, a 100px side rail, 4px radii and soft grey card shadows #d6d6d6.", "sha256": "764731ed9a55b19e18f5251505a7afc37553bd6e504758a62ef3d8e319545a75", "bytes": 10582}, + "jaymart-insurance": {"name": "Jaymart Insurance", "category": "Thai Brands", "description": "Jaymart Insurance homepage: Prompt typeface at 12px body and 14px links, charcoal ink (#333333), brand red (#d9282d) in a red gradient header and footer band, charcoal footer (#3e3e3e), white cards with 15px radius and a faint #d2d2d2 shadow, pill-shaped section labels at 40px radius and busy campaign banners.", "sha256": "c328ed134b94748396e608754b6979a3b9d78acff120d32f9dca44e8b2cb22ae", "bytes": 10206}, + "jb-design": {"name": "Seyed Mohammad Javad Bathaei Portfolio", "category": "Design Systems", "description": "A one-person developer portfolio at javadbat.github.io, built on a pale blue gradient canvas with a single deep-blue brand ink (#00448c), a high-contrast display serif (\"title-font\", 700, 40px, 1.6px tracking) for the name, a rounded text face for everything else, 24px-radius grey-blue project cards and one soft, inset-shadowed pill button.", "sha256": "98eb94740f6aeb2e208434a8d5bcb55234ad5ca7e9a3df6e3a894230df21112e", "bytes": 9943}, + "jbl": {"name": "JBL Thailand", "category": "Music & Audio", "description": "Harman's Thai storefront for JBL (th.jbl.com): white canvas with black text and a #ff3300 orange-red action color, Roc Grotesk headlines at 42px and 34px, Arial 14px body and uppercase 14px buttons with 1px tracking, 30px-radius pills and 10px/20px rounded tiles, a #111111 footer and glow shadows.", "sha256": "c0e364de67feaf4184fd250f7db51b7e7db7e6cbc2f427b08a33139a4a403022", "bytes": 13371}, + "jd-com": {"name": "JD.com Global (京东全球版)", "category": "Retail & E-commerce", "description": "JD.com's global-edition shopping home page (global.jd.com), Simplified Chinese: cool grey canvas #f5f6fa with white 8px-radius cards, JD red #ff0f23 search button and hover color, Microsoft YaHei and PingFang SC at 12px to 18px, gray footer #eaeaea and a soft 2px 8px 1px shadow.", "sha256": "ddaa228f254a58a456d720ca95507042b7dbc8067ce7ec159042d6fb03c13e6c", "bytes": 10577}, + "jeep-g": {"name": "Jeep", "category": "Automotive", "description": "Jeep.com, the official US Jeep site: white #ffffff canvas with black #000000 header and footer, #212121 headings, deep forest green #1e4544 brand buttons and a lighter #487f70 'VIEW INCENTIVES' button (hover #3a675b), 2px corners, uppercase Roboto 14px/700 labels with 0.7px tracking, and Roboto 700 headlines at 33px and 56px.", "sha256": "6f41848b03ffbc71ab9348b8d1a1cb0a9058151cfad29270d78271566fb03eb6", "bytes": 12611}, + "jesko-jets": {"name": "Jesko Jets", "category": "Product & SaaS", "description": "Private jet charter brand site on a warm cream canvas (#fff8ed) with espresso ink (#312726), stone accent (#7a716e) and black hero fields, set entirely in GT America Expanded and Extended with tight negative tracking, 64px display headings and small 5px to 53px radii plus a 9999px pill.", "sha256": "183b4835686d8ce90aadef4a9ede1e63555adf617cf03d096dbf08e3b1ae7df4", "bytes": 11220}, + "jesper-landberg-4": {"name": "Jesper Landberg", "category": "Business & Corporate", "description": "Portfolio of Swedish design engineer Jesper Landberg: a pure black (#000000) stage with white (#ffffff) text, one variable sans at 11.9467px and 8.53333px uppercase labels, a floor grid and curved 3D project panels, with 17.07px and 9999px radii and no color accent.", "sha256": "5a53d4229841cf1d01460a2c316b966676a24797d283fcab7e8b2d058f8ce6e1", "bytes": 9726}, + "jetblue": {"name": "JetBlue", "category": "Airlines", "description": "JetBlue's booking site (jetblue.com) on a white #ffffff canvas with #f6f6f6 bands, set entirely in the in-house served face jbklarheit (book 400, semibold 600, extrabold 800). Action colour is the pure blue #0000aa (--color-primary) that darkens to navy #000080 on hover; headlines run in core blue #00205b and #000064, body copy in #212121. Shapes are soft: 24px promo cards, 12px category cards, full 9999px pill buttons, and a signature search button that is square on the left and pill-rounded on the right (0px 9999px 9999px 0px).", "sha256": "8128942bc73781d55ea427012ae5b3680a8d86d083c9d7bbfb609ab174b410f3", "bytes": 26920}, + "jetbrains": {"name": "JetBrains", "category": "Design Systems", "description": "JetBrains' marketing site is a near-black developer canvas (#19191c over a #000000 page ground) with white text, white pill buttons with 26px radius, JetBrains Modul 250-weight lowercase display at 44px for the hero and JetBrains Sans for everything else, product cards outlined in translucent white, and pink #f31199 category accents.", "sha256": "b106bd151e59052425ef9bbc0eeba4247f8963b264371c409b4dcc5fdfdf4a23", "bytes": 11867}, + "jib-computer": {"name": "JIB Computer Group", "category": "Thai Brands", "description": "Thai IT retailer (JIB Online): navy #2c3d92 header, white canvas, #333333 Kanit text at 10-16px, red #c9302c and #ff0000 price and buy accents, 3px radii and square 0px buttons in a dense Bootstrap-era product grid.", "sha256": "e554e996a49a5578c45adf818d82c4eab8bc21aba9d3977fab0accf18432fa34", "bytes": 10367}, + "jiffy": {"name": "PTT Retail Management (Jiffy operator site)", "category": "Thai Brands", "description": "The corporate site of PTT Retail Management Company Limited (pttrm.com), the operator that publishes the Jiffy convenience-store promotions — a fixed-width white content panel on a deep navy page (#0e1b46), navy (#003371) tab buttons and footer, Lucida Grande at 11px to 13px, sky-blue (#0099ff) and pure blue (#0000ff) text links, and 4px corners.", "sha256": "4172ef15e78b7dd81552ce512cd80591fbe4de78bd79d41b67d68678cc50463e", "bytes": 11853}, + "jim-thompson": {"name": "Jim Thompson", "category": "Thai Brands", "description": "Thai luxury silk and lifestyle retailer on a white canvas (#ffffff) with black ink (#000000), a custom Jim Thompson Roman serif at 40px for headings, Public Sans light 14px body and wide Akzidenz-Grotesk Pro Ext uppercase buttons with 1px radius and a #d83d26 hover.", "sha256": "d7e30729eedc83fcf538d5890904ee56c080cfba15c9b6ef80bd793a6d20d243", "bytes": 10809}, + "jitter": {"name": "Jitter", "category": "Design & Creative Tools", "description": "Jitter motion-design tool site: black TWK Lausanne 800 headlines (80px hero, 72px sections) with Inter 16px body, #19171c ink on white and #f2f1f3 cards with 40px corners, a lavender #b593ff pill CTA and black #19171c pill buttons with 50px radius, and violet, blue and yellow accent cards.", "sha256": "c19e3aae6caf4d413a05b26450cf3540dfcea5e5ffecad2f026a7cc7bfab620d", "bytes": 12888}, + "jll": {"name": "JLL", "category": "Real Estate & PropTech", "description": "Global commercial real estate firm, JLL Southeast Asia: white canvas with blush #f7ece3 bands, deep teal ink #0e1d23, signal red #de0614, Source Sans 3 at 48px display and 20px body, 6px to 12px radii and translucent teal-tint buttons.", "sha256": "4008fe6beac2bf801d363f21c3dfa1e954b0021d6ae1698dd0b2866d0b36c0e6", "bytes": 11406}, + "jobbkk": {"name": "JOBBKK", "category": "Thai Brands", "description": "Thai job board JOBBKK: white canvas with slate text (#64748b, #333333), signal red #ff1111 actions, custom db-normal and db-bold Thai fonts at 56px display and 22px body, pill inputs, 12px to 40px radii and lavender-blue soft shadows.", "sha256": "3451aa48221dd44029f64d67da55d0e9eb84e2da12e05c086fe496163882886f", "bytes": 11267}, + "jobsdb-thailand": {"name": "Jobsdb Thailand", "category": "Thai Brands", "description": "Thai job board Jobsdb (by SEEK): white canvas, magenta #e60278 primary action, navy-grey ink #2e3849 and slate #5a6881 text, SeekSans at 24px semibold display and 16px buttons, 8px to 24px radii and 2px inset ring outlines instead of drop shadows.", "sha256": "8a1069582751dc412f5eea9965eb90d5c2a4588587b6be3bca8701a8f1bb997b", "bytes": 10775}, + "jobthai": {"name": "JobThai", "category": "Thai Brands", "description": "Thai job board JobThai: white canvas with pale grey surfaces (#f0f2f5, #f6f7fb), near-black ink #222222, brand orange #fe6d43 with square 40px buttons, Sarabun and Prompt Thai fonts at 16px and 20px labels, 4px base radius and 1px #dedede outlines.", "sha256": "6389e400363f0c34190775b3be73c1a547200482800fb39a6b4339d170489533", "bytes": 9966}, + "jobtopgun": {"name": "JobTopGun", "category": "Thai Brands", "description": "Thai job search and Super Resume site (JOBTOPGUN) built with Tailwind: cyan primary #06c5f3 with #00bff9 hover, white and #f9fafb canvas, Poppins with Kanit fallback, 8px buttons, 16px cards and soft blue-tinted shadows.", "sha256": "06df4d495c4e9f1ded3a4c3babd22499411cb44fb92b5622b17169620810b8d2", "bytes": 11860}, + "joby": {"name": "Joby Aviation", "category": "Architecture & Interiors", "description": "Electric air-taxi maker Joby Aviation: flat saturated blue canvas (#007ae5) with warm cream text (#f5f4df), jobyDisplay at 80px weight 550 with -2.4px tracking, jobyText 14px body, 16px cards and capsule radii up to 160px around cinematic photography.", "sha256": "fe862e004bdc6ac84a339a806aee1bd7c175ed2e27fc9a20fd550686a313cb44", "bytes": 10305}, + "john-deere": {"name": "John Deere", "category": "Energy & Climate", "description": "John Deere US storefront and brand site: white canvas with near-black ink #1b1c1b, enterprise green #367c2b pill buttons with #185f11 hover, Inter 36px bold display over Open Sans body, 8px cards, circular category tiles and a --jddc- CSS variable system.", "sha256": "d77fc7f44c5c11981571413f4e6df77260ce60227190613fcfe9ff6bcdaa81a4", "bytes": 10156}, + "johns-hopkins-medicine": {"name": "Johns Hopkins Medicine", "category": "Healthcare & Wellness", "description": "Johns Hopkins Medicine home page: white canvas with #eaeff1 bands and navy and teal message blocks, Noto Serif display at 42.6421px with 8px tracking over Noto Sans 16px body, square #0078d3 buttons and a #09141e footer.", "sha256": "e44aa917fcba0e2abae9e8e4122f8bd888a9739e09053d5aaeaba08813e53b04", "bytes": 10643}, + "johnson-and-johnson": {"name": "Johnson & Johnson", "category": "Pharma", "description": "Johnson & Johnson corporate home page: white and warm grey (#f9f8f7) canvas, black headlines in Johnson Display at 72px, brand red #eb1700 category bars and circular arrow buttons, a #312c2a utility bar and pill-only radii.", "sha256": "82c1cc356ecc90bda11f4f83c3ce772f8d54b91b2f170720a6803d7bc63feff5", "bytes": 9925}, + "jonite": {"name": "Jonite", "category": "Architecture & Interiors", "description": "Decorative stone grating maker Jonite: cool light-grey canvas (#e6e7e8) with near-black ink #0e0e0e, PP Neue Montreal sans and Silka Mono uppercase labels, black 35.56px pill buttons, square stone still-life photography and no shadows.", "sha256": "0f543608a88bd6117cf47cbd7ed24552adbba9599ca484aecd529c81501d5d19", "bytes": 10726}, + "joy-from-africa": {"name": "Joy from Africa to the World", "category": "Culture & Events", "description": "Joy from Africa to the World, the V&A Waterfront Cape Town festive microsite (jfa-awards.snp.agency): an off-white stage (#f7f7f2) behind pastel blob-framed illustrations, navy (#003056) type only, Voyage display caps at 63.7px (43.68px mobile) and Gill Sans 600 at 12px uppercase for navigation. No radius, no buttons with fills, one soft shadow.", "sha256": "5c568bdbc3aace9b3e8c96d22aaababc2a0542213642b75f053766742254c9a5", "bytes": 9675}, + "jpmorgan-chase": {"name": "JPMorganChase", "category": "Banking & Insurance", "description": "JPMorganChase corporate home page: white canvas (#ffffff) with black (#000000) text, a warm sand band (#f4efe7), a charcoal footer-style surface (#202020) and a bronze accent (#8f5a39). Headlines are set in the light Tiempos serif (weight 300, 72px desktop, 40px mobile); body and UI in the Sons sans-serif at 20px and 16px. Buttons and links are fully rounded pills (100px) and nothing carries a shadow.", "sha256": "0c79eda27e66cc17705f52af7e3022337018f6cb2e897563c58f73d3e76154f7", "bytes": 11529}, + "jpmorgan-thailand": {"name": "J.P. Morgan Thailand", "category": "Thai Brands", "description": "J.P. Morgan in Thailand about-us page: white canvas with #f5f7f8 grey panels, the Amplitude typeface at 64px light display and 16px body with 0.32px tracking, #31373d ink, bronze #936846 brand accent, teal #1a7b99 action links, square corners and a deep brown #35210d logo bar.", "sha256": "9ae2880210d2e36fe35a18d3b5d81b9d2eecbcdca6d23ddcebfe9e44ca54f22e", "bytes": 9726}, + "jrw-utility": {"name": "J.R.W. Utility", "category": "Thai Brands", "description": "J.R.W. Utility Public Company Limited (jrw.co.th), a Thai electrical-power and telecom/ICT system contractor, uses a white canvas #ffffff, grey body text #747474, navy #2b3360 and blue #3e8ef6 accents with a cyan #03a9f4 underline, set in Prompt at 15px/34px body and 32px/700 headings.", "sha256": "ab9a912217b4cc48096b47db7404aa5e9f94f6e97adb54a3b05439c95880000b", "bytes": 10557}, + "jt-express-thailand": {"name": "J&T Express Thailand", "category": "Thai Brands", "description": "J&T Express Thailand (jtexpress.co.th), a Thai parcel-delivery company site: white canvas (#ffffff), signal red (#e60000) for the primary button, section underlines and hero search panel, and the Kanit Thai/Latin typeface throughout (700 for headings at 50px desktop / 30px mobile, 400 for 16px body in grey #666666). Buttons are 8px-radius red rectangles, 36px tall.", "sha256": "3be545d5d691416aea48a27fb0a53470bdd1a119d8772c0f9d083938a91fa83f", "bytes": 10684}, + "juice-agency": {"name": "Juice", "category": "Agencies & Studios", "description": "Juice, a creative branding and web agency in Orlando (juice.agency): a pale cream canvas (#ffffeb) with near-black ink (#1d1c1b), Riposte grotesque at 300/400 for headlines and copy (47.001px h2, 31.334px uppercase h1) and Juice Mono, an all-caps monospace, for buttons and metadata. Pastel pill-less buttons (#b6dedb mint, #d8dbc6 sage) with 1.96px corners; no shadows.", "sha256": "3c5f2d21a3ee7ca577f802865a3a1ff9c9e796f5521d1cb57d71f6f756ab531e", "bytes": 11100}, + "julien-calot": {"name": "Julien Calot", "category": "Portfolio", "description": "Julien Calot, visual artist and multidisciplinary creative (juliencalot.com): a near-white gallery canvas (#fafafa) that lets saturated paintings carry all the color, black (#000000) micro-type in Doner at 8px, a condensed FF DIN Pro Black logo and series titles (23px, weight 900, uppercase) and a strict square-cornered, shadowless layout with every radius measured at 0px.", "sha256": "1e35f11eecd41c247808632855829fc5373f4c0e84e55b2f970f350aa5f6bb0a", "bytes": 9306}, + "jungceylon": {"name": "Jungceylon", "category": "Thai Brands", "description": "Jungceylon (Patong, Phuket) is a resort-town shopping mall whose homepage pairs a magenta Cormorant Garamond 600 serif headline (#ed008c, 40px) with plain Arial and Helvetica-style hv_ body copy on a white canvas, a dark grey #3f3f3f navigation strip, black rectangular READ MORE buttons with zero radius, and loud photographic banners in the Phuket tropical palette.", "sha256": "fcba00328653e257a53737b5c42b63217af3ac38100b704c67d4a3b7f9ddbb8c", "bytes": 10920}, + "just-eat": {"name": "Just Eat Takeaway.com", "category": "Design Systems", "description": "The corporate and investor site of Just Eat Takeaway.com, set in JET Sans Digital (800-weight 48px display, 16px body) on a warm #f5f3f1 canvas with white #ffffff panels, ink #242e30, a near-black #141c1f pill button with 50px radius, and the brand orange #ff8000 reserved for hero imagery, maps and the logo.", "sha256": "e7b2754172b562dd033fb680e544789d56c14120af72884583394f176234ff57", "bytes": 11050}, + "k-c-property": {"name": "K.C. Property", "category": "Thai Brands", "description": "K.C. Property (kcproperty.co.th) Thai residential developer site in Prompt weight 300: teal #32bcad brand accent and hover, orange #f2ad48 2px outlined Readmore buttons with 10px radius, near-black #222222 text on white #ffffff with #f5f5f7 section backgrounds and 6px shadowed project cards.", "sha256": "680ecbf1b853a770f39c2b3f98ac35d35595a05e9e13339afd32841ef20bbe51", "bytes": 10295}, + "kaidee": {"name": "Kaidee", "category": "Thai Brands", "description": "Kaidee, Thailand's online second-hand marketplace: Inter-based sans with 'Kaidee' first in the stack, a brand-indigo (#4f68e8) 12px-radius 44px button, #fafafa page ground, white 16px-radius cards, orange HOT and navy PREMIUM badges.", "sha256": "9704a62dc3ac75dda0706f09fd50aa3ec63ec956ddb2ba9e185510d6b8eed48a", "bytes": 12325}, + "kaiser-permanente": {"name": "Kaiser Permanente", "category": "Healthcare & Wellness", "description": "Kaiser Permanente member front door (healthy.kaiserpermanente.org/front-door): deep navy header bands (#0d1c3d, #003b71) over a light grey page (#f7f7f7) and white cards, Gotham 5r headings and Gotham 4r body at 16px, outlined 100px-radius pill buttons with a pale blue fill (#e6f2f7) and a #0074ad link blue. Cards use a 4px radius with a 0.04-alpha 20px shadow.", "sha256": "293095444244d2a142aa866bba5014aadc0ff394c9dffdd8f3cf8c1d08152a46", "bytes": 11983}, + "kajabi": {"name": "Kajabi", "category": "Design Systems", "description": "Kajabi's marketing homepage sets Haffer (400 to 600) in near-black #0a0a0a on a warm off-white #fdfdfc canvas, with a 56.5714px display headline at -1.13143px tracking, a square-cornered 2px black Start Free Trial button, and a full-width black product band whose muted warm-gray text is #bcb9ae.", "sha256": "bec9e2f9b437b5e973b64c43b53afa7234e39761faddff5af1926c7b6e96f3ae", "bytes": 12075}, + "kaleida": {"name": "Kaleida", "category": "Architecture & Interiors", "description": "Kaleida, 'The Hologram Company' (wearekaleida.com): a near-black stage (#0e0e0e) with pure black (#000000) panels, white (#ffffff) Saans type, a #666666 secondary grey and #222222 hairlines. Hero type is 107.288px uppercase Saans at weight 400 (44.85px on mobile), body 18px. No radius, no shadow, no filled buttons; accents #ff3500 and #4b00ff exist only as root variables.", "sha256": "bb30184db5b51ad0c2cbfeb67d3c67c1ffffb223a7b4ae27ab4970bf4b111e7e", "bytes": 10252}, + "kami": {"name": "kami (紙 / 纸)", "category": "Editorial & Print", "description": "Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks — anything that should feel like high-quality print rather than UI. Multilingual by design (EN · zh-CN · ja).", "sha256": "1699afb7a8edaab78f6829a140c273b7556ec730a8dd5a0e797642735ccf8cd5", "bytes": 22067}, + "kapook": {"name": "Kapook.com (กระปุกดอทคอม)", "category": "Thai Brands", "description": "Kapook.com, a Thai news and lifestyle portal: Noto Sans Thai throughout, a teal (#4abdac) header and wide teal call-out bar, white cards with 6px-radius pill tags, 22px/700 section headings and photo-led story cards with white overlay headlines.", "sha256": "6a86cc1b5b347bd68dd63168f9d9e051a47dabe90aee20de9dfad16517c72e6b", "bytes": 11172}, + "karmart": {"name": "Karmarts", "category": "Thai Brands", "description": "Karmarts is a Thai premium beauty e-commerce platform whose storefront is a quiet neutral shell around loud campaign artwork. The system is built on the Prompt typeface at 13px/14px, a near-black #0a0a0a primary, off-white #fafafa canvas, white cards, a #ebebeb hairline, a single magenta #e91e8c accent, and pill, 16px and 24px radii.", "sha256": "b29675beb271fea3f57c236a3562cd70b4d2a80b6b1a29db37dd4247b2bf0094", "bytes": 10303}, + "karmarts": {"name": "Karmarts Public Company Limited", "category": "Thai Brands", "description": "Karmarts Public Company Limited corporate and investor site (karmarts.co.th/en/home): a hot pink (#e53988) header, bullets and call-to-action, a warm charcoal footer (#3e3935) topped by a 6px pink rule, white pages, and Roboto Condensed throughout (700 headlines at 40px, 16px uppercase buttons, 15px light links). Square corners, a rectangular SUBSCRIBE button, no brand gradients.", "sha256": "c755f880e2b811d35ab58da7f9e6d175904d592925c59943d9a3d7ae5fda1c65", "bytes": 10394}, + "kartell": {"name": "Kartell", "category": "Home & Furniture", "description": "Kartell official US site (kartell.com/us/en/ktus): a gallery-white (#ffffff) and black (#000000) shop for designer plastic furniture, set entirely in Helvetica Neue (80px weight-500 uppercase hero, 46.4px section titles, 16px body), with #212529 outlined square buttons, a greige panel (#d1ccc3), 0px corners on controls and no shadows.", "sha256": "732bb7c55458be0bb7862e7a118e1eddf9ea32fa1901cd0c31a28fb53785fc3c", "bytes": 11197}, + "kayak": {"name": "KAYAK", "category": "Travel & Hospitality", "description": "KAYAK's travel-search homepage (measured on the en.kayak.co.th redirect) is a white, airy layout in TT Hoves Variable — 44px/700 hero headline, 32px/700 section titles, 600-weight card titles — with an orange #ff690f→#e8381b gradient Search button, a #f0f3f5 12px-radius hero panel, 32px-radius white cards, #192024 ink, teal #0b7b99 links and 9999px pills, all named by --color-*/--size-border-radius-* tokens.", "sha256": "75397b0fb4553dde8e265c389c6625fc1ec6a33de89a94c47528320cfe376532", "bytes": 21981}, + "kazz-magazine": {"name": "KAZZ Magazine", "category": "Thai Brands", "description": "KAZZ Magazine (kazz-magazine.com), a Thai entertainment and fashion news site on the tagDiv Newspaper WordPress theme: white page (#ffffff) with near-black text (#111111), grey excerpts (#767676), dark charcoal category chips (#363636) and a blue accent (#5d74ad); Roboto 21px headlines, Open Sans body, Ruda 700 uppercase menu. Square corners, no shadows, dense three-tier news grid.", "sha256": "83f7e4d37a7aa9180e169e3a4816bb6c60633b1d31d8bb2b835c776f7f68d2ec", "bytes": 9970}, + "kbank": {"name": "KBank", "category": "Thai Brands", "description": "KASIKORNBANK (KBank) personal-banking site: white #ffffff canvas under a full-bleed dark photographic hero, KBank green #00a94f for the 8px-radius 48px 'See all services' button, links and the footer link bar, deep green #005a2a footer sitemap, slate #40515e product band, #333333 body text, all set in the served webfonts kurious-looped (headings, 26px/400 h1, 33px section heads) and kurious-looped-cond (13px/16px UI text).", "sha256": "32150106dc226e836363bcdc3675133321b705db76a740877f2853bb12cdcbf9", "bytes": 24816}, + "kbtg": {"name": "KASIKORN Business-Technology Group (KBTG)", "category": "Thai Brands", "description": "KBTG (kbtg.tech), the technology arm of KASIKORNBANK: a dark teal-black site (#333333 stage, #0d1a1a tiles, #000000 footer) with white type and a single aqua accent (#62cbc9) for emphasis words, rules and arrows. Set in the kurious family at weight 400 per file (96px display, 64px headings, 18px body), 4px and circular shapes, no shadows.", "sha256": "04b72b1da84b9fe35ae93904247c8ca01af274e21eb16bb6c899add0237d863d", "bytes": 9838}, + "kddi": {"name": "KDDI", "category": "Telecom", "description": "KDDI Corporation Japanese corporate site (kddi.com, 'Spark Your Journey'): pale blue-grey page (#f1f2f6) with white (#ffffff) cards, near-black text (#222222) and a deep indigo key color (#0e0d6a) for the contact button and View All arrows, with sky accents (#1eace5, #ebf6ff). DM Sans with Noto Sans JP at 15px/1.7, 8px-radius controls, no shadows.", "sha256": "f290fe6e1cbc1528e2061cebe86539af760f4a9b80f82f3bd23bcab37540d98e", "bytes": 11965}, + "khan-academy": {"name": "Khan Academy", "category": "Education", "description": "Khan Academy as measured on khanacademy.org — a white canvas, near-black #151521 ink and an indigo #5753fa CTA (8px radius, 40px tall, hover #363498) on the Plus Jakarta Sans marketing homepage (42px/700 hero), sitting on top of the open-source Wonder Blocks design system whose classic product theme uses Lato, Wonder Blocks blue #1865f2, off-black #21242c, 4px radii and a #0b2149 dark-blue footer. Pill subject chips (100px radius, 1px #cbcbcd), colourful 16px-radius testimonial cards and a black footer close the page.", "sha256": "cc5615fb135b53d9033764ed6c3136cb7ff55edcf9713429c1c0f9feb66428de", "bytes": 29086}, + "khon-kaen-sugar": {"name": "Khon Kaen Sugar Industry Public Company Limited", "category": "Thai Brands", "description": "Corporate and investor site of Khon Kaen Sugar Industry (KSL Group) set in Noto Sans Thai on a #d9d9d9 grey canvas with #555555 ink, #ee3635 red 100px-radius pill buttons, #ec430f orange nav, a #171717 footer and a 50px hero over aerial map imagery.", "sha256": "df589289bdd7466eb9d006ac2c65755202a397e2db436a8914e59e0425a16c34", "bytes": 11424}, + "khon-kaen-university": {"name": "Khon Kaen University", "category": "Thai Brands", "description": "Khon Kaen University (kku.ac.th/en) pairs a terracotta brand red #a73b24 with Kanit headlines and Sarabun body text on a white canvas, using 8px cards, 999px pill buttons and soft 18px/46px shadows around photographic news and ranking tiles.", "sha256": "0a8ba7e236c7e8cef704edd24124bb55335f2a28d1b740deb4ba51458a09d4d3", "bytes": 11289}, + "kia": {"name": "Kia America", "category": "Automotive", "description": "Kia America (kia.com/us/en) is a dark midnight-navy #05141f automotive showroom set in the proprietary designk typeface family, with square-cornered 0px buttons, white-on-photo hero type at 40px/-1.6px tracking and edge-to-edge vehicle photography.", "sha256": "9a9b94a04e422538c96fc02a7aa94b8592b8536cc92fa5d621741188e7c64984", "bytes": 10179}, + "kiehls": {"name": "Kiehl's", "category": "Beauty & Personal Care", "description": "Kiehl's Since 1851 storefront: a black #000000 header and footer framing a white #ffffff apothecary shelf, Amiri serif headings (44px/700 hero, 32px/400 section titles, 20px/700 product names) over Roboto 14px body, Roboto Condensed 16px/700 uppercase labels on square black buttons (0px radius, 39px tall) that invert to white on hover, 20px-radius shortcut chips and 10px-radius UGC tiles.", "sha256": "f4952518104dca9c36f6b9f40e0298612b83cfb639a3556212bb0f21639d2fb9", "bytes": 28094}, + "king-power": {"name": "King Power Online", "category": "Thai Brands", "description": "King Power Online (kingpower.com/en) is a duty-free shopping site in the proprietary KingPowerHeadline and KingPowerText faces, using bright royal blue #0b56a4 for navigation and actions, price-red #ef3b37, 4px-radius outlined buttons and white product cards on a #f8f8f8 page.", "sha256": "a7dd32d80add4e761aa561d3b585210ac546546ecfd2ccc1cb35d5dd3b0ef4b2", "bytes": 10858}, + "king-power-mahanakhon": {"name": "King Power Mahanakhon", "category": "Thai Brands", "description": "King Power Mahanakhon (kingpowermahanakhon.co.th) is the Bangkok tower attraction site: deep navy #052142 and footer blue #133b64 with a gold #eba600 Get Tickets button, King Power Headline and Text typefaces, and pill-shaped outlined controls with 35.2px radius.", "sha256": "b73e49ed47ecf78c6ba7a7e46712e536fd3956ef169d874d2dc8e4f019470cb3", "bytes": 10880}, + "kirz": {"name": "KIRZ", "category": "Thai Brands", "description": "KIRZ (kirz.com) is a Thai enterprise IT-infrastructure provider whose site pairs deep navy #193446 with champagne gold #e9c77b, sets Thai and Latin text in Anuphan at 60px/700 hero scale, and uses 4px gold buttons with 10px translucent stat cards.", "sha256": "163ed1af86d529a451fb647be6ae06a6d0b67f4adfa266c736b397179377fe8f", "bytes": 11090}, + "kiwi-ds": {"name": "Kiwi.com", "category": "Design Systems", "description": "The Kiwi.com travel-booking home (kiwi.com/en): circular type at 28px/700 headings and 16px body, deep green primary #007061 on 12px-radius 52px CTAs, brighter green #008f7b for the search button, ink #252a31, cloud-grey canvas #f5f7f9 and mint tint #e1f4f3, over photography and 3D illustrations.", "sha256": "81e2dd6e80c8be7e16c917e687b7ee114efbc30be847d49098ae5918327cf0fc", "bytes": 12941}, + "klarna": {"name": "Klarna (US home)", "category": "Banking & Insurance", "description": "Klarna's US home page (klarna.com/us) pairs near-black plum #0b051d with signature Klarna pink #ffa8cd, sets 84px bold Klarna Title headlines over Klarna Text body, and uses 99999px pill buttons, 16px cards and 48px device-frame corners.", "sha256": "1563639dff73b21dddb82f0f6bdfef061426664c23c6e83a0f663c312ebcc517", "bytes": 10948}, + "klm": {"name": "KLM Royal Dutch Airlines", "category": "Airlines", "description": "KLM's web system (Air France-KLM \"Aero\" design system) as shipped on klm.com — a warm sand canvas #f5f1ed, deep navy #002746 text and footer, action blue #0070c2 hovering to #005496, pale-blue tonal buttons #d0e7f6 with 12px radius and 1.25px tracking, white 24px-radius cards, and the custom KLM Universal Sans in Display (headlines, 500) and Text (body, 400) cuts.", "sha256": "7078a16d0f3554534d78c1e29b6cd6efd960fa03da6b3d0b55240e7048998a2d", "bytes": 28043}, + "kmutt": {"name": "King Mongkut's University of Technology Thonburi (KMUTT)", "category": "Thai Brands", "description": "KMUTT's English home page (kmutt.ac.th/en) is a slate-grey #626a74 and charcoal #343a41 university portal set entirely in DBHeavent at 20px to 26px, with translucent yellow #ffde02bf news-card captions, 4px link corners and photo-led news tiles.", "sha256": "a229600a32b49fe8ddb7616e342d4cb8fdc2b6c368ce8f8c7e2d9259a47c9741", "bytes": 9347}, + "knight-club": {"name": "Knight Club", "category": "Thai Brands", "description": "Knight Club (knightclub.co.th), a Thai government-technology provider on Next.js and Tailwind: Kanit at 800 for a 108.8px display, burgundy #6e0625 action, gold #b39359 accent, charcoal #1a1a1a, slate ink #475569, square 0px buttons and 8px-radius cards.", "sha256": "7e65daecbc9116193bf4299ec0f1d3789eaf0799b9a51f83aca38f91b8a0d375", "bytes": 12068}, + "knight-frank": {"name": "Knight Frank", "category": "Real Estate & PropTech", "description": "Knight Frank (knightfrank.com) is an independent global real-estate consultancy site in Tiempos Headline serif and Suisse Intl sans, using signal red #d0103a on near-black #202320 and white, with square 0px buttons, clay #efefeb cards and a dark red #9b1632 hover.", "sha256": "8caf402c503116c5537491790f7e1a939477fb1c561c0285abcc7bc8982202f1", "bytes": 11620}, + "knock": {"name": "Knock", "category": "Developer Tools & IDEs", "description": "Knock's marketing site sits on a warm off-white #fbfaf7 canvas with #1c2024 ink, PP Neue Montreal 500 headlines (60px/64px, -1.2px), Inter body text, a coral #ff6c52 'Get started' button (4px radius, hover #e33a1e), white 12px-radius cards with a 1px #e6e4de inset ring, and Telegraph design-system variables (--tgph-*).", "sha256": "4f2a7d5bf177ad1b3c7f66136d0f757dc71f272823b918549f4a182f7aca8e77", "bytes": 14361}, + "knoll": {"name": "Knoll (Home shop)", "category": "Home & Furniture", "description": "Knoll's home-furnishings shop (knoll.com/shop) is a restrained gallery-style store in Haas Grotesk Display Web, charcoal #333333 on white with warm #f1f1e9 bands, a red-orange #dc3a0f accent rule, square 0px buttons and full-bleed room photography.", "sha256": "acd95c780aa913c9d0bb3366c7b68dd21be58d7f6e05d854f413250015aec795", "bytes": 12145}, + "kobalte": {"name": "Kobalte", "category": "Headless UI", "description": "Kobalte's documentation site for its unstyled SolidJS component toolkit: white canvas, zinc text #3f3f46 with #18181b headings, Lexend Variable titles over Inter Variable body, a sky-blue #027dbb link accent, 6px-radius demo buttons in #0284c5, and soft tinted callouts.", "sha256": "a96cfcd24556399ddd7642ff4067e9adbbf16ec97ea5b737043b4e2c71f3e699", "bytes": 17266}, + "koh-kae": {"name": "Kohkae", "category": "Thai Brands", "description": "Kohkae (โก๋แก่) snack brand's online store: a saturated red #e20d17 header with a white active-nav pill, Prompt type at weights 700 and 800, a white canvas with #f1f1f1 surfaces, and 15px-rounded sticker-like banners and cards led by a cartoon mascot.", "sha256": "d699b7631f88ffe2a8aff15f9f2c8f1fbe47ec6dd0d639fcd8d57277bd5e0537", "bytes": 10037}, + "kolibri": {"name": "KoliBri (ITZBund)", "category": "Design Systems", "description": "KoliBri's public site and component docs use Verdana throughout (32px bold H1, 16px body at 26.4px leading), a slate #334455 hero and footer on white, a single deep-blue action #003a5c with a #ccebf7 light-blue secondary, 5px-radius outlined buttons, and flat, semantic, accessibility-first Web Components styled by swappable themes.", "sha256": "fa9afabd272bd52a4106f34c7d5e5552f8b641493378ed4f7d8a368399b7376d", "bytes": 13055}, + "kom-chad-luek": {"name": "Kom Chad Luek (komchadluek.net)", "category": "Thai Brands", "description": "Kom Chad Luek (komchadluek.net) is a Thai news portal in the Prompt typeface with a red #d70000 brand, black-to-red 45-degree gradient bars, #f9f9f9 page ground, 38px bold white headlines over photographs and 20px-radius card tops.", "sha256": "4bf715336fe7d3130fe4e27f042801676ac552548a9be83277cd4062ff5c5ea4", "bytes": 10415}, + "konami": {"name": "KONAMI GROUP CORPORATION", "category": "Gaming", "description": "KONAMI Group Corporation (konami.com/en) is a flat, square-cornered Japanese corporate portal: white canvas, #333333 text, a #b60014 red Konami logo and heading bars, a #777777 grey navigation strip and UD Gothic typefaces at 14.4px body.", "sha256": "fbeee5398a152278a31f6f8443283ed74ae9129fba517edc20c0af7fbf0e159a", "bytes": 9146}, + "kononenko-architectural-bureau": {"name": "Kononenko Architectural Bureau", "category": "Architecture & Interiors", "description": "Kononenko Architectural Bureau (kononenkogroup.com) is a monochrome portfolio site: pure black #000000 on white with grey #929292 captions, a tightly tracked grotesque at 116.667px for headlines, a serif at 26.6667px for statements, and full-bleed architectural renders.", "sha256": "060e93b0e53847265ae511bf1227a8c5ae52e94cafdaedad4c0fd76d4f68313b", "bytes": 9645}, + "kontur": {"name": "Kontur", "category": "Design Systems", "description": "Kontur (СКБ Контур) is a Russian business-software ecosystem whose site pairs a near-black #151515 hero and white #ffffff canvas with the Lab Grotesque typeface (700 display at 56px, 400 body at 16px), a #015ccb link blue, per-product accent colours such as mint #00bea2 and blue #2291ff, 2px input radii, 16px card radii and pill buttons.", "sha256": "64b87dcff3e394f6fe3d65ffc83b44630bed2595c713a1e979b1f5dc2c67893c", "bytes": 12470}, + "korea-gov": {"name": "Korea Government (KRDS)", "category": "Design Systems", "description": "The Korea Design System (KRDS) published by the Ministry of the Interior and Safety — a government UI kit built on the Pretendard GOV typeface at 17px body and 44px bold display, a single civic blue (#256ef4) for primary actions with a deeper #0b50d0 hover and #052b57 navy text, white canvases, 8px-radius 64px-tall buttons and 12px-radius outlined cards with #cdd1d5 hairlines.", "sha256": "bc4b47d441b04a1036107eed8f0a139129f34778b6606fa89f8378e0810f9ceb", "bytes": 13941}, + "koto": {"name": "Koto", "category": "Agencies & Studios", "description": "Koto (koto.com) is a near-black creative-agency site — canvas #060606, grey #989898 body copy, white #ffffff headlines and links, a #ffe800 yellow wordmark — set entirely in the studio's own gtKotoheim, gtKotoheimCondensed (300) and gtKotoheimMono families, with 6px-radius translucent cards and no buttons.", "sha256": "71264c472b6d7de8811276f1856fd0ca87541e7ba3f4909d4ca375a82ac27857", "bytes": 13145}, + "kpi-insurance": {"name": "Krungthai Panich Insurance (KPI)", "category": "Thai Brands", "description": "Krungthai Panich Insurance (KPI) Thai homepage: EuclidCircularB with Noto Sans Thai fallback, 36px semibold headings, royal blue (#2c67c6) pill buttons at 56px radius with 60px height and white text, cyan (#56bed6) secondary pills, #f8f8f8 page with white 24px-radius cards, diagonal-cut photography and 0 10px 20px shadows.", "sha256": "aa7df3b26f27bed6d4ca47e6d4c2cc53932cdb1021e2f1158a817484783bc42c", "bytes": 10432}, + "kpmg": {"name": "KPMG", "category": "Agencies & Studios", "description": "KPMG global home (kpmg.com/xx/en): white canvas, KPMG blue #1e49e2 actions and a deep #00338d band color, OpenSans Regular and SemiBold body with OpenSans Condensed Bold 48px headlines, 32px-radius pill buttons, flat surfaces with no box shadows.", "sha256": "afe82dfddde9e77a5f417d5555cd1738b39720cc2415bf941e27d8a6b1df5c96", "bytes": 10951}, + "kraft-heinz": {"name": "The Kraft Heinz Company", "category": "Food & Beverage", "description": "Kraft Heinz corporate site (kraftheinzcompany.com): white canvas, bright cyan #09afdc headings and outlined MORE buttons, navy #122a4e navigation, Gotham SSm sans with a 120px Gotham Condensed uppercase hero line, square-cornered buttons and a blue gradient footer.", "sha256": "38bac572b982a393e7b9e82a56133e2868a506108a73e621dc2f5321083d47a6", "bytes": 9723}, + "kraken": {"name": "Kraken", "category": "Fintech & Crypto", "description": "Kraken's marketing site: a cool lavender-white #f6f5f9 canvas with near-black #101114 headings, a single owned purple #7132f5 on 12px-radius buttons, Kraken-Brand display type at 48px, Kraken-Product UI type, and large rounded dark panels (#191322, #302744) holding product screenshots.", "sha256": "495b4c8b8fe5053936fe6ea06a664cf3d9d89e6805275bd54bc469b37e39997b", "bytes": 18299}, + "krating-daeng": {"name": "Krating Daeng (TCP Group)", "category": "Thai Brands", "description": "Krating Daeng (กระทิงแดง) energy-drink product page on TCP Group's site: white #ffffff canvas, deep navy #151f6d headings, red #e4002b accent text, #212529 body, DBHeaventRounded at 90px display and 24px body, 100px-radius outlined pills, and a pink and yellow gradient glow behind rounded white product cards.", "sha256": "b1dea287e6f242d3228490c2d677d7d419259589e843f0586e7feb3217f3d40d", "bytes": 10229}, + "krungthai-axa": {"name": "Krungthai-AXA Life", "category": "Thai Brands", "description": "Krungthai-AXA Life English homepage: white canvas (#ffffff) with deep navy ink (#2a2e80) and brand blue (#00008f) headings, a coral CTA (#f07662) at 8px radius, DB Helvethaica X 75 Bd display at 52px and DB Helvethaica X 55 body at 22px, line-icon product tiles and warm lifestyle photography.", "sha256": "47f455c9e430a6e079ae3830b38d4ce52c1c08d3b2fa5025ad9b0175113a0fc5", "bytes": 10535}, + "krungthai-card": {"name": "KTC (Krungthai Card)", "category": "Thai Brands", "description": "KTC English home (ktc.co.th/en): black header and footer, white pill buttons with 24px radius and 32px height, brand red #e43d31 filled-action color, Gotham with Sukhumvit Tadmai Thai fallback at 48px display and 18px body, rounded 12px cards on a #fafafa surface.", "sha256": "a0ede70da79df2c7342ed8fa10aab9901b04bc7baab4820a7c3451934589f38a", "bytes": 11187}, + "kuehne-nagel": {"name": "Kuehne+Nagel", "category": "Logistics & Mobility", "description": "Kuehne+Nagel global home: white canvas with deep navy #003369 and #002954 bands, action blue #0073e9 buttons (6px radius, 40px tall), SuisseIntlRegular at 18px body and 32px display, mint #08c792 highlights, flat surfaces with photographic cards.", "sha256": "4f19160e2af4674e2c044dbe2263f73631676423f35e829fb4a526d5836d7fb5", "bytes": 10887}, + "kvs-studio": {"name": "KVS Studio", "category": "Agencies & Studios", "description": "KVS Studio (kvs.services) entry screen: black canvas, SF Mono uppercase at 14px and 16px, signal orange #ff5500 labels with black text, a pale #f0f0f0 CRT screen holding a dithered ASCII logo, zero border radius, brace-wrapped {LABELS} and no box shadows.", "sha256": "2f6b17063130971bfbfa428291bec9a53e6d2dbdc3418c29841a53ceac424990", "bytes": 9182}, + "kwi-insurance": {"name": "KWI Insurance Public Company Limited", "category": "Thai Brands", "description": "KWI Insurance English homepage: white canvas, deep navy #0b233f buttons and panels, Kaisei Opti serif with Bai Jamjuree fallback in uppercase, #4c4c4c body ink, pale blue #e5f2ff bands and square 0px-radius buttons.", "sha256": "aa7d0e58be339d87156130acc3bd5d59f094feab4052bce813af7f63cd49c81c", "bytes": 11765}, + "l-i-s-a": {"name": "L.I.S.A. by Locomotive", "category": "Architecture & Interiors", "description": "L.I.S.A. (lisa.locomotive.ca), the Locomotive agency's interactive assistant: a black-on-white interface in HelveticaNowDisplay at 26px, a 3D CRT-headed character as the only imagery, 12-column grid with 20px gutter, a #312DFB menu color and 999px black pill buttons on mobile.", "sha256": "940b7bb59a66e0c397d104bcc528bf362034b1fab24ff77d4f8e3aa4866c90e0", "bytes": 9264}, + "lacrapule-studio": {"name": "LaCrapule Studio", "category": "Portfolio", "description": "LaCrapule Studio (lacrapulestudio.com), a Paris CGI and film studio: full-bleed project photography under white uppercase type, 64px display in a custom bl face with -2.56px tracking, tiny 10.67px to 12.44px sa captions, outlined 3.56px-radius filter chips that invert to white, no shadows.", "sha256": "fc77e56fe58ffd55e9e9ad497abc62a69f0522ce837b1065714c5efb7413ca89", "bytes": 9592}, + "lalamove-thailand": {"name": "Lalamove Thailand", "category": "Thai Brands", "description": "Lalamove Thailand home (lalamove.com/th-th): Roboto at 80px display and 14px body, Lalamove orange #ff671d square-cornered buttons and cards, charcoal #3c3c3b text, pale #f1f3f4 bands, Thai-language copy over orange vehicle photography.", "sha256": "8d0ee1dbcdde2618f95652f3e8bfb3eea4b4eb2fe8b442edf4848a2f6e741449", "bytes": 11439}, + "lama-lama-2": {"name": "Lama Lama", "category": "Retail & E-commerce", "description": "Lama Lama (lamalama.com), an Amsterdam digital agency: near-black #1a1c1c canvas with warm off-white #f9f4eb type, SuisseBPIntl 73px uppercase bold display with -1.46px tracking, Sometype 10px uppercase mono labels, 4px-radius buttons 50px tall, a six-hue palette and no shadows.", "sha256": "c8f2dba70069646f53a774d6b65fb32fc22f043606d8305758e09ea38461c38c", "bytes": 10073}, + "lamborghini": {"name": "Lamborghini", "category": "Automotive", "description": "Automobili Lamborghini's website as measured on lamborghini.com — a square-cornered, uppercase-display system set in the proprietary LamboType (fallbacks Roboto, Helvetica Neue, Arial), with a 120px / 110px display headline, 72px-tall zero-radius buttons, a white canvas alternating with full-bleed near-black photographic bands (#181818, #000000), and a muted gold (#917300) filled button.", "sha256": "96b8f7249e64790ac37f5fd39a2f22666246c5b779ab054af0462d22d75f19ac", "bytes": 25388}, + "land-and-houses": {"name": "Land and Houses", "category": "Thai Brands", "description": "Land and Houses (lh.co.th/en), Thai property developer: navy #003c71 bands and square 48px buttons, gold #b08731 rules, grey #f2f2f2 and white sections, NotoSansThai at weights 200 to 600 with 20px body and 14px nav, 8px-radius photo cards.", "sha256": "aaf979d1391c34736b984f45ad91f6ef82ebbc46fdd0998c11760b54fd255989", "bytes": 10677}, + "land-rover": {"name": "Land Rover (UK site)", "category": "Automotive", "description": "Land Rover UK home (landrover.co.uk): a three-panel full-height model selector (Range Rover, Defender, Discovery) with white square EXPLORE buttons, AvenirNext 10px uppercase labels at 3px tracking, ink #0c121c and slate #4a4f54 text, 0px radius and a dense legal footer.", "sha256": "5bedca879250bcc788227d5317f7115ee68f6adb23022276774e8569784b783f", "bytes": 9874}, + "lando-norris": {"name": "Lando Norris", "category": "Culture & Events", "description": "Lando Norris official site (landonorris.com): dark green #282c20 and cream #f4f4ed with electric lime #d2ff00 buttons (6.4px radius), Brier serif and Mona Sans Variable, 86.67px Brier uppercase headlines at -2.59px tracking, oval and pill shapes, no shadows.", "sha256": "f1a5ce571d5eb74adc9c4968f88e19a3800b7672b46802befbbb1bdc73fae56c", "bytes": 10587}, + "landor": {"name": "Landor", "category": "Agencies & Studios", "description": "Landor brand-consultancy home page measured from landor.com: white canvas with Landor Blue #0e1adf text and panels, a single lime-yellow #ecfd01 pill CTA with black text and 300px radius, and the Landor Sans Beta family at weights 400 and 700.", "sha256": "86e4d5b6223fc8448d252a9cc056e62c387878ef2289a28c6345be98c5000e1d", "bytes": 13190}, + "later": {"name": "Later", "category": "Product & SaaS", "description": "Later's influencer-marketing site: heavy Super X sans Display 900 headlines (74.8279px hero) with Inter Tight body, black #000000 ink on a cream Grid Glow #f8f2ea canvas, Hot Take orange #fe3f00 buttons with square corners and a clipped bottom-right corner, and Viral Crush purple #5124c1 bands.", "sha256": "7afe6b0ede61b56e1c92f1bc3cc4996b5cafadca43eef36c841ff450efea4043", "bytes": 12875}, + "launchdarkly": {"name": "LaunchDarkly", "category": "Developer Tools & IDEs", "description": "LaunchDarkly's runtime-control site: #191919 near-black bands against #f8f8f8 light panels, an acid-lime #ddff46 'Book a demo' button with 12px corners, orange #ff9d29 and blue #405bff product accents, bold headingFont3 64px/700 headlines tracked -3.2px, bodyFont 22px/500 copy and large 24px-radius cards.", "sha256": "1588ed62c22a9a695198ec0549247eab88ca9859108df5bd33b20f3aaf83e84a", "bytes": 13150}, + "layrid": {"name": "Layrid", "category": "Business & Corporate", "description": "Layrid, a '100th Projects' commemorative portfolio site measured live: near-black #080808 canvas, #dcdcdc text, PP Neue Montreal Medium with Noto Sans JP for Japanese, square 0px corners and a black uppercase 12px VIEW MORE button.", "sha256": "66377c4b65a2208579c0dd63141356cc723ec772762ec30d7c424c204b8785fa", "bytes": 9742}, + "lays": {"name": "Lay's", "category": "Food & Beverage", "description": "Lay's US snack site measured live: Lay's yellow #ffda03 canvas, cream #f0ede1 recipe band, red #e61a22 pill actions, flavor-coded product tiles, and the custom Lays and LaysExtraBold families with 16px and 50% rounding.", "sha256": "4ed91cf246aec9612945290874e766ebcff824405113c0cb33f78a31401645ea", "bytes": 10958}, + "lazada-thailand": {"name": "Lazada Thailand", "category": "Thai Brands", "description": "Lazada Thailand marketplace home page measured live: light #f5f5f5 canvas with white modules, Lazada orange #f57224 for actions, NotoSans-Regular text at 12px to 22px, small 2px to 6px radii and dense product grids.", "sha256": "b5141a984496766926f114c81b47dd7bbbff829718abf75ef9862c4460688e5c", "bytes": 12088}, + "le-creuset": {"name": "Le Creuset", "category": "Home & Furniture", "description": "Le Creuset US home page (lecreuset.com), measured — white #ffffff canvas, black #000000 text, square grey #656565 uppercase BUY NOW buttons that hover to #f8f8f8, Taviraj 48px/300 serif display over Nunito Sans 16px/300 body, seasonal #bb480b promo band, navy #051426 feature panel, 0px corners throughout.", "sha256": "01da9c8275dca02c378d7de748ea5390a23e8f25c2597a4986b2ff9eba685f0d", "bytes": 11766}, + "le-monde": {"name": "Le Monde", "category": "News & Publishing", "description": "Le Monde French news home page measured live: white #ffffff canvas, slate #2a303c text, near-black #181a1e masthead, a yellow #ffc700 S'abonner button with 3px radius, The Antiqua B serif headlines and Marr Sans text.", "sha256": "9fdc6ba413934f076c3624e1adb82bb17c6b7e84ed645afc744074225292214b", "bytes": 12249}, + "ledger-brandbook": {"name": "Ledger Brandbook", "category": "Architecture & Interiors", "description": "Ledger Brand Book (brand.ledger.com) measured on its Guidelines page: white canvas with #fbfbfb cards, black text and #0000008c body copy, orange #ff5300 accents, Ledgermono display, Brut Grotesque text, Hmalphamono tags and zero radius.", "sha256": "ee973ac1fbc7a7b35acaad4f6b379976650a8bbb99ae361a8a600003bd6fd360", "bytes": 10662}, + "leica": {"name": "Leica", "category": "Consumer Electronics", "description": "Leica Camera's Drupal-based site (leica_redesign_theme) runs a quiet warm-neutral system: Outfit at 300/400/600 only — 76px/85.12px weight-400 page titles, 54px h2, 18px/28px light body — alternating #f2efeb warm-sand and #ffffff bands with #222222 warm-black ink, #f5f5f5 cards, a #d1d4d3 footer, and 48px warm-black pill buttons (24px radius, 10px 64px) carrying a 12px Leica-red #e20612 dot that turns the whole button red on hover.", "sha256": "73c9de2fe34c223e35863c199d52d3c5040eb77954c5047f783a4f0ad3185bd9", "bytes": 24050}, + "lemlist": {"name": "lemlist", "category": "Product & SaaS", "description": "lemlist (lemlist.com) is an outbound-sales SaaS site: Manrope 600 headlines (56px, -2.24px tracking) over Inter 14–16px UI text, #18181a/#7d7d7d ink on white with #e6e6e6 frames, lemlist blue #316bff, a Mars-orange #d86a33 hero and a #010113 space-navy footer, with 8–10px radii.", "sha256": "5d828e58f4f437afa52ee6130f82cd7cc72958a7e3fc405aa71dc7928ca9c2d0", "bytes": 13235}, + "lemon-squeezy": {"name": "Lemon Squeezy", "category": "Product & SaaS", "description": "Lemon Squeezy pairs an electric purple #5423e7 hero and a yellow #ffc233 announcement bar with Circular Pro Book headlines (80px, -3.2px tracking) and Inter body text in #121217 / #6c6c89, white 40px-radius pill buttons that warm to #ffd266 on hover, and pastel/saturated colour-block feature panels.", "sha256": "39275816fe89734c7cb99660a1f8824ad2414f580cf45cb238d8ac578dd763a4", "bytes": 15541}, + "lenovo": {"name": "Lenovo", "category": "Consumer Electronics", "description": "Lenovo US home page measured live: white canvas with #ededed footer, Lenovo purple #7a126b buttons at 8px radius (hover #4d144a), Montserrat 600 headlines at 56px, Noto Sans body, Lato nav, and the Lenovo red #e1251b logo.", "sha256": "6cead5539d5787cd114466660fa899514ce8c1de3ab3c1253c6927899109ea37", "bytes": 11964}, + "letude-creative-studio": {"name": "L'Étude", "category": "Agencies & Studios", "description": "L'Étude international boutique creative studio site measured live: red #ee382b hero, #9597a7 gray canvas, electric blue #012094 headline text, #151515 labels, and the Indivisible family from 13px uppercase tags to 89.6px statements.", "sha256": "7964e5adf918f300fd340fd8b20283d9647c0c543b9863764b1d0e32402652c2", "bytes": 9948}, + "levels": {"name": "Levels", "category": "Layout & Structure", "description": "Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.", "sha256": "84c9e015136ad981bf1c4c67e9268d489abfac45d31153f6771d7d3549a2fc56", "bytes": 3042}, + "lexus": {"name": "Lexus", "category": "Automotive", "description": "Lexus USA home page measured live: white canvas with black bands, black text, square 0px buttons (white EXPLORE and BUILD at 50px height), the nobel typeface at 300 to 700 weights, gray #adadad and #707070 secondary text and a #b6a171 gold accent.", "sha256": "f5574d52f1c2e88a2e335c625e27e4b5f3f76d65fc867670476f1ef2799afd4c", "bytes": 11277}, + "lg-g": {"name": "LG USA", "category": "Consumer Electronics", "description": "LG Electronics USA (lg.com/us) is a retail storefront on LG Warm Grey #f0ece4 and #e6e1d6, with LGEI Headline 40px headings, LGEI Text 14–20px body, a #ea1917 red pill button (32px radius, soft rgba(27,26,30,0.15) shadow) that inverts to white on hover, and 24px-radius white product cards.", "sha256": "0a0cfbb5f279735badf99e42f5897902d4322d59cafa5e72bff8625d30d55639", "bytes": 13588}, + "lh-bank": {"name": "LH Bank", "category": "Thai Brands", "description": "LH Bank (Land and Houses Bank, Thailand) personal-banking home page measured live: #f1f3f5 canvas, white cards at 15px radius, sky-blue #39a3ce 36px pill-style buttons, #333333 text, and the proprietary LHBankHeader family in three weights.", "sha256": "8e1588a85834f68fcf93ee3af147601aa1cbf4a0d2cb658db12b1b34b5a19d4f", "bytes": 11074}, + "lidar-drone-scanning": {"name": "Aevion Lidar Drone Scanning", "category": "Agencies & Studios", "description": "Aevion Lidar Drone Scanning tech demo by Riotters, measured live: #fdfdfd and white canvas, slate #24363f ink and button, light-weight switzer type up to 240px, protoMono labels, hairline #9fe2ff3d rules and square 0px buttons.", "sha256": "42fef0a60d3f266e10f3385bbca7d1eb67b6ba611940e66e305134f9b6d0bcd5", "bytes": 10554}, + "lidl": {"name": "Lidl", "category": "Retail & E-commerce", "description": "Lidl US home page measured live: white canvas, #353b42 text, Lidl blue #0050aa pill buttons (hover #002466), Lidl yellow #fff000 secondary buttons (hover #ffc400), dark #1e2124 labels and the proprietary LidlFontPro family at 16px, 26px and 29px.", "sha256": "06160cde7860ad8da6a21a01087f24f694264a49f44894ae82090d0055305dce", "bytes": 12462}, + "lightnet": {"name": "Lightnet", "category": "Thai Brands", "description": "Lightnet (cross-border payment infrastructure) design system: Inter at weight 400 with a 60px hero, indigo #29338a gradient fading to aliceblue #f0f8ff, white 50px-radius pill buttons and 30px bordered cards.", "sha256": "976f7f99e0c14a3b5697fdc155a7668bf946a9a4eaf31b4f6ce2d36c44729102", "bytes": 10195}, + "lightning-design": {"name": "Lightning Design System", "category": "Design Systems", "description": "Salesforce's Lightning Design System 2 (SLDS 2) and its default Cosmos theme — white and light-gray surfaces with a single electric-blue accent (#066afe), a system-font UI stack at a 13px base with 600-weight buttons, pill-radius buttons (240px), 8px inputs, 12px cards and 20px containers; the documentation site around it uses Inter and AvantGardeForSalesforce.", "sha256": "36f23c4768a00aabfd3eeb209a3523ae46a79cbd9fb4b57c4e4b17da1384828e", "bytes": 24357}, + "lightship-1": {"name": "Lightship", "category": "Architecture & Interiors", "description": "Lightship (all-electric travel trailers, lightshiprv.com): F37Bolton at weight 400 with tight negative tracking, a warm cream page tone #faf6ef under black ink #000000, a coral accent #fa5c40, 20px and 100px radii, full-bleed photography.", "sha256": "42dbf080de408dd8bb920f5f7d6e289dae824a8d46249ecc1f53b6f2e6552d75", "bytes": 10670}, + "ligne-roset": {"name": "Ligne Roset", "category": "Home & Furniture", "description": "Ligne Roset (French contemporary furniture, ligne-roset.com/en): Gotham display type at light weights 350-450 with negative tracking, ProximaNova body, white canvas #ffffff, near-black #191919 pill buttons with 46px radius, photography-led.", "sha256": "f89c845531a018a680aac1eb202aa923b8be7f814cdeee90a553f9f35aca670d", "bytes": 10563}, + "likova": {"name": "LIKOVA", "category": "Architecture & Interiors", "description": "LIKOVA (Class A Business Center, likova.space): all-uppercase TT Norms Pro at weights 400 and 450, white canvas #ffffff against deep navy #070b20 sections, a single 10px radius, architectural photography with a large wide-tracked wordmark.", "sha256": "2555fabb17927095d882b086e22e38d9737a956b163d547886c0f475d8da0b2f", "bytes": 9167}, + "lime": {"name": "Lime", "category": "Logistics & Mobility", "description": "Lime's homepage on li.me: Poppins at weight 400 only (72px/79.2px 'Ride Green' hero, 40px/56px section heads at -0.2px, 14px/25.2px body), black #000000 ink on a white #ffffff canvas alternating with full-bleed black #000000 bands, and Lime green #00dd00 pill buttons (40px radius, 12px 24px padding, 48px tall, black label) that flip to black with white text on hover. Grey #eeeeee 20px-radius vehicle cards with product cut-outs, darker greens #00b200 and #00ab4e for eyebrows and step titles.", "sha256": "4b9aa6834a9d1e5bc8477ae69941c7071f1895edc54ca9b848a2031e1ca4618a", "bytes": 20748}, + "lindt": {"name": "Lindt", "category": "Food & Beverage", "description": "Lindt Switzerland (lindt.ch/de, Lindt Schokolade seit 1845): Optima display and button type with Roboto body, white canvas #ffffff over a #f2f2f2 page tone, gold #917236 square buttons, grey ink #555555, bright red #e91138 promo labels, product-photo tiles.", "sha256": "4116748151242e340ad51416eeecae6feea4cee6ef5e5410c67624ac052e3cf7", "bytes": 10263}, + "linear-app": {"name": "Linear", "category": "Productivity & SaaS", "description": "Linear's marketing site as measured on linear.app — a near-black canvas (#08090a) with panel surfaces (#0f1011), Inter Variable at its signature 510 weight with tight negative tracking (64px / 64px display, -1.408px), a light pill call to action (#e5e5e6 fill, 9999px radius, 32px tall), hairline borders (#ffffff14), and Berkeley Mono for code and captions.", "sha256": "8e640da10dbd403bf7f6354f6bccffdd617e2710fdc5e11ddd051128cb091c94", "bytes": 22712}, + "lingo": {"name": "Lingo", "category": "Creative & Artistic", "description": "Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.", "sha256": "9d86b1386ecc5d568e5b708b442aa126a6405d94f3b15087b4b75d0c040af4c0", "bytes": 3073}, + "linktree": {"name": "Linktree", "category": "Product & SaaS", "description": "Linktree's homepage stacks saturated full-width colour bands (lime #d2e823, hydrangea blue #2665d6, currant #780016, plum #502274) set in the proprietary Linksans at 800 weight with tight negative tracking, forest-green #254f1a pill buttons (9999px) and soft 32-64px rounded media cards.", "sha256": "9194ae7a2c2e564726961e60dbc1911bb7fbfe8687af88f2608cb0b391a6c361", "bytes": 17188}, + "lit": {"name": "Lit", "category": "Frontend Frameworks", "description": "Lit (lit.dev) uses a Material-3-style token set from its own colors.css: Lit blue #334eff square-cornered (0px) buttons hovering to #4d63ff, #f4f4f4 background with white #ffffff bands, #242424 text, a full-bleed #4d63ff logo band and a #000000 'Explore Lit' band, all in Manrope (16px/27.2px body, 800-weight feature labels) with Roboto Mono for code.", "sha256": "f5d9fa77df1800b95eb302440eb126bc3207d644d70fd355cf324c23b95e3dc0", "bytes": 13069}, + "liveblocks": {"name": "Liveblocks", "category": "Developer Tools & IDEs", "description": "Liveblocks' marketing site is a black #000000 page with warm-grey #918d8d body text, Suisse Intl (suisse 400/500) headlines at 60px/66px with -1.2px tracking, white #ffffff 8px-radius CTAs with black labels, 4px-radius panels outlined by a 1px #272626 ring, and light product-mock cards (#f9fbfd, #fefefe) set into the dark page.", "sha256": "56ace6c1e1b0e7f922b84fa5fde8cbc9d7b84e5fbfe7e3fecaf6dc3b15b40b99", "bytes": 13698}, + "lo2s": {"name": "LO2S", "category": "Portfolio", "description": "LO2S (lo2s.com, live-event visuals studio portfolio): Geist at 10.6667px weight 700 with -0.106667px tracking, near-white #f7fcfe text on full-screen black video, a 9999px pill radius, no buttons, chrome reduced to numbered links.", "sha256": "3df44e7f5b502a3b38adf819659993a096587cb62ef77082a74257eb78b44add", "bytes": 8769}, + "lockheed-martin": {"name": "Lockheed Martin", "category": "Energy & Climate", "description": "Lockheed Martin (lockheedmartin.com): DIN 2014 W01 Light headings with DIN W01 Regular body, white canvas #ffffff and #f2f2f2 bands, square 55px buttons filled corporate blue #0360ae, near-black hero imagery, 0px button radius.", "sha256": "60e6f67df3197d52dc97e50658002686f49c93bd9c533ad20734fe7c88d4eb57", "bytes": 10442}, + "locomotive": {"name": "Locomotive", "category": "Agencies & Studios", "description": "Locomotive, the Montreal digital-first design agency, runs a strictly black #000000 on white #ffffff site with no rounded corners (0px everywhere), 2px black rules, PP Locomotive New at 70px/400 for display and Helvetica Now Display at 26px/400 for nearly all other text, plus a #312dfb full-screen menu colour declared in its CSS.", "sha256": "b0650491b7b470fa874c613ada5c7d3dec6f3cbf75dbfd7c60e802551b729200", "bytes": 13755}, + "loewe": {"name": "LOEWE", "category": "Luxury", "description": "Loewe's international homepage measured at www.loewe.com/int/en/home: white canvas (#ffffff), pure black text (#000000), the proprietary Avus typeface at 14px body and 22px headings, square corners (0px radius), and a mustard accent (#f2ca56) taken from the site's own --lw-* token set.", "sha256": "539c1ad5360581fde952749fee4bc00b7ff849397f889997b0c6a4f8b54be307", "bytes": 9547}, + "logitech": {"name": "Logitech", "category": "Design Systems", "description": "Logitech's US storefront homepage: white canvas with near-black #1b1b1b headlines, grey #707279 body copy, one electric mint #00fdcf (the site's --brand) on 60px-radius pill buttons, Brown bold at 64px with -3% tracking, 12px-radius image cards and product photography; an email-offer modal overlays the first view in the capture.", "sha256": "d120721b85d16f7ac7c8285cf73832b81eb07522c4040f483235fd29d79e26d6", "bytes": 11968}, + "logrocket": {"name": "LogRocket", "category": "Developer Tools & IDEs", "description": "LogRocket's logrocket.com marketing site: white #ffffff canvas framed by star-speckled purple gradient bands (#764abc, #430a6d), near-black #17141b text, vinila display type (62px/400 at -1.86px) over Inter body, white 9999px pill buttons on purple, a black active segmented tab, and 12px-radius cards with 1px translucent ink borders.", "sha256": "cd038587ee2a3199fac09572a62c33859322c7f8b0d566dc4cd10f3139eb2e5e", "bytes": 13043}, + "logseq": {"name": "Logseq", "category": "Productivity & SaaS", "description": "Logseq (logseq.com), \"a privacy-first, open-source knowledge base\": a dark teal site on #01222a and #001419. System ui-sans-serif headlines at 64px/60.8px with +1px tracking that pair a 400 muted-teal phrase with a 600 white phrase, #f3f4f6 text, #0369a1 and #195d6c download buttons with 4px–8px radius, and translucent #002b36 cards.", "sha256": "1a786846a292e35e5e01718be5277f6cb4fce50e49526024f1845a9ed3fd2091", "bytes": 14445}, + "longbow": {"name": "Longbow", "category": "Tech & AI", "description": "Longbow (British hand-built featherweight sports cars, Webflow build at db-longbow.webflow.io): Bebas Neue wordmark, EB Garamond italics, Geist Mono uppercase labels, grey canvas #888c8f, white primary #ffffff, 12px radius, studio car photography.", "sha256": "6f0985457534d30919e8d8b7f6cc655b365b4ff7dff4469d7a1172221c4bbb38", "bytes": 9490}, + "loom": {"name": "Loom", "category": "Productivity & SaaS", "description": "Loom's marketing home (an Atlassian product): white #ffffff canvas with pale blue #e9f2fe sections and footer, Loom blue #1868db pill buttons and banner, near-black #101214 text and dark bands, violet #bf63f3 accents, Charlie Display 700 headlines at 56.5px over Charlie Text body, 9999px pills and 39-66px rounded feature panels.", "sha256": "8366d4cbb35c5828f369ef014345995e01fd5d06dc37d6bf001f7034f358e29c", "bytes": 13030}, + "loops": {"name": "Loops", "category": "Product & SaaS", "description": "Loops (loops.so) is an email platform for SaaS with a warm stone palette: Newsreader 500 serif headlines (44px, -0.88px), Inter 16.8px/28.56px body in #63635e, near-black #21201c pill buttons (40px radius), #fdfdfc/#f9f9f8 canvas, #e9e8e6 hairlines and an oxblood #7d1b0c footer striped in #fc5200 orange.", "sha256": "566cef4fa20ee2d9739fb8b8585c82971a241bad9e2ad1c71d52c6f9a20fa2bb", "bytes": 13161}, + "lottiefiles": {"name": "LottieFiles", "category": "Design & Creative Tools", "description": "LottieFiles animation platform site: DM Sans LF 96px/500 headlines at -4.8px tracking with Inter LF UI text, zinc #09090b ink and #71717b body grey on white and #f4f4f5 bands, teal #019d91 buttons with 12px and 6px corners, 16px-radius cards, a yellow #f0b100 AI band and brand Mint #00ddb3.", "sha256": "08458c03a70518668b5f56a62bc077112b67f43d60010bc2e99669620f73201a", "bytes": 12781}, + "lotuss": {"name": "Lotus's", "category": "Thai Brands", "description": "Lotus's Shop Online (lotuss.com/en, Thai grocery retailer): LotusSmartHL typeface at weights 400-900, white canvas #ffffff, teal #00bcb4 brand header and links, orange-red #f24822 and red #e1221c promo accents, 8px and 18px radii, dense promo-banner grid.", "sha256": "b41b13018a1296e3aca2d0898a0ae559511a1eeb8d3904a0721e1dd49b82b564", "bytes": 9330}, + "louvre": {"name": "Musée du Louvre", "category": "Culture & Events", "description": "Musée du Louvre (louvre.fr/en): a black #000000 museum site with #1a1a1a and white #ffffff sections, uppercase LouvreSerif headings at 48px, Montserrat 600 tracked caps for labels, Roboto for text, and pill-shaped buttons (40.96px radius) in Louvre green #008573 that darken to #0a4f51 on hover.", "sha256": "6053b5ed8fdf9652630d52f9ee44f885eb12441b6c55b9185a3b57f3d1b27d4e", "bytes": 13386}, + "lovable": {"name": "Lovable", "category": "Developer Tools & IDEs", "description": "Lovable's marketing site as measured on lovable.dev — a warm off-white page (#fcfbf8) with charcoal text (#1c1c1c), the Camera Plain Variable typeface (48px / 600 headlines at -1.92px), a near-black 8px-radius \"Get started\" button (#000000e0), 24 to 32px rounded white cards with layered ring shadows, and a saturated blue-to-pink gradient behind the hero prompt box.", "sha256": "c82a726e1d617868171f7cb081396f384d84f0f9f9eb1e258f2c3b0013b2dda2", "bytes": 20536}, + "loxley-pacific": {"name": "Loxley", "category": "Thai Brands", "description": "Loxley Public Company Limited (loxley.co.th/en/home, Thai trading, technology and services group): Montserrat with Noto Sans Thai, white canvas #ffffff, gold #d9a243 pill buttons with 30px radius, navy #26417e links, uppercase 31px headings.", "sha256": "08e3905af8c64fa5cc7afa85adde4d88366baed7ce196682f3f5c36efee22929", "bytes": 10445}, + "lpn": {"name": "LPN Development", "category": "Thai Brands", "description": "LPN Development (L.P.N., lpn.co.th) condominium developer site: DB Helvethaica type with a 50px bold heading and 20px body, #737373 and #333333 grey ink on white and #f5f5f5 bands, a #58c1e9 sky-blue accent, 10px to 18px radii, soft 3px shadows on cards and bright campaign banners above Lumpini project photography.", "sha256": "2b645066a01267844d43a4c079945d0ff5e8a2a4b768099aa3ee51c1e5c9aa94", "bytes": 10131}, + "lucid": {"name": "Lucid", "category": "Productivity & SaaS", "description": "Lucid Software (lucid.co), maker of Lucidchart and Lucidspark: GraphikWide 200 headlines at 64px/64px with a bold #1071e5 blue accent phrase, Graphik 20px/27px body in #282c33, square 0px-radius Cool Grey 100 #282c33 buttons (hover #4c535d), #fafbfc and #f7f4e4 bands, a deep #2f3296 indigo section, and offset 2px 2px 4px card shadows.", "sha256": "8e71db50cbc96424f82c47fc1af08b0caa9f4eb65bcfa113237d2c8cc78ff1d4", "bytes": 15493}, + "lucid-motors": {"name": "Lucid Motors", "category": "Automotive", "description": "Lucid Motors (lucidmotors.com): Lucid Serif VF display at 72px over Lucid Sans VF small caps labels with 2px tracking, near-black canvas #0f0f0f, white 4px-radius buttons, champagne gold #d7be96 accent, full-bleed automotive photography.", "sha256": "08a959f3ef5ac33df17f0ec2aef5a1ef7d88ea27ece0a8a28d56daf56838dc3d", "bytes": 11269}, + "lufthansa": {"name": "Lufthansa", "category": "Airlines", "description": "Lufthansa's web system — LH Deep Blue #05164d (official Pantone 4146, RGB 5/22/77) as header, ink and brand colour on white; LH Yellow #ffad00 (Pantone 2010) reserved for the one functional action, the 'Search flights' button (hover #ffbd32) with deep-blue text; the proprietary LufthansaHead (Bold/Light, fluid sizes ~17.7–46.2px) for headlines over LufthansaText (14/18px); 4px buttons, 8px cards with a blue-tinted rgba(5,22,77,.1) shadow, and maui-* web components.", "sha256": "70635a283c7f5f0097800741d6d8789ccfd9a1ec9e14df2e016d211eec3e6e06", "bytes": 21676}, + "lululemon": {"name": "lululemon", "category": "Fashion & Apparel", "description": "lululemon's US shop: Saans 400/500 on a #ffffff canvas with warm near-black #140f0f ink, 72px and 64px light-weight headlines with -4% tracking, fully rounded 44px pill buttons in #140f0f or the pale #f4f3f2 hero variant, #f9f9f8 subdued surfaces and the #c8102e accent red from the 'zest' design tokens.", "sha256": "8da576cbf87b01cca0446919fea843c5ddbc13f3f70fbbcb2605cc1a01b7ee1d", "bytes": 13713}, + "luminaire-authentik": {"name": "Luminaire Authentik", "category": "Retail & E-commerce", "description": "Luminaire Authentik (luminaireauthentik.com, Canadian custom lighting manufacturer): PP Editorial New serif headings at 53.3333px with DM Sans body, warm sand canvas #e8e0d2, deep brown ink #433c35, terracotta #8c4630 bar, 70px pill buttons, tile and lamp photography.", "sha256": "e9f78a953679babcee767c2c2c0a06cbd5e97fc5e97f276e303d41f2afa564f3", "bytes": 10457}, + "lunch-money": {"name": "Lunch Money", "category": "Fintech & Crypto", "description": "Lunch Money's site: a light #fafafa page set entirely in Avenir (60px/600 headline in #444444, 16px/27.2px body in #343434), a deep teal #2c6a64 pill CTA with a teal glow that darkens to #244f4a, lighter #44958c teal for links and 3px-radius secondary buttons, #fbb700 yellow underline accents, 5px white cards and a mint #eef4f2 footer.", "sha256": "61dff12362772606e6ace20114347e6f0fa17e858b23b5550400cf336d526bd8", "bytes": 13775}, + "lusano": {"name": "Lusano", "category": "Architecture & Interiors", "description": "Lusano (lusano.com, heirloom-quality furniture, Los Angeles): single typeface EB Garamond at 14.6286px weight 400 in roman and italic, off-white canvas #f7f4ef with deep brown ink #4a2214, a five-step brown ladder, 4.57px radius, a pixel-grid infinite gallery.", "sha256": "9c3fc78b1fb6f9553527ed5e7d00589a72c655528013de7646d8051c07e928ce", "bytes": 8928}, + "lush": {"name": "LUSH", "category": "Beauty & Personal Care", "description": "LUSH UK home page (lush.com/uk/en), measured — black #000000 84px header and footer, white #ffffff canvas, full-bleed product photography under curved dark caption bands, Inter 14–18px with a custom 'handwritten' 39.2px display face, white 40px-radius Sign me up! button and 16px-radius #333333 input.", "sha256": "b3662c94397d40672522c0d7bbc2289c7a754727588552f062428b6d34a5766c", "bytes": 11269}, + "luxury": {"name": "Luxury", "category": "Professional & Corporate", "description": "High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.", "sha256": "e7f76af89a7233b000373b5ca00f23b62ab1450c895f664d7d829647ddcde6f0", "bytes": 3043}, + "lxl-creative": {"name": "LxL Creative", "category": "Culture & Events", "description": "LxL Creative is a UK entertainment campaign agency site: warm near-black canvas #27201d, cream ink #fcf2bd, orange #ff5121 accent, Owners Wide uppercase headings with Scribo script and Manrope UI, 12px rounded photography.", "sha256": "572d828b5dcf2179ab7686fb4b5bab542182526f403fcd0bfd3a21db0b1ab7f9", "bytes": 10421}, + "lyft": {"name": "Lyft", "category": "Logistics & Mobility", "description": "Lyft's homepage on lyft.com: a white #ffffff canvas alternating with off-white #f1f0ec bands, deep plum-black #1d0c17 ink, and Lyft's custom Rebel Sans (RebelSansDisplay 600 at 60px/66px for 'The world awaits', RebelSansText 600 at 36px/45px for section heads, 16px/22px body). Primary actions are dark magenta #820076 pills, 48px tall with 48px radius and 0 24px padding, carrying 18px/500 white labels; hot Lyft Pink #ff00bf is kept for the logo. Ride cards use 16px corners and a two-layer hairline shadow.", "sha256": "71944df01730b9cad3f317fcbd2519fec7ee18276d505e5e6a5ba8396a667bd7", "bytes": 20425}, + "m-c-4-0": {"name": "Mallard & Claret", "category": "Agencies & Studios", "description": "Mallard & Claret (M&C) is a London and Brisbane web agency site: coral #fb4d4d hero band, charcoal #262626 ink, FK Grotesk Neue in 400 and 500 with strongly negative tracking, a single 20px pill radius and full-bleed project media.", "sha256": "cd5b78408699148889687a6ba303f51ddc299c4ca472670f785eb40519072db2", "bytes": 10059}, + "mac-cosmetics": {"name": "M·A·C Cosmetics", "category": "Beauty & Personal Care", "description": "M·A·C Cosmetics storefront: achromatic black, white and #f5f5f5 interface, Druk Text uppercase headings with Roboto Mono body, square 0px black ADD TO BAG buttons, round shade swatches and edge-to-edge beauty photography.", "sha256": "dde2a649726fdb9a2374f73cb4b7f52817db5c35f593dc53c2ebe13bca890aa4", "bytes": 10856}, + "madar": {"name": "Madar", "category": "Tech & AI", "description": "Madar logistics platform site: midnight navy canvas #172e64 and indigo #060a3d, white Suisse type at weights 300 and 400, orange accent #fb441a and #ff6340, 5px radius, translucent cyan cards and no shadows.", "sha256": "9c82bbcc2072ff650d373ef9f208f27ef952ef267cb50c7d065f6f22036c1bf3", "bytes": 10080}, + "made-with-gsap-1": {"name": "Made With GSAP", "category": "Tech & AI", "description": "Made With GSAP subscription library of JavaScript motion effects: white hero then near-black #0a0a0b, acid lime #c9fe6e JOIN pill, LayGrotesk headings and PPNeueMontrealMono uppercase labels, 12-column grid and 4px to 25px radii.", "sha256": "5e5347e6dab717ad9c265cba34eeb271eeeb028db38d6372c25219ad409e6782", "bytes": 10597}, + "mae-pranom": {"name": "Maepranom", "category": "Thai Brands", "description": "Maepranom Thai sauces site: warm cream #fff6eb canvas, brand red #c72931 and gradient pills, dark red-brown ink #451611, Chonburi serif headings with DB Helvethaica X body, full-bleed red product chapters and 24px cards.", "sha256": "201714d430d40a924f58bf0f5eb2a23a78e26c8f94c9fcd0eb51ab29a52f9267", "bytes": 10141}, + "maersk": {"name": "Maersk", "category": "Logistics & Mobility", "description": "Maersk (maersk.com), the integrated container-logistics company, builds its site on the Maersk Design System — proprietary Maersk Headline at light 300 weight (50px hero, 40px sections) over Maersk Text 16px/24px, near-black #141414 filled buttons (hover #363636) with a 5px radius and 7px 16px padding, white 8px-radius cards bordered #dbdbdb, link blue #0073ab, the brand sky-blue #42b0d5 as secondary, and full-bleed photography under a dark gradient header.", "sha256": "556aeb20663e0e2a78d5a66104001fc5562103ccbde028e16bd96728fce10d45", "bytes": 28224}, + "mailchimp": {"name": "Mailchimp", "category": "Design Systems", "description": "Mailchimp.com — Cavendish Yellow (#ffe01b) pill buttons ringed in warm near-black (#231e15) on a #f5f5f5 canvas with white 24px-radius cards, Means Web serif display at 64px/400 with -1.2px tracking against Graphik Web sans at 16px, and a dark brown band with yellow-highlighted numbers.", "sha256": "60c8c2d68f33c886cc330ca40bd62701dfb04629d9b43e64fdc55abb3cafedc1", "bytes": 12289}, + "mailru": {"name": "VK Mail.ru", "category": "Design Systems", "description": "The Mail.ru portal is a dense Russian-language news-and-services page on a white canvas with graphite ink #2c2d2e, a vivid VK blue #0077ff for the login and search buttons, blue #0070f0 headline links, soft grey #87898f meta text, 20px-radius feed cards with a faint blue shadow, and the VK Sans Display / MailSans / Arial type stack.", "sha256": "9f80b9ef8a1ca2e94ba91171513eb73d144b92489aba263897c15cf81eef5cf6", "bytes": 14168}, + "major-cineplex": {"name": "Major Cineplex", "category": "Thai Brands", "description": "Major Cineplex Thai cinema booking site: pure black canvas, white DB Gin Siam X type, gold #d2aa5a structure with a gold BUY TICKET bar, hot red #ff283c booking button, 10px posters and 26px metadata pills.", "sha256": "5c8d1164f1348452bb4752429c62dc2c1c465837c2690f7962d10fd506f30206", "bytes": 10927}, + "major-development": {"name": "Major Development PCL.", "category": "Thai Brands", "description": "Major Development PCL. Thai property developer site: white canvas, Tailwind gray ink #4a5565, slate #364153 buttons and status bars, single stidti family at 14px, three-up project cards with 12px radius and minimal 5% shadows.", "sha256": "28fdbf95826ae3ba00759eafcbb5cba4312b0bb9174bb90c252278e06f2bb4ac", "bytes": 9782}, + "make": {"name": "Make", "category": "Productivity & SaaS", "description": "Make (make.com) runs a light, lavender-tinted marketing site set entirely in Satoshi: a 60px/500 display headline with -1.2px tracking in plum #342237, muted plum body copy #69586c on white #ffffff, violet #8f4bd2 'Try it free' buttons with 8px radius that darken to #803bbf on hover, 16px-radius feature cards and 1200px content inside a 1280px frame.", "sha256": "5b34c99fe175554d17f2f3b59a6af9ce3f33a1af6e4425939b37f7b078a69c83", "bytes": 17554}, + "make-it-real-foundation-merch": {"name": "Make It Real Foundation Merch", "category": "Retail & E-commerce", "description": "Make It Real Foundation merch store: ultramarine #2423ad hero and deep navy #02022f story scenes, white extended Benzin type at huge sizes, periwinkle #5857ff pill buttons, fluid viewport-scaled radii and hand-drawn sun and cloud art.", "sha256": "6f9c6b3518a8f0f838c15fc7fb2611c80d07c8275188f723b1a52a23df0bf167", "bytes": 9764}, + "makesend": {"name": "Makesend", "category": "Thai Brands", "description": "Makesend Sameday-Delivery Thai courier site: white canvas, navy #06163a headings, brand orange #f47929 buttons, golden #fcc500 benefit band, Kanit for Thai and Latin, 4px radii and soft low-opacity shadows.", "sha256": "ccafc05427e577394058e778933f00558ebb9b9d60feeb408b9084d60431602c", "bytes": 11365}, + "makro": {"name": "Makro PRO", "category": "Thai Brands", "description": "Makro PRO Thai wholesale online store: white canvas, brand red #e82026 price blocks and banners, gold and burgundy flash-sale panels, Noto Sans Thai at 12px, 8px-radius bordered product cards and round red add buttons.", "sha256": "5390e12980023237889d6faf1b287bc85cfadd7f3e7cc2ca9d1efcfab4397e4f", "bytes": 9828}, + "malaysia-gov": {"name": "MyGovernment", "category": "Design Systems", "description": "MyGovernment (malaysia.gov.my), Malaysia's official government portal, is set in Poppins with a #1b76de blue pill search button, 72px bold hero headlines over a warm photograph, slate #64748b body copy, #f1f5f9 service panels, 80px-radius cards and persona illustrations.", "sha256": "c92576f90be955da239052a66d4463637bc7bf43a7b564aab961f7ed45d70dba", "bytes": 11822}, + "mama": {"name": "Thai President Foods Plc (mama.co.th corporate site)", "category": "Thai Brands", "description": "Corporate site of Thai President Foods, maker of MAMA noodles - warm orange #ff7e00 buttons and headings on a #f5f5f5 canvas with white #ffffff cards at 16px radius, set in the Prompt family (promptregular, promptlight, promptmedium) with Roboto and arial/tahoma fallbacks, 6px button corners and a fixed 1180px content column.", "sha256": "21bc92711730b22d584bdb26510320e5d962db8f04e5c9441d78f644707a8ea3", "bytes": 12435}, + "mammoth-murals": {"name": "Mammoth Murals", "category": "Agencies & Studios", "description": "Mural agency in Birmingham, Alabama - saturated yellow #ffd900 canvas with near-black #120011 ink, cream #fff6e5 sections, oversized uppercase Obviously 800 headlines (149px hero) paired with Suisse Int'l 500 body at 15.5px, 4px radii and pill-bordered nav buttons.", "sha256": "3d4bf436c31367bcd9911f365cce3ab0e646df066f1e944615854609c37bc3a9", "bytes": 12579}, + "manatal": {"name": "Manatal", "category": "Thai Brands", "description": "Manatal AI recruitment software site at manatal.com: Montserrat 54px bold headlines with -1.6px tracking, #145aff 12px-radius buttons in Open Sans 600, pale blue #d4e8ff hero wash, navy #0f1f3d footer, floating screenshot panels with soft shadows.", "sha256": "d210f74e38e3bb17ef3ab5ea005f135d31b74b2116d8418a74abc12008c851cb", "bytes": 10018}, + "manchester-city": {"name": "Manchester City", "category": "Sports & Fitness", "description": "Manchester City (mancity.com) is a white #ffffff club site in the Kippax, Kippax Modern and KippaxCondensed typefaces, with dark-blue #001838 ink, a sky-blue #98c5e9 header, electric-yellow #e6ff00 square BUY TICKETS buttons, #dde6ed neutral panels, uppercase condensed 40px headlines and a #001838 footer.", "sha256": "0abd694a58358f0c7036c6d08f73aba0354ee428dd2d7155c43bbb366389fc13", "bytes": 13493}, + "mandarin-oriental": {"name": "Mandarin Oriental", "category": "Travel & Hospitality", "description": "Luxury hotel group site: white and #f5f5f5 canvas with black #000000 ink, sage #b7cdc2 pill buttons (22px and 28px radii), gold #b59060 utility links, Futura PT headlines in uppercase and AvenirNext LT Pro 14px body, over full-bleed destination photography.", "sha256": "c5e0317e489c4b8aef7885808a68f6317813bf9c469c2f5d253daced82a88817", "bytes": 10585}, + "mandms": {"name": "M&M'S", "category": "Food & Beverage", "description": "M&M'S US shop and brand site: white #ffffff canvas with near-black #040607 ink and brown #5a1f06 labels, pill buttons (light #f3f6fa fill with brown outline, inverting to brown on hover), seasonal saturated card colors on 10px radii, and the custom AllTogether Serif (300/700) and Sans (300/400/700) families.", "sha256": "21b365649dc466500e164251b2048dac9d7dc16ebd411c0a7119f9529a4e1d7a", "bytes": 12178}, + "mantine": {"name": "Mantine", "category": "Frontend Frameworks", "description": "Mantine, the React component library — a white, light-gray surface system with a single blue action color (#228be6, blue shade 6), 8px default radius, system-font UI at 14 to 16px with 600-weight buttons, a 10-step color ramp per hue, and a docs site that sets headlines in Outfit at 450 weight (72px / 79.2px on the home page).", "sha256": "94f70f6f6e153d7f62d021406a988429cdcb998b6a449bf38cb78fa8bc5cb4c2", "bytes": 23094}, + "mantis": {"name": "Mantis", "category": "Portfolio", "description": "Mantis, a New York City experience studio: neutral grey #bdbdbd canvas with #cfcfcf surfaces, near-black #181818 ink, one electric green #00ff00 button with black text and 4px radii, set entirely in Denim (display 85px, -4.25px tracking, weight 500) with Graebenbach Mono declared for body.", "sha256": "2e6daa9647c5c38da1565c22a62d4afa219c7c84ddefeb0a00b8ebc54efb3518", "bytes": 11931}, + "manvsmachine": {"name": "ManvsMachine", "category": "Agencies & Studios", "description": "ManvsMachine (mvsm.com) shows its film and design work as an edge-to-edge mosaic of video tiles on a pale grey #f4f4f4 canvas, with every word in one face, Universus Sans: 36px/400 white project titles (-0.2px tracking) over the footage, 20px/400 #231f20 chrome text, a #656763 secondary grey, square 0px corners and no shadows.", "sha256": "d38b3111f05873f1a7387666553cd4a5226a95a2a913a2a1a9fb9bece00e05db", "bytes": 10837}, + "marie-antoinette": {"name": "Marie Antoinette", "category": "Agencies & Studios", "description": "Marie Antoinette, a Paris communications, PR, influence and events agency: a pure black #000000 canvas with off-white #f3f4f2 type, full-bleed campaign imagery, giant uppercase Arnika serif titles (80px, -3.2px tracking) and Suisse BP Intl 20px sans captions, with every corner square (0px).", "sha256": "a9eedd29e0b518746098ed72e99db4c0f03e6bdbe722bf5310aecc24c65f83ae", "bytes": 10358}, + "mars": {"name": "Mars, Incorporated", "category": "Food & Beverage", "description": "Mars, Incorporated global corporate site: Mars blue #0000a0 headlines and square buttons on white, mint green #00d7b9 and yellow #ffdc00 feature bands, #3c3c3c body copy in the proprietary MarsCentra family (Extrabold 56px display, 16px/28px body) with 8px-radius brand tiles.", "sha256": "1c38a625c7f76d77eecc0dccac49905cc541c63d73d0d827e04e7fb9db145103", "bytes": 10728}, + "marshall": {"name": "Marshall", "category": "Music & Audio", "description": "Marshall (marshall.com US store): black #000000 canvas over full-bleed gig photography, white #ffffff square buttons with black text, #8c8c8c body copy, uppercase NeueHelveticaPaneuropean 800 headlines (56px/56px) and NeueHelvetica 500 body at 18px, every corner square (0px).", "sha256": "ce7c5468d93ceace88f6fb1ab3cd7bada4a48fc62c11c0c1cc6d64a193b5d0a3", "bytes": 10557}, + "marsun-shipyard": {"name": "MARSUN PUBLIC COMPANY LIMITED (Marsun Shipyard)", "category": "Thai Brands", "description": "Marsun, a Thai shipbuilder and ship-repair company: white canvas with navy #004581 headings, footer and hover fills, teal #018abd button fill, #4a4a4a body copy, all set in db_heavent (60px bold display, 24px body), 5px button radius, and ocean-water photography.", "sha256": "d7897dd2fd0bf52fed719361bb36ada5e6397962015ec80a7c080aaae114d0a5", "bytes": 9921}, + "marvell-tile-stone": {"name": "Marvell Tile & Stone", "category": "Architecture & Interiors", "description": "Marvell Tile & Stone, Perth tiling and natural stone artisans: warm stone canvas #e9e4df with #e3ded9 panels, brass-olive #b1a781 and #9b926a type, dark umber #35311f sections, neueMontreal in light 400 at very large sizes (80px and 48px) with negative tracking, and a floating 8px-radius dark nav pill.", "sha256": "8362416dbb7fa36566d1185999ef54a5b813ecc105bd5e81e19e0858215191cb", "bytes": 10662}, + "maserati": {"name": "Maserati", "category": "Luxury", "description": "Maserati global site: a white and near-black #02070d luxury canvas, one saffron-yellow #ffc845 square button (54px tall, 11px uppercase Everett Medium at +1px tracking), giant uppercase Everett Light headlines at 92px with -3.68px tracking, and cinematic full-bleed car video.", "sha256": "7f9538e4fa59834e37548ab80ed1f718b07be62ac4b937aac666e944d09d8481", "bytes": 10144}, + "mass-rapid-transit-authority-of-thailand": {"name": "Mass Rapid Transit Authority of Thailand (MRTA)", "category": "Thai Brands", "description": "Thai metro authority site at mrta.co.th/th: red #d72027 top bar and navy #172655 / #0e215a bands, Prompt 14.4px body, 6px-radius poster news cards on #e6e6e6, white announcements list with navy date badges; intro splash excluded.", "sha256": "4378790cfb8e52fb92948e1bf18774e39ddaf8ae808c942e2ba0d7636f97bbb4", "bytes": 9675}, + "massachusetts-general-hospital": {"name": "Mass General Brigham (Massachusetts General Hospital)", "category": "Healthcare & Wellness", "description": "Massachusetts General Hospital page on the Mass General Brigham site: deep navy #213243 text, mint #8bffcd pill buttons (43.2px radius, hover #00e682), teal #01828e and light-teal #d9f0f2 surfaces, #003a96 links, Roboto Slab 64px headlines over Roboto body at 16px/25.6px.", "sha256": "897f00dc1072f2a69183ba76ce57bfe910e74d69ac00ed23cf8eefd2a4a4a842", "bytes": 12003}, + "mastercard": {"name": "Mastercard", "category": "Fintech & Crypto", "description": "Mastercard's website as measured on mastercard.com — a warm cream canvas (#f3f0ee) with warm near-black ink (#141413), the proprietary \"mccom\" typeface at weights 450 and 500 with negative tracking (64px / 64px display, -1.28px), 20px-radius pill buttons, large stadium-shaped photo cards, and a burnt signal orange (#cf4500) in the Made design tokens.", "sha256": "63a09a65b7c1ccf3f8dfc1b22c6d4dc461e28dbb5e3732938599b0259896d6f9", "bytes": 19522}, + "masterclass": {"name": "MasterClass", "category": "Education", "description": "MasterClass's cinematic dark streaming storefront — a pure black #000000 canvas with white #ffffff Sohne (Klim Söhne) text, crimson #e32652 'Get MasterClass' buttons (hover #d61a46) at 8px radius and 44px height, condensed Sohne Schmal 500 uppercase poster headlines up to 96px, Ivar Display Condensed serif for editorial titles, #272c33 testimonial cards and #222326 / #43454c graphite controls, all driven by --mc-color-* CSS custom properties.", "sha256": "a300029bceed55b136cfaf139b4403d904b7501ed0801e1ce41b9b2737fd3877", "bytes": 33940}, + "material": {"name": "Material Design 3", "category": "Design Systems", "description": "Google's Material Design 3 documentation site (m3.material.io) measured as a product of the Material system itself — a lavender-tinted #fefbff page with #f8f1f6 containers, #6442d6 purple pill buttons 80px tall with 48px radius, Google Sans display type at 88px/475 over Google Sans Text body, 24px-radius cards, and a left icon rail. The underlying system's published baseline tokens (primary #6750a4, Roboto, 28px extra-large corner) are cited from the material-web repository.", "sha256": "ddb6265d1f8aa3e5bbfcf21eacb2df7fe1971fed0e635c5dc8942d8485613e46", "bytes": 21286}, + "material-minimal": {"name": "Material Minimal", "category": "Design Systems", "description": "Material Minimal is MDBootstrap's own refinement of Google Material Design, shown on material-minimal.com as a white canvas with a pale blue-grey wash, Roboto throughout (56px bold display at -1.4px tracking, 16px body), a single cobalt blue primary #3b71ca, pill CTAs with a 160px radius and 12px uppercase labels, and soft layered shadows on 16px-radius cards.", "sha256": "8abba7a41ad662764c146336cf5fe4a176d907c79a0f54f9444515b5b5aa1b63", "bytes": 13330}, + "matichon": {"name": "Matichon Online", "category": "Thai Brands", "description": "Matichon Online (matichon.co.th), Thai news portal measured live: black masthead on a white canvas (#ffffff, ink #111111), one orange accent #fc7a32 on pill chips (25px radius), DB Heavent headlines at 36px weight 700 with Kanit for navigation.", "sha256": "14fdad71a9ce178b4daabbb95eabe45ddf68390ef162d08d13c4880d92968ec2", "bytes": 12742}, + "matichon-publishing-house": {"name": "Matichon Publishing House (MatichonBook.com)", "category": "Thai Brands", "description": "Online bookshop of Matichon Publishing House, measured live: white canvas (#ffffff), red primary #cf212c on square-cornered add-to-cart buttons, sand #fee6a4 background area, Boon Thai typeface with 26px uppercase section headings.", "sha256": "030473033e12efb8f8b659ab65902ce3a3195ec3ff54445c3ed00891bfa9e530", "bytes": 12108}, + "max-mara-jacket-circle": {"name": "Max Mara Jacket Circle", "category": "Fashion & Apparel", "description": "Max Mara Jacket Circle game microsite entry screen, measured live: coral #d45054 field, burgundy #68142b text, cream #ebe1bd note, Libre Baskerville serif with a 78.6666px title and 20px italic body, zero radius and no shadows.", "sha256": "377e5e18482ff1c0bbadcddc2cc2844877bb2474a43b8978816d043fcb70ff7c", "bytes": 9822}, + "max-mara-untamed-heroine": {"name": "Max Mara Untamed Heroine", "category": "Fashion & Apparel", "description": "Max Mara Untamed Heroine story microsite entry screen, measured live: painted sage background (largest area #c6c4b0), cream #ebe1bd type, Libre Baskerville 60px title and 20px italic body with Inter 12px notes, 8px radius.", "sha256": "98091662ef6863f35305b16fb88929ff5ff9cce2767caa296d3132a518e2dceb", "bytes": 10370}, + "max-milkin-portfolio": {"name": "Max Milkin Portfolio", "category": "Portfolio", "description": "Creative frontend developer portfolio measured live: near-black #10120f bands alternating with pale sage #c2cabb, white uppercase RF Dewi at 12px, Bebas Neue wordmark, 40px outlined pill links, no shadows.", "sha256": "50ec5582c9f73b5e98ab4ff3b80d78752c5f29f4ff2418a4038701aa9ef43c9a", "bytes": 10618}, + "maxima-therapy": {"name": "Maxima Therapy", "category": "Culture & Events", "description": "Maxima Therapy, a neurodivergent-support provider, measured live: butter #fff2b7 canvas, orange-red #fd4401 primary, yellow #fdcb40 header, green #00b351 footer, Robuck Rounded 48.1482px headings and ABC Diatype Rounded Plus text.", "sha256": "9c3da12e99f1e698bb728487b61811cfdc6aff62486abcd3849a294391b8deeb", "bytes": 10530}, + "maya-chiangmai": {"name": "MAYA Lifestyle Shopping Center", "category": "Thai Brands", "description": "MAYA Lifestyle Shopping Center, Chiang Mai: warm ivory #f5f3ef canvas, champagne gold #c1ac69 square buttons, Chonburi serif display at 50px with Kanit light body, zero-radius geometry and collage-style category art.", "sha256": "2ab32c99c7076006284e483f2440bbf3c7e32b876b85d440bf1043bcb947c71a", "bytes": 10017}, + "maybelline": {"name": "Maybelline New York", "category": "Beauty & Personal Care", "description": "Maybelline New York home page measured live: black header and footer on a white canvas, brand yellow #ffd000, Neue Helvetica Pro uppercase headlines at 70px, light Helvetica Neue body, 2px-radius outlined buttons, 8px cards.", "sha256": "adc68032ebd6eab12116d8ca6aa48fae1750569b21ef031f6bf162166b2cee9d", "bytes": 10328}, + "mayo-clinic": {"name": "Mayo Clinic", "category": "Healthcare & Wellness", "description": "Mayo Clinic home page: mayo-display serif headlines (76px light hero, 32px and 24px bold), mayo-sans 20px/28px body, #080808 ink on #ffffff, Mayo blue #0057b8 square 52px buttons with #1371d5 hover, #8cc5ff hairlines, a #0d0d33 donations band, #012d61 footer and #e1f0ff legal strip, 8px image cards and capsule search.", "sha256": "eca6ce7f4787d5a6faf4920f05a35e8d12cfcc3ab2bb5cf35a4e4793632e56a2", "bytes": 13202}, + "mazda": {"name": "Mazda USA", "category": "Automotive", "description": "Mazda USA official site measured live: white canvas, near-black #101010 ink, Mazda Type uppercase headings at 35px with 3.5px tracking, white 3px-radius buttons 45px tall, slate #4a5b6e footer.", "sha256": "9567ff7dce7cc84a2f8abcfdda59f60021113c5277dceedda89a0194006b6c50", "bytes": 10724}, + "mazda-thailand": {"name": "Mazda Thailand (Mazda Sales (Thailand) Co., Ltd.)", "category": "Thai Brands", "description": "Mazda Thailand home page measured live: black header and hero, white pill buttons 46px tall that turn burgundy #910a2c on hover, navy #253246 statement band, MazdaType TH at 54px uppercase and 20px Thai body.", "sha256": "14f9887f22584a80eea9c266ff02dc08e7d9f2e3df183cbeef4e32ec3c284833", "bytes": 10988}, + "mbk-center": {"name": "MBK Center", "category": "Thai Brands", "description": "Design language of the MBK Center shopping-mall website: Kanit for all Thai and Latin text, near-black #111111 ink on white, a red-violet #ac1681 action colour with a #e10098 hover, a 4px button radius, and a loud multicolour gradient (gold to orange to magenta to violet to indigo) behind vividly illustrated category tiles.", "sha256": "65f76c41caf427f971698aca98b7d1c1bfdfbe1df3bae0370796e155160c1676", "bytes": 11072}, + "mc-jeans": {"name": "Mc Jeans (mcshop)", "category": "Thai Brands", "description": "Mc Jeans online shop (mcshop.com) measured live: white canvas, near-black #181818 ink, yellow #ffc800 promotion strips, red #fc0009 emphasis, Noto Sans Thai at 24px bold titles, 8px inputs and pill selectors.", "sha256": "f3e86fe9c12828248de7f60455f45b24402b6a56bf967d4df0175e5598a49ef3", "bytes": 9577}, + "mcard-mall": {"name": "M Card", "category": "Thai Brands", "description": "M Card (mcardmall.com) is the loyalty-card site of The Mall Group's shopping complexes: a white page with #1a1a1a black pill buttons that turn red #c9252c on hover, the DBAiryStd type family up to 72px, a charcoal lifestyle band, 10px-radius cards and a bold red campaign hero.", "sha256": "a1bb404184b7ef40357e49de7c683f04150a50025bd3e187cbcdf00725e68244", "bytes": 9808}, + "mccann": {"name": "McCann", "category": "Agencies & Studios", "description": "McCann global advertising network home page measured live: black #000000 and #030303 fields, off-white #fcfcfc text, giant light-grey wordmark, Mccan Headline display type up to 360px with Lato 10px fine print, zero radius, no shadows.", "sha256": "4e44c57718a49ab34b7a43cdf109dcfdf7047248a647561ec7119f9abef692e0", "bytes": 9400}, + "mcdonalds": {"name": "McDonald's", "category": "Food & Beverage", "description": "McDonald's US site: a plain #ffffff canvas with #292929 Speedee text, a single golden #ffbc0d 48px-radius pill CTA with a 1px #c08b00 border (hover #ffcc49), white outline pills bordered #7c7c7c, #006bae underlined links, a #292929 utility bar, 12px-radius promo images and teaser cards with a hairline #cecece border, all set in the proprietary Speedee typeface (400/700, -0.15px tracking).", "sha256": "a86279a04caf66136d6ec97e1cb7e7588541328627b5558b84ede239037a998f", "bytes": 24458}, + "mckinsey": {"name": "McKinsey & Company", "category": "Business & Corporate", "description": "McKinsey & Company (mckinsey.com) sets light-weight McKinsey Sans (300) headlines and a Bower serif hero on Deep Blue #051c2c, with Electric Blue #2251ff square-cornered buttons, white #ffffff content bands, Cyan #00a9f4 hovers and almost no rounding (0px buttons, 2–16px elsewhere).", "sha256": "5cec505856cba29a911c626cf670343eb0f1c8719ee882a35bd9af587a87c136", "bytes": 14334}, + "mclaren": {"name": "McLaren Automotive", "category": "Luxury", "description": "McLaren Automotive global site measured live: white and black bands with #f0f0f0 grey, black 65 percent text, McLaren orange #ff8000 on hover, McLaren Sans Display and Text, sharp 0px corners and 46px white rectangular buttons.", "sha256": "6b8cf90bd8d4171d56d4c415dccc708e1ee1458388c0ab63e171066fb15e2447", "bytes": 11615}, + "mcot-public-company": {"name": "MCOT Public Company Limited (MCOT)", "category": "Thai Brands", "description": "Thai state media group site at mcot.net/www/th: black header with Kanit 18px body and 30px weight 600 headings, channel colour bands in purple #9013fe, blue #3684da and orange #e67b38, a #6506bc button, 16px-radius video cards.", "sha256": "2c9a0978296cdaa1a0b0f1cf0d03cfc0f1c33bcd6f801c234f0dd75cb4534f9c", "bytes": 9674}, + "mea": {"name": "Metropolitan Electricity Authority (MEA)", "category": "Thai Brands", "description": "Metropolitan Electricity Authority portal: white canvas with #f2f2f2 panels, #333333 ink, maroon #862633 tab links, orange #d64300 accents, db_ozone type at 22px/19px, and 20px pill outline buttons.", "sha256": "26c09168db494b2b9de64e7e8ac5627ad5bfeeb44f1a1d1df9cc60267e44430a", "bytes": 10327}, + "medium": {"name": "Medium", "category": "News & Publishing", "description": "Medium's logged-out home is a one-screen editorial poster: a warm off-white #f7f4ed canvas, a gt-super serif headline at 120px/400 with -6.6px tracking, sohne sans text in #242424, near-black #191919 pill buttons, thin black rules and a green ink-print illustration; accent green #1a8917 is declared in its tokens.", "sha256": "597bff3639522d708a0660805be625732411b758095113211423a2577c9dbf6d", "bytes": 9933}, + "medtronic": {"name": "Medtronic", "category": "Healthcare & Wellness", "description": "Medtronic corporate home: white canvas with #f5f5f5 bands, navy #170f5f headings, electric blue #1010eb actions, #1e1e1e dark feature band, AvenirNextWorld at 47px/700 display and 20px body, 10-24px radii and 100px pill search.", "sha256": "438f566324c56bcb82780b8196d20a219d9737c3383cf179b40e6966748bc375", "bytes": 10602}, + "medusmo": {"name": "Medusmo", "category": "Product & SaaS", "description": "Medusmo home: dark #31312f hero canvas turning to #f5f5f5 and #e4e4e4 panels, lime #dafb71 pill CTA, Doumbar uppercase display at 55.98px and 111.96px with negative tracking, Inter 12-15px body, 149px full pills and 11.2px cards.", "sha256": "75c9e1e7058ae0b5301888025c497b28152d31b65e6ca575a6c3f00500fecec4", "bytes": 10966}, + "meech213": {"name": "Meech213", "category": "Fashion & Apparel", "description": "Meech213, the portfolio of photographer and filmmaker Dametreus Ward: warm paper canvas #f5f4f1, pure black ink, articulat-cf 14.1px uppercase nav and Ceraph Roman 35.25px statements, no filled buttons, 9999px pill only.", "sha256": "c540fe17982cb7d4b53f440afd7475b4b39b956ffec3b1394e1d3d3d692ce7e4", "bytes": 9725}, + "meechok-plaza": {"name": "Meechok Plaza", "category": "Thai Brands", "description": "Meechok Plaza Community Mall, Chiang Mai: a Wix-built site with a coral-to-crimson gradient hero, white Poppins display type, crimson #d9385b pill CTAs, navy #03264e text, aerial photography and a coral footer with yellow text.", "sha256": "682586863de3308bf3f33c0d4ce81b948a80d00ce4ea0d5b262579f1da4d0cc4", "bytes": 10104}, + "meer-mohsin": {"name": "Meer Mohsin", "category": "Agencies & Studios", "description": "Meer Mohsin portfolio: pure black #000000 canvas, white text, blood-red #d60407 headline and #990000 secondary red, 170.66px uppercase light-font display, ruthie script at 202.66px, Neue Montreal preloaded, pill radii and a flame-footer.", "sha256": "765b34860f2056ce0108dc8464448f087e4fd909124ba9e9e7b5e05595cdbd1a", "bytes": 9890}, + "mega-bangna": {"name": "Mega Bangna", "category": "Thai Brands", "description": "Mega Bangna (Megabangna, ศูนย์การค้าเมกาบางนา) is the east-Bangkok family shopping centre whose official site at mega-bangna.com uses DB Heavent Rounded Thai type at 50px and 36px in slate #425055 on a white canvas, MyriadPro body copy at 16px, a Mega red #e2211c square-cornered sign-up button, and loud seasonal promotional banners.", "sha256": "55ca518b3b4f1060b4f636239df18391f038ac07aebbb80dde903c5ad166a7f2", "bytes": 10647}, + "meituan": {"name": "Meituan (美团)", "category": "Retail & E-commerce", "description": "Meituan corporate site (meituan.com): canvas #f7f8f9, navy-black ink #111925, brand yellow #ffd100, white 16px-radius news cards, MTTiJ display at 52px/500 and PingFang SC body at 14px, Chinese-first with a soft yellow hero glow.", "sha256": "4ae66b92525c3c9f8d6e71066d2f55fbda9fddcaae3fc7ced3b99f520261ec5a", "bytes": 10502}, + "mekha-cloud": {"name": "Mekha Cloud", "category": "Thai Brands", "description": "Mekha Cloud (mekha.cloud), a Thai cloud provider: pale-blue canvas #eaf1fb with frosted-glass panels, blue #0068d9 gradient pill CTAs, ink #51545b and #17181b, system SF Pro and Noto Sans Thai at 94.72px/740 display and 16px body, 999px pills and 24px cards.", "sha256": "8e6133d7a73dac863712f90f491cd481d28d7ee0c305a814e976ab8954b2f6f0", "bytes": 12417}, + "mercadolibre": {"name": "Mercado Libre", "category": "Design Systems", "description": "Mercado Libre's web presence as measured on mercadolibre.com (a yellow #ffe600 country-picker page with Arial 36px bold and #333333 ink) and on mercadolibre.com.mx (white and #ebebeb marketplace surfaces, Proxima Nova, Andes blue #3483fa action color, 5px buttons, 6px cards, a #ffe600 header).", "sha256": "3d6f9139fd597fe22a00880d7836eb5f6df6e13d488a3546c29179f397ff0540", "bytes": 9527}, + "mercari": {"name": "Mercari", "category": "Design Systems", "description": "Mercari corporate site (about.mercari.com) — a white-canvas Japanese-English editorial layout in near-black #222222 ink with Mercari Red #ff0211 reserved for eyebrow labels, hover states and circular icon buttons, set in Avenir-Black and Avenir-Roman with Yu Gothic fallbacks and MercariSans on mission headings, using 4px, 10px and 34px radii and a pale blue #e4eefa service band.", "sha256": "0a02b3482475ef88091ad007502cff88f7f543c1fb3ee55f7495738c9bb1b2c7", "bytes": 10486}, + "mercedes-benz": {"name": "Mercedes-Benz", "category": "Automotive", "description": "Mercedes-Benz USA homepage (mbusa.com): near-black #0d0d0d header and footer, white #ffffff canvas, #9f9f9f nav labels, a #0078d6 blue button with 2px radius and 48px height, MBCorpoATitleCond 56px headlines over full-bleed car imagery, MBCorpoS 16px for text, and tall dark shopping-tool tiles.", "sha256": "67a674ff849ddf50c84dd92e8a738d581d95d265978103560094e4d426b58140", "bytes": 10500}, + "merck": {"name": "Merck", "category": "Pharma", "description": "Merck corporate home (merck.com, US): white canvas with flat teal #00857c panels and buttons, black ink, grey #747474 body, Invention typeface at 37px/300 display and 16px body, 1px radii, photography of scientists and patients.", "sha256": "fb25c8f6a80262f1ee68e78574b9da17f3f20b3bae736752559fddcd73ca32e0", "bytes": 10175}, + "mercury": {"name": "Mercury", "category": "Banking & Insurance", "description": "Mercury's marketing site is a dark, cinematic business-banking page: an indigo-black canvas (#171721) carrying soft lavender-white ink (#ededf3), one electric indigo action color (#5266eb) on 32px-radius pill buttons, and frosted translucent secondary pills. Type is the custom Arcadia family served as arcadia (UI/body) and arcadiaDisplay (headlines) at unusual variable weights 360, 420 and 480, with slightly positive tracking (0.42px at 28-42px). Cards are #1e1e2a panels with 12px corners and 32px padding; the pricing page flips to a near-white #fbfcfd canvas with #272735 ink.", "sha256": "45676b6c8f340171c4ee2705ea3b191350bfdc672b9ed353bba7818b0d8b94ea", "bytes": 30222}, + "mesh-ds": {"name": "Mesh Design System", "category": "Design Systems", "description": "Mesh is nib Group's design system and its documentation site: a deep forest green (#144a38) used for headlines, links and pill buttons on a sage (#dae6d2), cream (#f5f0d6) and peach (#fedcc6) banded layout, set in the system sans stack at bold 60px with negative tracking, with 8px-radius outlined cards and a lime (#82e578) accent.", "sha256": "b135f1e4d960fb2c23289195db6a5dfb10fe96cc76ee8b36cf370434974dd93a", "bytes": 12538}, + "meta": {"name": "Meta", "category": "E-commerce & Retail", "description": "Meta's corporate \"about\" page (meta.com/about) is a white page with one saturated blue action, #0064e0, on fully rounded 100px pill buttons 44px tall, set in the Optimistic VF variable typeface (48px/500 headline with 0.576px tracking, 18px body) in cool blue-gray inks (#1c2b33, #5d6c7b), with 24px-radius #f8f9fb cards and a full-bleed photographic video hero under a translucent white header.", "sha256": "5c44b333526a1ddcc498d45082d79900ef68bf8a93af6dd02f8bc284edbd57a4", "bytes": 18269}, + "metalab": {"name": "Metalab", "category": "Agencies & Studios", "description": "Metalab's site is a pure-black (#000000) stage with white (#ffffff) type, set in PP Eiko (Pangram Pangram) at ultra-light weight 240 for 88px display lines and Basis Grotesque Pro (Colophon) at 16px/400 for everything else. Actions are translucent-grey 32px pills (#bababa33, 50px radius) that turn transparent with a 1px white outline on hover; the only chroma is the brand purple #584dff carried by a 3D star render.", "sha256": "bf7f4360cf085e87c60b19d9ecc04485a62f945e149057a6c46ed613a3842e19", "bytes": 29818}, + "metamask": {"name": "MetaMask", "category": "Tech & AI", "description": "MetaMask home: black #0a0a0a pill CTA on a white page of saturated feature tiles (purple #190066, peach #ffa680, forest #013330, sky #cce7ff), MMPolyVariable 106.67px display, MMSansVariable and MMEuclidCircularB text, 28-89px radii, dark phone frame.", "sha256": "5c5e6282699fa329013ecf64fd97f43700b24854a12bd71523848713a2b01abf", "bytes": 11674}, + "metlife": {"name": "MetLife", "category": "Banking & Insurance", "description": "MetLife.com home (Global Employee Group Benefits): white canvas with warm #fbfaf8 bands, ink #2d2d2d, deep navy-teal #003652 primary buttons and headings, ivypresto-text serif 68px display with Inter body, 4px buttons, 12px cards and 999px outline pills.", "sha256": "93b3ceda9af7f724d35cf6d2a34ff57835987386f433c91c3f2892b8a06ef05c", "bytes": 10353}, + "metrabyte-datacenter": {"name": "Metrabyte Cloud (เมทราไบต์ คลาวด์)", "category": "Thai Brands", "description": "Metrabyte Cloud (metrabyte.cloud), a Thai VPS and hosting provider: white canvas, brand red #e82331 pill CTAs with a 10px offset shadow, #202736 navy footer, skv Thai-Latin type at 16px body and 36px display, 50px pills and red speech-bubble cards.", "sha256": "31aa752c5fa3539aa6521ab56b642a0661a0d47a4b2356e482fb069174f45b46", "bytes": 10905}, + "metropolis-test-drive": {"name": "Metropolis Test Drive", "category": "Tech & AI", "description": "Metropolis Test Drive (testdrive.metropolis.io): an interactive Metropolis parking walkthrough on a white card over a grey 3D city, #5f59ff indigo square buttons, #1c1c1c ink, TT Hoves at 36px and 47.45px with negative tracking, 4px and 8px radii and 50% pins.", "sha256": "890163050ca1bd5a968a89dda2d4ece4d003d807636fa6bbb7d0769e7de09ea1", "bytes": 10705}, + "mfc-asset-management": {"name": "MFC Asset Management", "category": "Thai Brands", "description": "Thai mutual-fund portal in Kanit 300/400: white #ffffff canvas, #af1217 brand red for links and bands, #911a2a maroon headings, #333333 body text, #f2f3f5 panels, soft low-opacity shadows, 5px-radius cards and #ff0000 negative NAV figures.", "sha256": "8b992fe89e30b662c96925c0dcfb7e3ae13aa3c5798091afa49f020c18b9daf4", "bytes": 9512}, + "mg-thailand": {"name": "MG Cars Thailand", "category": "Thai Brands", "description": "MG Cars Thailand (MG SALES (THAILAND)) home page measured at mgcars.com/th: Thai-language car showroom on a white #ffffff canvas with #000000 ink, brand red #d2232a for underlines and accents, Sukhumvit typeface at 18px body and 40px uppercase section titles, rounded cards (17px), pill and 30px buttons.", "sha256": "de434c91fd2ef3d1ee26901a69b1070bc0556c72ab1ca4c4e9adf092babb871e", "bytes": 13066}, + "mgronline": {"name": "Manager Online (MGR Online)", "category": "Thai Brands", "description": "Manager Online (ผู้จัดการออนไลน์, MGR Online) Thai news portal measured at mgronline.com: dense white and #f1f1f1 canvas, #333333 body ink, #ff0000 red accents, black video bands, C-Font family at 14px body and 25.2px section headings, 10px-radius dark headline cards over photos.", "sha256": "d79e42a5c310d1d6ea5c4032006a9c913f68a8ff149466acc844246419fec783", "bytes": 10443}, + "micro": {"name": "Micro", "category": "Tech & AI", "description": "Micro (micro.so) home page measured: warm off-white #f5f5f5 canvas, near-black warm ink #221f1c, haffer sans at 72px weight 900 mixed with a perfectlyNineties serif accent, 10px-radius dark Sign up button with an inset bottom edge, #fafafa cards at 14px radius with soft layered shadows.", "sha256": "a255983820c99ea56282a8ab477c06510dc720e19547deae8b899c4f2bc73dd2", "bytes": 12029}, + "microsoft-ai": {"name": "Microsoft AI", "category": "Tech & AI", "description": "Microsoft AI (MAI) home page measured: warm cream #fef9ed canvas, brown-grey ink #5d524b, Bradford LL serif at 111.111px with -4.44444px tracking for the Humanist Superintelligence hero, Red Hat Mono labels at 13.3333px, square-cornered pale-tan #fbf0dc model chips, coral-to-peach #fbd3be imagery.", "sha256": "af6a46cade0722be8aec945d0cbecac461febb7ba640842dae8c33618f865801", "bytes": 10952}, + "microsoft-fluent": {"name": "Microsoft", "category": "Design Systems", "description": "microsoft.com home: white header and light-gray sections alternating with full-bleed black product heroes, a Segoe UI Variable text stack at 16px, Aux Mono display headlines at 40px with -1px tracking, Microsoft blue #0078d4 buttons with 8px radius, 24px-radius cards and 16px-radius suggestion chips.", "sha256": "2b8bf96a300e99105aedd48cf0d006d1a715f1e761a94ab09e40a22fcb3b5d97", "bytes": 11763}, + "microsoft-fluentui": {"name": "Microsoft Developer", "category": "Developer Tools & IDEs", "description": "Captured on developer.microsoft.com (the Microsoft Developer home, not the Fluent UI docs): a near-white canvas (#fefefe) fading to pale blue (#f4fafd), navy ink (#17253d) and heading ink (#0e1726), deep Azure-blue pills (#005597) and a Microsoft-blue action (#0078d4), Segoe UI Variable Display at 50px/52px for the H1, 16px Segoe UI Variable Text body, and soft 24px-radius cards over a 200px-radius pill control.", "sha256": "363c149ee806d61466bfbdf6ec8d610ecc3e27253c5a4a75d518655b1fdad2d4", "bytes": 12462}, + "midjourney": {"name": "Midjourney", "category": "AI", "description": "Midjourney's home page: a near-black indigo #06051d canvas under a blue ASCII-text hero, JetBrains Mono 16px/26px body in #cad5e2 with #63b3ed underlined links, DM Sans 16px/500 pill buttons (9999px) each tinted its own hue, and 8px-radius glassy #96c8ff33 image tiles.", "sha256": "508780d378bd58968c48cce31598c0b2e6f0f5f8c1342bbe668d5a7c00923e83", "bytes": 12797}, + "midlife-engineering": {"name": "Midlife Engineering", "category": "Culture & Events", "description": "Midlife Engineering (midlife.engineering) sound-therapy site measured: light grey #ebebeb canvas, #262626 ink, orange #ff611a accent dot and highlight words, PP Neue Montreal Medium at 262.67px with -10.5068px tracking, a dark #141416 hardware-style sampler UI with 32px-radius keys.", "sha256": "f50cd977cb35683344d9f4b520e4547f94b9e6f2c9bddca22049025b09a82821", "bytes": 9966}, + "mikki-sindhunata": {"name": "Mikki Sindhunata", "category": "Culture & Events", "description": "Mikki Sindhunata portfolio (mikkisindhunata.com) measured: full-bleed dark film still over #000000 with #e8e8e8 text, Anton SC uppercase display at 64px, B612 Mono 9.6px uppercase labels, outlined 24px-radius nav buttons 36px tall, pill play control.", "sha256": "2bc5943741797f83eee42a4d02cd599958df72287fe3bb5e62babc245c5f475c", "bytes": 9723}, + "milledollars": {"name": "MilleDollars", "category": "Culture & Events", "description": "MilleDollars (milledollars.fr) creative video bureau home page measured: full-screen film stage with #e0dee1 canvas behind, #181818 ink and #ffffff overlay text, ABCDiatype uppercase at 16px with 8.88889px nav labels, Migra serif for the tagline, no measured radius or shadow.", "sha256": "1040330b32758ab218806789f3974486656b01eda33e693740b12db7dd37987e", "bytes": 9358}, + "mindmarket": {"name": "MindMarket", "category": "Culture & Events", "description": "MindMarket (mindmarket.com) market-research agency home page measured: lime #8ed462 hero over a cream #f5f1e4 page, #2c2e2a ink, blue #2ba0ff accent, Inter weight 500 at 124.16px with -7.4496px tracking, white nav and card panels, 10px-radius outlined Get a quote button, yellow #f5e211 footer.", "sha256": "be3df3c6618787881d2054c98769f1b376cc64062199c7c7fb7b2e5cc224f0ec", "bytes": 10627}, + "mini": {"name": "MINI", "category": "Automotive", "description": "MINI's official homepage (mini.com, measured at /en_MS/home.html): a white canvas (#ffffff) with pure black ink (#000000), a 64px uppercase serif display face (MINIBold, Georgia fallback) over full-bleed photography, MINISansReg 16px for navigation and body, underlined footer links that turn teal #017ea4 on hover, and circular 50% controls.", "sha256": "6390e06728c00998c072977ad3ebcba7224d8a83b8fc742df8a5274bea26f78b", "bytes": 10283}, + "minimal": {"name": "Minimal", "category": "Modern & Minimal", "description": "Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.", "sha256": "70f28c2c184ed4634d1d1ab03a88fd940aca526f4c04603209caf03561d6d6bb", "bytes": 3064}, + "minimax": {"name": "MiniMax", "category": "AI & LLM Platforms", "description": "MiniMax's marketing site pairs a bright sky-blue gradient hero and white sections with Outfit display type (108px/500, -4.32px tracking), DM Sans body at weight 330, and Libre Baskerville serif taglines; actions are black 32px-radius pills 38px tall (#000000 Login) or white-outlined pills on the hero, and model cards sit in frosted #ffffff40 frames over the brand's official orange, purple and cyan gradients.", "sha256": "97d33dd09a48d2b2be1111a9cfa37cf89c65dec8133e42c45752390ef76a165a", "bytes": 18760}, + "ministry-of-commerce": {"name": "Ministry of Commerce (กระทรวงพาณิชย์)", "category": "Thai Brands", "description": "Thai Ministry of Commerce portal (moc.go.th) set in the Prompt typeface on white #ffffff with #000033 ink, deep navy #0a214a bands, #fecb01 yellow pill-tab buttons (5px radius, black text) and #002ab2 blue price-section labels with 10px radius.", "sha256": "82053dec655085cc4490f4a1f92e9e1bb6bece4148330b848fad86e3ec590aa1", "bytes": 10232}, + "ministry-of-education": {"name": "Ministry of Education (กระทรวงศึกษาธิการ)", "category": "Thai Brands", "description": "Thai Ministry of Education portal (moe.go.th) set in the DB Heavent typeface at 18px/500 on a cream #faf3e1 canvas, with a #ffc300 yellow quick-link band, a dark green top utility bar, #2b7dff blue 3px-radius buttons and a 50px-radius pill search field.", "sha256": "5efe0926edf8ab265e2e05b8b8504e5aac9ed4b00614daee06343d2dceede023", "bytes": 10492}, + "ministry-of-energy": {"name": "Ministry of Energy (กระทรวงพลังงาน)", "category": "Thai Brands", "description": "Thai Ministry of Energy portal (energy.go.th) set in the Sukhumvit typeface with a #303030 dark footer, #ffffff page body, #ff5000 orange 6px-radius buttons with white text, #2b2b2a navigation ink and a numbered 01-07 top navigation over hero photography.", "sha256": "cade7a25a4146ef74f1635154306734e44c6beca5efc9b6c68e7ad068b0d43b9", "bytes": 10493}, + "ministry-of-higher-education-science-research-and-innovation": {"name": "Ministry of Higher Education, Science, Research and Innovation (กระทรวงการอุดมศึกษา วิทยาศาสตร์ วิจัยและนวัตกรรม, อว.)", "category": "Thai Brands", "description": "Thai MHESI portal (mhesi.go.th) set in Noto Sans Thai on white #ffffff with black ink, #6d3076 purple 4px-radius buttons with white 14px text, #cd4527 orange-red accents and a #fcb124 yellow-gold top band, with large news photography cards and a #080808 dark band.", "sha256": "2b94b325cd81b0de74d0db19ab932fd0a61b4d79c126439611f235648b4ad97a", "bytes": 11335}, + "ministry-of-labour": {"name": "Ministry of Labour (กระทรวงแรงงาน)", "category": "Thai Brands", "description": "Thai Ministry of Labour portal (mol.go.th) set entirely in the Kanit typeface, with a violet palette built on #9d52da (primary) and #791ec3 (deep purple), white #ffffff canvas, #626262 body ink, square 0px primary buttons and a 4px secondary button, and a dense service-icon grid on a patterned purple band.", "sha256": "2ecf583ff565d70094799a48b1cbd3b52248670637eef46915ab706c0b780d8c", "bytes": 11684}, + "minor-food": {"name": "Minor Food", "category": "Thai Brands", "description": "Minor Food corporate site: a navy #13213c and white editorial layout pairing condensed Manuka headlines at 44px, Newsreader serif body at 18px and Plus Jakarta Sans labels, with a square uppercase FIND OUT MORE button, hairline-bordered news cards and flat depth.", "sha256": "71dfc3875c95afa44acb60cfdea2b527af30a9bd8890ecd4070843a51d31ac30", "bytes": 10455}, + "minor-international": {"name": "Minor International", "category": "Thai Brands", "description": "Minor International (MINT, minor.com/en/home) hospitality and restaurant group site measured: navy #13213c bands and light #fafafa/#f5f3f4 panels, taupe-bronze #7c684a square buttons, gold #a58744 headline accents, Muli at 48px bold uppercase with 1.44px tracking, square corners.", "sha256": "a59d6d07e8470e960865a8fd6b75aaeaa8dc64d6170f496ce43034afc7265bdf", "bytes": 11152}, + "minor-smart-kids": {"name": "Minor Smart Kids", "category": "Thai Brands", "description": "Minor Smart Kids (minorsmartkids.com) is a playful Thai educational-toy and learning-media distributor site: blue #0d62ab and sunshine yellow #febe2c waves, warm black #251f1b text, the Mitr and pslxomyim typefaces up to 100px, and chunky 15px-radius buttons with hard offset shadows.", "sha256": "d57034911f19ce76d8b27f19c8a8db9556eb48b2fbd1b206dedf03f0cad57fba", "bytes": 10951}, + "mintlify": {"name": "Mintlify", "category": "Productivity & SaaS", "description": "Mintlify's marketing site is a white, airy documentation-platform page — near-black ink #08090a on a #ffffff canvas, an arizonaFlare display headline at 50px/400 with -2px tracking over Inter 14–24px body and UI text, flat 4px-radius black buttons, 12px-radius warm-neutral cards (#f9f6f3), and one green accent (#0c8c5e) reserved for links, counters and focus states, with light-green gradient line art behind the hero.", "sha256": "279625855d525ac737d2c4ad0d815226944183389ea5832c9c2ece2451c8d38e", "bytes": 20632}, + "miro": {"name": "Miro", "category": "Design & Creative Tools", "description": "Miro's homepage is a light-gray (#f0f0f0) canvas with dark ink #1c1c1e, a single saturated blue action #3859ff on 8px-radius buttons 40px tall (Noto Sans 16px/600), Roobert PRO Medium headlines at 56px/500 and 40px/400 with -1.2px tracking, floating product UI fragments joined by blue connector lines, and rounded 16-24px cards plus tall photo cards with white statistic overlays.", "sha256": "56d9530aeee3cbb5d8c1773883ee837c980171956ec726ca2451f7f7c50cbe0c", "bytes": 16961}, + "mistral-ai": {"name": "Mistral AI", "category": "AI & LLM Platforms", "description": "Mistral AI's homepage is a warm-cream (#fbfbf8 and #f5f4ef) page ruled into cells by thin #e4e3de lines, with ALTMistral display type at 96px/500 and -1.92px tracking over Inter 16px UI text, square-cornered black buttons (#09090b, 48px tall) beside 6px-radius gray buttons, a dark #151524 testimonial band, and pixel-art illustrations in orange, amber and red blocks echoing the pixel-cat logo.", "sha256": "e027b83a58eaccbd790a65c596bc7abef6de90aa0d9434ae3cc4223e1bf6b52d", "bytes": 16403}, + "mit": {"name": "MIT (Massachusetts Institute of Technology)", "category": "Education", "description": "MIT (mit.edu) home page measured: white and #f7f7f7 canvas, black #000000 ink, MIT Red #750014 top bar with bright red #ff1423 underlines and search button, Neue Haas Grotesk Text 15.96px body and Display 700 headings, 28px news headline, near-square corners.", "sha256": "f99ae7b27109ccd53c1eb98c8a1463c49018672291eceb7cf026e84ad13abbc7", "bytes": 11271}, + "mitsib-leasing": {"name": "Mitsib Leasing", "category": "Thai Brands", "description": "Mitsib Leasing PCL (mitsibleasing.com), a Thai taxi and vehicle finance company on WordPress with the Betheme theme: orange #f36d37 brand bands, near-white canvas #fcfcfc, Prompt body at 300, Athiti navigation, Roboto controls, flat 0px buttons and 2px accent radii.", "sha256": "5947783fa11b0e53ce01b62baf7306ebeec6227f32188b4ae868a6402ac98d0c", "bytes": 12108}, + "mitsubishi-motors-thailand": {"name": "Mitsubishi Motors Thailand", "category": "Thai Brands", "description": "Mitsubishi Motors Thailand (mitsubishi-motors.co.th/en) measured: black and white stage with anthracite #686d71 text, MMC-Bold at 63.008px for hero lines, MMC-Regular 16px body, tracked uppercase 14px outlined buttons with no radius, brand reds #ed0000 and #bd0000 from the site's own variables.", "sha256": "0e97aca8c2257eaafb290c76bf1033713584049612322a124d9d8985b7ef221c", "bytes": 10609}, + "mitsubishi-ufj": {"name": "Mitsubishi UFJ Financial Group (MUFG)", "category": "Banking & Insurance", "description": "Japanese financial-group corporate site in MUFG red #e60000 on white #ffffff with #333333 body ink, set in Hiragino Kaku Gothic Pro / Meiryo at 28px bold h1 and 12px body, near-square corners (2px, 4px) and outlined red buttons.", "sha256": "841fd9af94f7dc7e83dcc5758dc14853a8bddf2567e21e51ddb81dd517818d94", "bytes": 10331}, + "miux-studio": {"name": "MIUX Studio", "category": "Agencies & Studios", "description": "Seattle brand and digital design studio site in warm neutrals: tan #d5c8b0 hero, cream #f7f3ed canvas, sage #b9bdab panels, #333335 ink, one self-hosted sans at weight 400-500 with negative tracking, 42.6667px display and 12px radii.", "sha256": "7d2286135f87e700f0264f32a1a3c3febd32253098c30afd1cfb9fca9f5529da", "bytes": 10384}, + "mixpanel": {"name": "Mixpanel", "category": "Product & SaaS", "description": "Mixpanel's product-analytics site: a #fafafa canvas, gray-10 #1f2023 headlines and pill buttons with 100px radius, 70%-black body text, Garnett Medium 48px/400 headlines tracked -0.96px, ABC Arizona light-italic serif quotes, signature purple #7856ff glows, and deep plum #33001f and forest #00332a feature bands.", "sha256": "2e4d4082620d3b2acfb008cd8e83ac9af5e5f6e63dbcad4cd120cac3bcfaa9e6", "bytes": 12638}, + "mk-real-estate": {"name": "M.K. Real Estate Development", "category": "Thai Brands", "description": "M.K. Real Estate Development (mk.co.th, Thai: เลือกบ้านมั่นคง) home page: psl_kittithada_proregular Thai type in uppercase-tracked 40px headings, a dark #3d3d3d filter bar and #282828 footer, white and #f2f2f2 project sections, a #6d007c purple search button and 30px-rounded promotion tiles over a dark #261229 popup scrim in the capture.", "sha256": "a2f03f9b0ae5d5ca0ae2961da805793e9e369cf0ad102f97b7b7d3cd18d5400a", "bytes": 10409}, + "mk-restaurants": {"name": "MK Restaurants", "category": "Thai Brands", "description": "Thai restaurant-group site (mkrestaurant.com/en) in MK red #ed2e34 pill buttons with 45px radius and green #00a249 accents on white, set in PSL Kanda Pro Bold at 22px with 32px headings, food photography and bilingual Thai/English promo banners.", "sha256": "33f7dd38d9b7e5383a0f82ecd255f4472a72845f109180ad978a8e7a63e7d249", "bytes": 9500}, + "mk1642": {"name": "MK Delivery 1642", "category": "Thai Brands", "description": "MK Online Delivery (mk1642.com) ordering site - a #d00016 deep-red header over white, #ed2e34 red 5px-radius 'Read more' buttons and price chips, #333333 body text, db_helvethaica x55 regular and x75 bold at 26px base, photo-led promotion cards with 10px radius.", "sha256": "3ea5623a6a8027622feda440f2a35fa095dffbb6cf280ba18a8a41de7e9c2fa3", "bytes": 9849}, + "mob-links": {"name": "Moblinks", "category": "Retail & E-commerce", "description": "French streetwear e-commerce site (moblinks.fr) in saturated yellow #ffbf00 and warm cream #fff2df with brown #6b3e28 ink, navy #001976 blocks, set in the Ringold display face at weight 500 with white pill buttons and 26.65px card radius.", "sha256": "391c4792f14f7c18ac20f9be4b164d7962d97b264a27dced5ce59153f3dc4633", "bytes": 10160}, + "mobbin": {"name": "Mobbin", "category": "Design & Creative Tools", "description": "Mobbin's design-reference-library site: one variable family, saans, with 80px/652 headlines and 16px/456 text, near-black #141414 ink and buttons on white, translucent #4040400f grey cards with 32px corners, 9999px pill buttons, a #707070 secondary grey and a #141414 footer — no brand hue.", "sha256": "e5dc263fa047e53f0a9fddffbc6f67c02aadd7d5a0504bd8ca3ea3fc2548f5c9", "bytes": 11611}, + "modern": {"name": "Modern", "category": "Modern & Minimal", "description": "Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.", "sha256": "f3ac67da20238e79f0b63fd90b03aa75d08d1263780602b360b5d2eac215de1f", "bytes": 3064}, + "moderna": {"name": "Moderna", "category": "Pharma", "description": "Moderna corporate site (modernatx.com) in deep blue ink #053f68 on pale blue canvas #f8fdff with a dark teal #083952 footer, Aeonik at 40px bold headings and 18px body, 12px-radius white cards with soft layered shadows and a red #d1343e accent.", "sha256": "8e753a70ba6cd6cb7d57a4f8f7c41be1f207330ac2b1b4926097469590e52f35", "bytes": 10146}, + "moma": {"name": "MoMA", "category": "Culture & Events", "description": "The Museum of Modern Art (moma.org): a white #ffffff canvas with black #000000 type set in the museum's own MoMA Sans at weight 900 with tight negative tracking, square 0px corners everywhere, black buttons, and flat full-width campaign bands in brand green #8fc421, teal #6bdcc5 and blue #00b7f2.", "sha256": "66f17f13732859d7f3582fa11025075d7dc64c54d985f774ed26132133835335", "bytes": 13551}, + "momoney": {"name": "MoMoney, the Museum of Money", "category": "Culture & Events", "description": "Dallas interactive money museum site (museumofmoney.com) in neo-brutalist style: cream #fff5dd canvas, #111111 ink, magenta #b82297 and yellow #f4f242 buttons with hard 4px offset shadows and 0px radius, Archivo Black uppercase headings over Manrope body.", "sha256": "4986f1b256da263f8863d2d840d0ac93ae32e896b132cc787fa6a552a8b4ba01", "bytes": 12239}, + "monarch-money": {"name": "Monarch", "category": "Fintech & Crypto", "description": "Monarch (monarch.com, formerly Monarch Money): a warm cream #fffaec page with white and sand #f3ecd7 panels, ABC Oracle Light 59.68px hero over ABC Otto serif section heads, warm near-black #2a2926 ink, orange #f86713 pill CTAs that deepen to #f35b16, a #e64818 closing band, and Beltram Mono uppercase eyebrows in orange.", "sha256": "68d8e553cb0939bd235881b1c10b2f927667025fbba5ebc4431370b8234f6cb8", "bytes": 15062}, + "moncler": {"name": "Moncler", "category": "Luxury", "description": "Moncler US online shop (moncler.com/en-us): warm off-white #f7f8f3 canvas, black #000000 type and footer, white #ffffff type over dark full-bleed campaign imagery, grey #b2b2b2 secondary text. One family, MonclerGothicWeb at 400/500 — 42px hero, 32px section titles, 14–16px body — with square 0px corners and no shadows.", "sha256": "8d87284a7e00a1e4c670c4d35160bbdb0f975f29faafe65695b070c9f81d3aa5", "bytes": 11303}, + "monday": {"name": "monday.com", "category": "Design Systems", "description": "monday.com's marketing homepage runs on Poppins in regular weight with tight tracking (56px headline at -2.24px), black ink on white and #f3f4f5, a single periwinkle-violet #6161ff for 160px-radius pill buttons that darken to #452aea, warm #f2ede9 panels with 3D agent illustrations, and product-board mockups full of green, orange and pink status cells.", "sha256": "7fa7c11b6a1a1bd2f10ca97584b34c1b8da85d552ad68a905c7ad519d4e4b67a", "bytes": 12472}, + "mondelez": {"name": "Mondelēz International", "category": "Food & Beverage", "description": "Mondelēz International corporate site in brand purple #4f2170 with green #287819 headings on white, set in the custom MDLZ BITE TYPE display face (100px uppercase) over Calibri 21px body, with outlined pill buttons of 40px radius and a brand-logo strip.", "sha256": "b6fda14bc2610d1038fe45208654e05cf98a7035f6a4a27beb2d4566d4ec0b4e", "bytes": 9531}, + "moneybuffalo": {"name": "Money Buffalo", "category": "Thai Brands", "description": "Money Buffalo (moneybuffalo.in.th), a Thai personal-finance explainer site: white canvas, navy #031c52 text, royal blue #1e45ef accent, db admin Thai display type at 52px, 50px pill chips, 10px cream cards and a buffalo mascot in rate and price tables.", "sha256": "b3c5ae5f945518e8324a753554b685a59f287408c6cd99780bd3cf3e46cb45ea", "bytes": 10566}, + "mongodb": {"name": "MongoDB", "category": "Backend, Database & DevOps", "description": "MongoDB homepage system: a teal-black stage (#061621) with cream (#fdfeec) text, one spring-green (#00ed64) button with #001e2b labels and 4px radius, Sohne Condensed 700 uppercase headlines, Sohne 16px body, 12px dark cards with 1px translucent white borders.", "sha256": "1448e9dcd34e7cc057dd438344c8c30c4f3c5ad9eb336dae87650f445fadf85d", "bytes": 15537}, + "monix": {"name": "Monix", "category": "Thai Brands", "description": "Monix (Thai fintech, FINNIX lending app) design system: Rubik headings at 88px weight 500, light grey canvas #f0f2f2, single turquoise action color #40d2d2, near-black #131313 headlines, 6px buttons and 12px shadowed cards.", "sha256": "797287b515b63d8d22598d5e94f7e40a5310e3a98d5e7438e1652353f84404ea", "bytes": 10148}, + "mono": {"name": "Mono", "category": "Modern & Minimal", "description": "Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.", "sha256": "e9f9b45362e23e70c7147003ade1214a83f524b623f5c29ab7174d8eb45ffdd9", "bytes": 3111}, + "monocle": {"name": "Monocle", "category": "News & Publishing", "description": "Monocle's site monocle.com measured live — a white #ffffff newspaper grid in black #000000 Plantin serif (32px lead headlines, 20px story heads, 18px body), Helvetica Neue 13px bold uppercase for utility labels and square yellow #ffc500 SUBSCRIBE / LISTEN LIVE buttons, a #2a2929 radio band, sky-blue #64d5ff city-guide cards with 8px corners, cream #fdfcf3 panels and a black footer.", "sha256": "106b36ea86cf63a079335c899b6ee9f9e8a0f3a48d3f604e75b97920dda5e379", "bytes": 15083}, + "monolog": {"name": "MONOLOG", "category": "Agencies & Studios", "description": "MONOLOG brand and web design studio site (bymonolog.com) in warm grey #e8e8e3 and near-black #080807, with Khteka headings at 131px weight 700 and -3.93px tracking, Suisse Mono captions, 2.4px radii and compact #181715 buttons with an arrow icon.", "sha256": "1af0c7a4dc6ad8adf6dcfa3fb6b5d54e28ff0fc85fd64f46b64364f98da45e7f", "bytes": 11290}, + "monomax": {"name": "Monomax", "category": "Thai Brands", "description": "Monomax (monomax.me) is a Thai streaming service for series, movies, sport and live TV, set on a near-black #121212 canvas with white NotoSansThai text, a single orange #fa4616 action color, 8px-radius buttons and pill-shaped chips.", "sha256": "8de563b8f47dc9949993df5c94a71fe807735e81c54cd1b3cd6c38dcf2d56a83", "bytes": 9746}, + "montblanc": {"name": "Montblanc", "category": "Luxury", "description": "Montblanc's US homepage is a white (#ffffff) and black gallery-style retail page set in the proprietary MontblancType at 14px body and tracked 18px uppercase display, with square 0px black and outlined 48px buttons, grey and cream bands, and product photography as the only colour.", "sha256": "77699414c33ec3f0d7ab097a71c923f43d8ce547983f4f6b0935b3e5d4db068f", "bytes": 10719}, + "montfort": {"name": "Montfort Group", "category": "Product & SaaS", "description": "Montfort Group site (mont-fort.com), a global commodity trading and asset investment company, in glacier blue #2d628c and #81a0bb on white, with wide-tracked uppercase Josefin Sans 62px wordmark (19.84px spacing), Century Gothic body and mountain photography.", "sha256": "50d82746f5c0e573164f72e0a121953c2f95cad4566f0bc8b8ba3c5058ce9c26", "bytes": 10084}, + "monzo": {"name": "Monzo", "category": "Banking & Insurance", "description": "Monzo's marketing system — MonzoSansDisplay at weight 800 for headlines (48.8288px hero, fluid clamp() scale) over MonzoSansText 16px/22.4px body in 60%-alpha deep navy (#09172399), a soft-white #f2f8f3 card canvas on white, deep-navy #091723 pill CTAs (500px radius, 12px 24px) that hover to #2c3a43, Hot Coral #ff4f40 held back for the card and brand moments, 32px card corners and a #112231 footer with 64px top corners.", "sha256": "6dc222f32dace416c73646a8a5b0ba634aa68ebd751d5ac2e8c8aecc873e66c2", "bytes": 33895}, + "more-nutrition": {"name": "More Nutrition", "category": "Food & Beverage", "description": "More Nutrition matcha-and-protein product site (more-nutrition.webflow.io) in sage green #b6cba5 and pale #e8efe4 with forest #335c30 type and light green #90b96d, set in Founders Grotesk Condensed 99.56px uppercase, with tilted white-framed video cards and pill buttons.", "sha256": "151deac9db5fa41fc79e501fc636440a0f51d34d4479bced7b6bf50a759f6fda", "bytes": 10153}, + "morgan-stanley-g": {"name": "Morgan Stanley", "category": "Banking & Insurance", "description": "Morgan Stanley corporate site: proprietary MS Gloriola II semibold headlines (40px, -1.45px tracking) in #333330 over Karla body text, square #187aba buttons with 14px uppercase karlabold labels tracked 1.1px, outlined #187aba variants, #f7f7f7 and #f2f2f2 bands, 10px-radius inputs with a 2px #bdbdbd border and coloured left-edge section rules.", "sha256": "2e96b5cacf28f6ddc313eba7f45eccb481008db243d1118cee0511a84ed33168", "bytes": 13009}, + "morningstar": {"name": "Morningstar", "category": "Design Systems", "description": "Morningstar's site is a dense financial-media front page set in its own Morningstar Intrinsic family (headlines 27.648px at weight 500, body at 300), on white and #f6f5f4 with near-black #1a1918 ink, one blue action (#2364b9, 34px-high buttons with 1px corners), bordered tiles, and green and red market-movement color.", "sha256": "52a38371c3e4643366dedd6b828c250bc01a06e38cc539dd96af01170c476b6a", "bytes": 13016}, + "mosbys-files": {"name": "Mosby's Files", "category": "Architecture & Interiors", "description": "Mosby's Files (mosbyfiles.com), an interactive project on American modernist architecture, on near-black #191919 with stacked file-tab panels in red #d71e1e, blue #1e4bd7, teal #0c7866 and purple, set in Founders Grotesk 127.68px, Signifier serif tabs and IBM Plex Mono body.", "sha256": "5b16da18266c3a4ffc260f7cf4868b3d942ad035c1d0e2cfda8eac0687dbc20e", "bytes": 10042}, + "moto-finance": {"name": "Moto Card", "category": "Tech & AI", "description": "Moto Card (moto-card.com), a members-only metal travel and wealth card, in near-black #080808 with #e1e5e5 silver text and pill buttons (full radius, 52px tall), set in Neue Montreal 500 with 64px uppercase headings and -0.512px tracking.", "sha256": "23996622e33b3836d5838e5b8cc6857e9ea46767d513f7221aaa912e9286546f", "bytes": 10401}, + "mount-sinai": {"name": "Mount Sinai Health System", "category": "Healthcare & Wellness", "description": "Mount Sinai Health System (New York City) home page measured live: Mount Sinai Sans in weights 100 to 900, a cyan #00a6e5 navigation bar, a #0081b2 care band with white buttons labelled in #27a9e1, a magenta #d73e98 hover, square corners and a #3f4246 footer.", "sha256": "268edec0c6ab18021d1bbb9a5c270e0880f6fe028408af8f1a8f9a6213bff9e1", "bytes": 16138}, + "movemax": {"name": "MoveMax", "category": "Thai Brands", "description": "MoveMax (movemax.me) is a Thai transport management software brand, measured live: Kanit type at weights 300 to 700, an orange #f36915 demo button with 8px corners, electric-blue #0016fff0 headings, a #54595f body ink and 26px-radius service cards on white.", "sha256": "55059026f0e96aef9978b7645504ef48e327c4c1b02d96a9181b5d4ebec3fb28", "bytes": 14709}, + "movider": {"name": "Movider", "category": "Thai Brands", "description": "Movider (movider.co) is a bulk SMS and CPaaS messaging gateway, measured live: Poppins with Noto Sans Thai, an accent blue #2fa1fa, a #33b2f6 to #1b45c6 gradient button with 10px corners, navy #1a3454 headings and pale #ebf8ff section fields.", "sha256": "1892c81d8d0b75f1b36ec6a054aafc8d780958251744d0c6f803450b0ee48491", "bytes": 14745}, + "mozilla": {"name": "Mozilla", "category": "Government & Nonprofit", "description": "Mozilla.org's 2024 \"m24\" identity as shipped on mozilla.org — Mozilla Headline (600) display type at 80px with -0.8px tracking over Mozilla Text body copy at 18px, a near-monochrome palette of #000000 ink on #ffffff and full-bleed #161616 off-black bands, the #00d230 pixel-M green, pale pink #fff1f8 and mint #d6ffcd section tints, and square 0px corners on every button, input and panel.", "sha256": "edb15cee8afce9f8a40bab97e26f5548ea1573869b69852a7d05b6c16888bf56", "bytes": 27080}, + "msig-thailand": {"name": "MSIG Insurance (Thailand)", "category": "Thai Brands", "description": "MSIG Insurance (Thailand) English homepage: Ubuntu type with 36px bold navy (#272660) headlines, red (#dd2830) pill buttons at 15px radius with uppercase 14px labels, white cards with 20px radius and hairline borders on a #ebebeb promo band, duotone navy-and-red icons and photographic hero banners.", "sha256": "094d8488721fd03d382619f8f6456cb0d90dd388294dc013051a68148466dd8b", "bytes": 10436}, + "mthai": {"name": "MThai", "category": "Thai Brands", "description": "MThai is a Thai lifestyle, horoscope and lottery content portal with the tagline 'เชื่อในสิ่งที่ทำ ทำในสิ่งที่เชื่อ'. It is built on a light-grey #f2f2f2 canvas with white cards, deep indigo-black #110f27 text, a vivid orange #f1630d brand colour used for headlines, borders and the sign-up button, Noto Sans Thai at 16px, and 4px corners.", "sha256": "044b7f871ac14aa4c3a7679ffe59b9e1f008df479c7155f21a39455cfe812a60", "bytes": 10218}, + "mu-space": {"name": "mu Space Corp", "category": "Thai Brands", "description": "mu Space Corp (muspacecorp.com), a Thai satellite and space technology company, measured live: a pure black #000000 canvas, white Montserrat type with wide letter-spacing, translucent pill buttons with 25px and 30px radii, and a #0a0a0a header and footer.", "sha256": "fe3bddad82ceb4096c9f9710a7f906f611179e96bdde531b21fa4765571e94de", "bytes": 13204}, + "muang-thai-insurance": {"name": "Muang Thai Insurance", "category": "Thai Brands", "description": "Muang Thai Insurance (เมืองไทยประกันภัย) Thai homepage: DBHeavent type at 28px/600 headings and 16.1px body, deep teal-navy ink (#154d71), sky-blue primary (#3c83bb) on 40px-radius buttons, pale blue panels (#d6f1ff) on a #f0f2f5 page, white 11.9px-radius product cards with soft shadows.", "sha256": "82ea217252d6b1ae243f1954f7a5d1e39987a11c1901ba7f7eb279ae9b9ce01f", "bytes": 10485}, + "muang-thai-life": {"name": "Muang Thai Life Assurance", "category": "Thai Brands", "description": "Muang Thai Life Assurance (MTL), measured live on its English home page: the proprietary Muangthai Life typeface at 400, 600 and 700, a magenta #ec008c brand accent with #ff0090 hover, a #4a4a4a ink, grey #d9d9d9 and #f1f1f1 buttons, bordered 12px product cards and a #212b36 footer.", "sha256": "9dc84be998580b65bff305fcd8c4bbe108e1bca1bd29141fe4303d29ddede30c", "bytes": 14129}, + "muangthai-capital": {"name": "Muangthai Capital (เมืองไทย แคปปิตอล)", "category": "Thai Brands", "description": "Muangthai Capital English homepage: white canvas, sky-blue #0098dc primary and navigation bar, yellow #fff03d accents, #4f4f4f body ink, the custom Muangthaicap Modern and MuangthaicapText fonts and 5px-radius buttons.", "sha256": "94121ea90e29a7c8249cea67d537c2fa60a57384035000e81a756532bf5b30f8", "bytes": 14282}, + "mui": {"name": "Material UI", "category": "Frontend Frameworks", "description": "Material UI (MUI): website accent #0073e6 on white, General Sans 600 headings at 56px, IBM Plex Sans body, 10px site buttons, plus the library default theme measured on docs demos: #1976d2 contained buttons with 4px radius, Roboto 14px uppercase labels, 56px text fields.", "sha256": "9a10b4fd4634b1538ef6ed7a9e4f4bf61b3bf5f789cf7fb7eb864f1a3740edbe", "bytes": 18204}, + "muji": {"name": "MUJI", "category": "Home & Furniture", "description": "MUJI's US store (muji.us) is a white #ffffff storefront with #363636 / #4d4d4d grey text, all headings and buttons in Roboto Condensed 700 (30px/36px slide titles with 0.6px tracking, 15.75px button labels), Roboto 400 body at 14px, solid black #000000 3px-radius buttons that hover to #333333, and MUJI's burgundy #7f0019 on the rewards bar, links and bundle button with a #6a2230 announcement bar.", "sha256": "c2cef1c52c6449f1e76efd524c8fd7584d2dcb8399ef41c48fcd63c7f963cf99", "bytes": 27802}, + "munich-re": {"name": "Munich Re", "category": "Banking & Insurance", "description": "Munich Re (munichre.com) home page measured live: the proprietary MunichRENeue typeface in weights 200, 400 and 700, a deep navy #0f1e32 canvas with white text, a #21377c button hover, square corners and a hairline #6d767c, with photographic hero slides and no card shadows.", "sha256": "b42fdd5ba4c24b87893715191bfc028278a31e7d279befcd724e8c9a06488b5a", "bytes": 13516}, + "mural": {"name": "Mural", "category": "Productivity & SaaS", "description": "Mural's mural.co marketing site: white #ffffff canvas with a black #000000 hero, light STK Bureau serif headlines (80px, -4px tracking) over ABC Social sans body at weight 300, jade #00c27a 8px-radius CTAs with black text, 16px-radius cards, and the official multicolor brand palette (Mural Red #ff4b4b, Blue #5887ff, Yellow #ffaa00, Green #00843f, Pink #fc83ff).", "sha256": "8d85df877ff4a520987003ddea1b35e1c8e82fead7abbeb4c77ce6f24a2f918d", "bytes": 12946}, + "mutual-of-omaha": {"name": "Mutual of Omaha", "category": "Design Systems", "description": "Mutual of Omaha's website sets Source Sans Pro at 18px body with a 0.36px tracking, one action blue (#105fa8) on white and #f7f7f7 surfaces, a dark teal (#03746e) accent, 6px buttons and 8px cards. Hero photography of real older couples sits under a translucent black nav, and cards are white with a 1px #e5e5e5 border.", "sha256": "27a85ab4c0d7d91b979e34c47d6c79efdfe8fdd6fdcf4e166dd4a0274254be31", "bytes": 14347}, + "muuto": {"name": "Muuto", "category": "Home & Furniture", "description": "Muuto (muuto.com), the Scandinavian furniture brand, measured live: EuclidFlex headlines up to 170px with tight negative tracking, Spectral serif body text, a white canvas with a brown #4f3d3a hero, story cards in #2c4c45, #22283e and #620303, square corners and no shadows.", "sha256": "e7b65db021cb1466bd2b9cf706b83b97db7d444598181a78e4e0e674fea2f51d", "bytes": 12956}, + "muvmi": {"name": "MuvMi", "category": "Thai Brands", "description": "MuvMi (muvmi.co), a Thai electric tuk-tuk ride-pooling service, measured live: the FC-Iconic Thai typeface at 400 and 700, a saturated blue #0d57e2 header and buttons, a pale blue #0d57e21a tint behind the hero, near-black #111827 text, square buttons and 8px image corners.", "sha256": "59777f269394aa2b1dcd5f97ae6fc0b56aba12bce5957456cca3552b25286175", "bytes": 14328}, + "muzik-move-company-limited": {"name": "Muzik Move", "category": "Thai Brands", "description": "Muzik Move (muzikmove.co.th), a Thai music label and entertainment company, measured live: AttenNew and DindanMai type at weights up to 900 in uppercase, a canary yellow #ffe600 field, black #000000 pill buttons, #262424 ink and white release cards with 18px corners and soft 25px shadows.", "sha256": "8145d58c479ec0a1e686ed72fc532754ddc1e6d433af3a80e12797e84e780fcf", "bytes": 11934}, + "mycloudfulfillment": {"name": "MyCloud Fulfillment", "category": "Thai Brands", "description": "MyCloud Fulfillment (Thai e-commerce warehouse service) design system: IBM Plex Sans Thai and Lexend type, 48px hero, teal #00aaad pill buttons and footer, charcoal #1e1e1e band, mint #f2fefa sections and 20px cards.", "sha256": "5498c3177a97e4039c11fd4736ebba916b821caf4f817b894ec65be940f269bf", "bytes": 11159}, + "myhealthprac": {"name": "MyHealthPrac", "category": "Product & SaaS", "description": "MyHealthPrac (myhealthprac.com), a functional-medicine health analytics product, measured live: Neue Montreal at weight 500 with negative tracking, a warm grey #f1f1f1 canvas, #1f1f1f ink, a near-black #010101 pill button with a round arrow, a #c5b197 biege accent and full-bleed portrait photography.", "sha256": "f327c8ef77c61573cca97465ed6d923a1c46df0484c67b71b0bae7a3f3c2f0b5", "bytes": 13547}, + "mymind": {"name": "mymind", "category": "Productivity & SaaS", "description": "mymind.com home: near-white #f9fafc / #ffffff canvas haloed by an orange-pink gradient, oversized 128px headlines with -8.4px tracking, Louize serif and Inter/Nunito sans text in #4a5465, signal orange #ff5924 for pill buttons and a full-bleed band, pastel 16px-radius feature cards (#f3f0e7, #e5eaf2, #dde9d3) and 100px-radius pills.", "sha256": "308537f5cbb3e893302187d9e3025e17b67639c986fee292d437d848f325622f", "bytes": 11298}, + "n26": {"name": "N26", "category": "Banking & Insurance", "description": "N26's marketing system — N26-Extended at weight 400 for display (80px/88px hero, 58px/64px section heads) over the N26 house sans at 16px/24px with +0.3px tracking in #1b1b1b ink, deep-teal #003b39 CTAs with 24px radius and 12px 24px padding that hover to #045e58, sand-tinted #c6b29f40 secondary buttons, a #faf8f5 cream header, 40px-radius media modules on white and a #ede7e0 footer over a #003b39 legal bar.", "sha256": "6205925db8e7b050bad69bfdafb401d56913fa5ced8300d68bc3921c15130ae6", "bytes": 28377}, + "naiin": {"name": "Naiin (นายอินทร์)", "category": "Thai Brands", "description": "Naiin, the Thai online bookstore: a blue-and-teal storefront set entirely in Noto Sans Thai, with a brand blue (#0059af) header, a teal (#1eb2aa) 300px-radius login pill, cream (#fff4e8) shelf bands and dense book-cover carousels.", "sha256": "709c11c76877a0e914c1c8c1e18db3067e6b816f40c22105aa4a0e10473f823b", "bytes": 12745}, + "naive-ui": {"name": "Naive UI", "category": "Frontend Frameworks", "description": "Naive UI (Vue 3): white canvas with one green #18a058 primary, three-step gray text (#1f2225, #333639, #767c82), 3px radii, v-sans body and Metropolis 80px hero wordmark, medium controls 34px and large 40px, flat 1px-bordered surfaces.", "sha256": "e863ca6a8dcfd42ed4cbd5ae6ac23c5a5f5a05bd0be7f93221301343a75d5a1c", "bytes": 14039}, + "nanmee-books": {"name": "Nanmeebooks", "category": "Thai Brands", "description": "Nanmeebooks (nanmeebooks.com), the online shop of Thai publisher Nanmee Books, measured live: IBM Plex Sans Thai at weights 400 to 700, a #dc3545 red for action buttons and hover, #f92e37 price and discount red, #333333 ink, 4px controls and 30px pill discount badges.", "sha256": "8fb17e532cadc823f7935f89ce8fd13439816fabf9a94681eb2075ae30a156de", "bytes": 12050}, + "nanuanchun": {"name": "Nanuanchun", "category": "Thai Brands", "description": "Site of Nanuanchun, an Isan rice farm, homestead and sato rice wine maker, in Fahkwang uppercase headlines (54.4px, weight 900) and BaiJamjuree 300 body on white with deep green #093c23 square buttons, lime #d3dc66, forest #0a2a19 bands and a #ebd319 yellow accent.", "sha256": "ce3e72930443f4940492e50dc476e2da91fc133d9fca55c090cb0d42bd0f8de3", "bytes": 11328}, + "napasai": {"name": "Napasai Samui Residence", "category": "Thai Brands", "description": "Napasai Samui Residence (napasaisamui.com), a beachfront villa retreat on Koh Samui, measured live: the custom Times Sans Serif face at weight 300 in tracked uppercase, a warm #f8f8f8 canvas, #4a4a4a text, square black #000000 buttons and a full-bleed pool photograph hero.", "sha256": "5e2da6281c76764145a080159c319df4f43fbc3c9deed6a2ccb7e70490766901", "bytes": 13913}, + "narinthorn": {"name": "Narinthorn Co.,Ltd.", "category": "Thai Brands", "description": "Single-screen corporate entry page for Narinthorn Co.,Ltd., a Bangkok luxury residences, hotels and resorts developer: Arial 16px/32px text centred over a full-bleed bay photograph, link green #008000, crimson #8c191c tagline, white #ffffff title, every radius 0px.", "sha256": "14d5230abb4da9af7a9690bf59e8e3ede4932e4c218815437600ee7b2549c472", "bytes": 12629}, + "nasa": {"name": "NASA", "category": "Design Systems", "description": "NASA's public website (nasa.gov) in October 2026: a carbon-black #000000 shell with white Inter 700 headlines (72px/75.6px hero), Public Sans Web 16px body on #1b1b1b ink, DM Mono eyebrow labels at 11.2px with 3.5px tracking, a single red #d83933 4px-radius button, and full-bleed mission and deep-space imagery under dark card overlays.", "sha256": "46b74bdea20c71a4200fcc863bb21fd5fa4d74aed85f0c0a6d9280bc186b1d9e", "bytes": 15274}, + "nation-tv": {"name": "Nation TV", "category": "Thai Brands", "description": "Thai news channel site nationtv.tv: white canvas, Nation blue #0929c9 for headings, nav rule and links, red #e53935 for the popular-news column, GraphikTh and GraphikThBold at 18px/28px with Sarabun in the footer, radii from 4px to 30px, 1280px desktop.", "sha256": "0dc4c65115836db07684afae82076a2763eece4dcf2923a6452f7586163c7c65", "bytes": 12478}, + "national-electronics-and-computer-technology-center": {"name": "NECTEC (National Electronics and Computer Technology Center)", "category": "Thai Brands", "description": "Thai national research center site nectec.or.th: white canvas, maroon #760204 section titles and #840000 footer, link blue #1e73be, Kanit at 15px weight 200 body and 25px display, soft cards #7d7c7c1a with a 0 0 10px 15% shadow and 3px radius.", "sha256": "21af8633420435616422f2639640533a02224cca25cde9671bcc3cf8b44218fd", "bytes": 11111}, + "national-geographic": {"name": "National Geographic", "category": "News & Publishing", "description": "National Geographic's home page nationalgeographic.com measured live — a black #000000 magazine wall with white #ffffff type, logo yellow #ffcc00 for square Subscribe / WATCH NOW buttons, a #f2f2f2 Society band, and two in-house families: GeoBrand (Bold, uppercase, +3px tracking for 32px section heads) and GeoEdit (Medium 38px story headlines, Regular 12px legal), with 0px corners everywhere.", "sha256": "bed5d68cfed2a27f496b096498699f6d5d23a5d65ccfcea0e473eb9486bade46", "bytes": 12908}, + "national-health-security-office": {"name": "National Health Security Office (สำนักงานหลักประกันสุขภาพแห่งชาติ, สปสช.)", "category": "Thai Brands", "description": "Thai NHSO portal (nhso.go.th) set in Prompt on white #ffffff with #262626 ink, a blue header #2b7cdb, pale blue #ebf4ff and #e0eeff service bands, #3366ff buttons with white text at 4px radius, and a dark navy #001640 accessibility bar.", "sha256": "27157ecff720dcad4789363c20c9c56eff448d6372c2a112f5d9dec0c24c6089", "bytes": 10605}, + "national-university-of-singapore": {"name": "National University of Singapore", "category": "Education", "description": "NUS homepage nus.edu.sg: white canvas with Roboto at weights 200 to 400, NUS orange #ef7c00 for hover and accents, navy #003062 footer, blue panel #376ba5, 40px light headings, 14px body, radii 5px and 6px, soft 0 0 10px 16% card shadow.", "sha256": "fbe4cbaa80cd6fe4fbfb172d8687d8805ce4ff5aa84281ef6f951da5eaa9f826", "bytes": 9905}, + "national-vaccine-institute": {"name": "National Vaccine Institute (สถาบันวัคซีนแห่งชาติ, สวช.)", "category": "Thai Brands", "description": "NVI portal (nvi.go.th) set in Kanit on white with #1e73be blue navigation, #3723bb purple outlined tile buttons (30px weight 500, 10px radius, 1px border), small #dd3333 red news-tag buttons, a #1e3050 navy footer and #f7f8f9 page body.", "sha256": "40d123daed6dbf8a8e227c58fff3383d4d6bed50da008b14fddf690877fb2ffe", "bytes": 10754}, + "native": {"name": "Native", "category": "Architecture & Interiors", "description": "native.inc, the specialist insurance broker for crypto and emerging technologies: full-bleed colour blocks (orange #ff4d00, lime #dcf251, purple #6f57ff, pink #ffcbf1, charcoal #343434), Affairs serif display with Plain sans body, 4px radii, flat surfaces.", "sha256": "a6106a7be649e63498a03e5c6cf3fc46625331d16fb0ad1e1ee4d9dc598a3497", "bytes": 10380}, + "native-instruments": {"name": "Native Instruments", "category": "Music & Audio", "description": "Native Instruments' storefront is a quiet near-black-on-white system set in Graphik (Commercial Type) at 400/500/600 — ink and primary #161819 on canvas #ffffff, light #f8f9fa buttons over full-bleed product art, 4px radii on buttons, inputs and cards, 9999px category chips on #eef0f2, sale red #ff4848 and benefit green #12b262 as the only hues.", "sha256": "9e34d0440fe458e7c73b05c592945c452fe26b41ea18f22f269c0be5db518c62", "bytes": 25929}, + "natural-fruit": {"name": "Natural Fruit Company", "category": "Thai Brands", "description": "Corporate site of Natural Fruit Co., Ltd., a Thai pineapple processor in Pranburi, set in Kanit (Regular and Bold) on a white canvas with #1c1c1c ink, a #398e7f teal accent, #4ab9a6 icon teal, a #fad92a yellow band, 5px card radius and a soft grey halo shadow.", "sha256": "ba9bd16b21d5e176d7373106cba204fe3e049d96d8b43c48692f5d5434406646", "bytes": 10484}, + "naughtyduk-c-1": {"name": "NaughtyDuk", "category": "Portfolio", "description": "NaughtyDuk, a digital innovation studio for entertainment brands: pale canvas #f2f2f4, near-black #1e1e1e HUD bars with #ececec text, Neue Haas Display uppercase at 18px weight 700 and PP Supply Mono at 10px, 4px radii, one 800px viewport.", "sha256": "fe1269a58de534171f3916d5f063cf644a2b4819210f32cbf98ac4fcfc6e4afe", "bytes": 8889}, + "navakij": {"name": "The Navakij Insurance Public Company Limited", "category": "Thai Brands", "description": "The Navakij Insurance homepage: navy ink (#223d66) on white, teal-blue (#1694ae) buttons at 10px radius with white text, TradeGothic with the Thai face supermarket as fallback, a charcoal footer band (#1e1e1e), light gray panels (#ebebeb), family photography with a blue duotone wash and a 28px section heading.", "sha256": "d24f0937dee1d5d5eaee5432fd3730983d526588c4ff98bbcde5724f84f0da1e", "bytes": 11334}, + "nba": {"name": "NBA", "category": "Sports & Fitness", "description": "NBA.com as measured — a dense sports-media portal on a light-grey canvas (#f6f6f6) with white content cards, a black 55px top nav and black footer, Knockout Wide uppercase headlines set below 1.0 line-height (36px/28.8px), Roboto for UI and body (14px/16.8px), Roboto Condensed for tables and utility buttons, and a single yellow tint #fbcd44 for the League Pass call to action, all driven by CSS custom properties with light-dark() theming.", "sha256": "89cc02cf3c654c0a4f332d734fbff4da339efa087c05baba4604d55793f112a0", "bytes": 29466}, + "neobrutalism": {"name": "Neobrutalism", "category": "Bold & Expressive", "description": "Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.", "sha256": "f6f9e7021c231dcb42ab647770c5a5ff2df485e06bc582acae44fbb7ebb6583e", "bytes": 3062}, + "neon": {"name": "Neon", "category": "Backend, Database & DevOps", "description": "Neon (neon.com), serverless Postgres for apps and agents, part of Databricks: a black #000000 page with off-white #e4f1eb mint sections, Neon Green #34d59a accents, white #ffffff pill CTAs with #1a1a1a text, #18191b panels, Inter 56px/-2.24px headlines with 18px/27px body, and GeistMono uppercase labels and terminal buttons.", "sha256": "6c455a83e7c42dc4f557cdfc574f062299c430dba9611e4f3a232c999ab9ee3f", "bytes": 15104}, + "neon-rated": {"name": "NEON Rated", "category": "Retail & E-commerce", "description": "NEON Rated film distributor site neonrated.com: full-bleed key-art posters, white header and black #000000 GET TICKETS bar, Girott 700 uppercase at 160px and Focal at 14px, radii 4px and 8px, ink #000000 on #ffffff and #f3f3f3.", "sha256": "bcd8c5f66fc3d3211920f24af1b866e79fe1a74f3f40993bea056a9b6cf8f19a", "bytes": 10070}, + "nerdwallet": {"name": "NerdWallet", "category": "Banking & Insurance", "description": "NerdWallet personal-finance homepage nerdwallet.com: emerald #008254 buttons with white 13px uppercase Gotham labels, deep green hero, cream #fff7ea footer, 52px bold Gotham display, radii 2px to 16px, soft 5% shadows on white cards.", "sha256": "969cc4b7f387a41199cd19adf7b2bddc1473a64e41fdf006dce4f7aebf0deb6e", "bytes": 13086}, + "nespresso": {"name": "Nespresso", "category": "Food & Beverage", "description": "Nespresso USA (nespresso.com/us): warm off-white #faf9f8 and white #ffffff surfaces, near-black #17171a ink and dark bands, a deep green #257a57 pill CTA (hover #1b5b40) and gold #876c43 accents. NespressoLucas in four weights — 48px uppercase/light headings, 30px titles, 16px/24px body — with 999px pill buttons and 8px cards.", "sha256": "709221b2829af3d4c177215f83ce77f06d659cb8e2aea18a99552c10158065d6", "bytes": 11612}, + "netflix": {"name": "Netflix", "category": "Music & Audio", "description": "Netflix Thailand sign-up page netflix.com/th-en: black #000000 canvas, Netflix red #e50914 Get Started button with white 24px Netflix Sans label, 56px bold display, #2d2d2d FAQ bars, radii 2px to 16px, no shadows.", "sha256": "f229c3fd0b0dcdbc58555832fbd27fa31ee61f36e5f17334f4ff5d0d243860bd", "bytes": 9765}, + "netlify": {"name": "Netlify", "category": "Product & SaaS", "description": "Netlify homepage netlify.com: white canvas with a #12181f dark hero, teal #32e6e2 pill buttons (360px radius) with dark labels, Figtree 800 at 64px, Instrument Sans body at 16px, Martian Mono code labels, hover #8efbf7.", "sha256": "f257e6f95962e5f2c078fcae51d96a9ec6b07324775155ea5710a001d0bd0aec", "bytes": 11065}, + "neumorphism": {"name": "Neumorphism", "category": "Morphism & Effects", "description": "Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.", "sha256": "e0dbc739d3ddedcc43e04462a29cedb4ab97ab4fc4c68c7692fbdbf853334863", "bytes": 3112}, + "neverhack": {"name": "NEVERHACK", "category": "Tech & AI", "description": "NEVERHACK sovereign cybersecurity and AI site neverhack.com: white canvas with #f6f7fc tint bands, black #000000 pill buttons, Roobert 400 display at 72px with negative tracking, purple #6b2bea labels, red #dc2626 critical tags, pill and 12px to 22px radii.", "sha256": "9daafc2561ee146a33a46f0cbe3407d6b6189ef02ef9b6544ba9a4a2fb9e0f95", "bytes": 11696}, + "new-balance": {"name": "New Balance", "category": "Sports & Fitness", "description": "New Balance US store: ITC Garamond W01 light 60px headlines over Proxima Nova W01 300 body text, a #151415 top bar and 54px #151415 'Shop' buttons with 2px corners and white 14px labels, #000000 footer, #cf0a2c NB red reserved for the logo, #b36205 merchandising labels and a #fafafa legal strip.", "sha256": "b15f04d3615a0b3b9238882f33a18d19672d2659d0daa5302ce614caa2f69a86", "bytes": 13340}, + "new-genre-studio": {"name": "New Genre", "category": "Portfolio", "description": "New Genre studio site newgenre.studio: serrif serif display at 64px over a dawn-sky gradient, saans sans body at 16px and weight 450, ink #0c1018, slate #535a65, translucent white pill buttons, 16px tile radii and #ffffff0f logo tiles.", "sha256": "bade17c9b3abbf193115270625d6e786f9d77f964f512982826ef9b89fc48eb1", "bytes": 10323}, + "newskit": {"name": "NewsKit", "category": "Design Systems", "description": "NewsKit is News UK's open-source design system; its docs site uses Poppins 700 headings (64px/72px hero) with DM Sans body, a cobalt #3358cc action color (#254cac hover) on white, a blue-grey ink #2e3f54, pale #ecf1ff and #f0f1f3 surfaces, 8px-radius buttons, and 20rem pill controls.", "sha256": "6e3ed3f7e36ceb3c71d290ff972bed8ffba94849f3242fb73d62e9f041f86ad6", "bytes": 10982}, + "nexgenet": {"name": "NexGeNet", "category": "Thai Brands", "description": "NexGeNet (International Gateway Provider, Crystal Shine Group) publishes a single-page Google Sites home: a dark photographic hero with a 60px white Roboto 500 title, gold #a38500 section headings in Roboto 700 24px, Arial 20px body copy in #202124 on a white #ffffff canvas, and radii of 10px, 18px and 24px on imagery.", "sha256": "2de0e084614595e14199ba57415b5ed0a02710f7bdc147204f82a7436e8664b9", "bytes": 9883}, + "next-capital": {"name": "Next Capital", "category": "Thai Brands", "description": "Next Capital (nextcapital.co.th), a Thai motorcycle hire-purchase lender: white canvas #ffffff, ink #333333, yellow action #fdb813, footer and band blue #20409a, Seven_02 with Montserrat fallback, flat 0px buttons, 3px and 30px radii elsewhere.", "sha256": "aeae5207ac047ba546e31cd3e18417236940092fb1d658289d91b0266c48fbf4", "bytes": 11007}, + "nextera-energy": {"name": "NextEra Energy", "category": "Energy & Climate", "description": "NextEra Energy's corporate home page: all-Arial type with uppercase bold 36px hero and 32px section headings, #404040 and #000000 text on #ffffff and #f2f2f2 bands, a #0073a8 link blue, a #0c2739 navy notice band and footer base, and white outlined pill buttons with a 23px radius.", "sha256": "a41763b01c9314b615ef05fa71b11092a7bb2b69dcc5c8c66db79280aa757044", "bytes": 9847}, + "nfinite": {"name": "Nfinite", "category": "Tech & AI", "description": "Nfinite (Nfinite Nanotechnology Inc., nfinitepaper.com) markets ultra-high barrier recyclable paper with a near-black #0f131a hero, a cream #fffaf6 canvas, light-cyan #dff2f3 panels and buttons, sand #e9e2d2 cards, 'mainFont' type at weight 400 with negative tracking, and 3.56px corners.", "sha256": "8cd525ef35bc975a1c744c92b0e80255a3b3cec8bc28d1a30f77c56efd4833cc", "bytes": 11482}, + "nfl": {"name": "NFL", "category": "Sports & Fitness", "description": "NFL International (nfl.com/international) is a #f4f8f8 light-grey sports portal with white cards on 8px radii and soft layered shadows, #172029 ink, black #000000 4px-radius uppercase CTA buttons, a #272731 live-score strip, a #13141d footer, and bold uppercase display headings in the site's fontDisplay/fontSans faces.", "sha256": "98361a66171ad3eb5553bab4a47e8c287237a3e031509bd59f34f39086dcb360", "bytes": 15182}, + "ngern-tid-lor": {"name": "Ngern Tid Lor", "category": "Thai Brands", "description": "Ngern Tid Lor (Tidlor), a Thai vehicle title loan provider: notoSansThai and sarabun type, brand blue #2652ea on white, deep blue #112492 gradient bands, pale blue #dbe7fe buttons with a 10px radius, and frosted glass cards with a 24px radius and inset shadows.", "sha256": "5a0d55d68a72495485e9529c3f9cdd1704ef24af86f3b598d9079b0999dac128", "bytes": 11279}, + "ngx": {"name": "Angular", "category": "Design Systems", "description": "Angular's documentation home (angular.dev) paired with the Angular Material component docs: a white canvas (#ffffff) with Inter and Inter Tight type (500 weight, 76.8px hero), a warm gray ink (#746e7c body, #151417 headings), a magenta-pink accent (#e90364) and 3-8px radii on the marketing site, while Material component pages measure Roboto 14px/500, a blue #005cbb primary and 9999px pill buttons.", "sha256": "1b0af151b2419b8db142be706ed8ca850d99f127eb5201697c6747e9f3753400", "bytes": 14396}, + "nhs": {"name": "NHS", "category": "Government & Nonprofit", "description": "The NHS website for England (nhs.uk), built on the NHS digital service manual design system (nhsuk-frontend): Frutiger W01 at 19px/28px with 600-weight headings, #212b32 text on a #f0f4f5 grey page with white #ffffff cards, an NHS blue #005eb8 header and links, green #007f3b buttons with a 4px #00401e bottom shadow and 4px radius, and a #ffeb3b yellow focus state.", "sha256": "11d7bc697aaadaaf100d8122cd7842aa1ba4f26ecd77d16fcb8b38f67d08fda0", "bytes": 21874}, + "nicola-romeitm": {"name": "Nicola Romei", "category": "Portfolio", "description": "Nicola Romei's portfolio: a monochrome interactive artboard on a #f3f3f3 canvas with #202020 text, uppercase Host Grotesk 500 at 10px, a 56px Easegeometricb 700 title with -3.36px tracking, light nav chips, and 2.1px to 2.8px corners.", "sha256": "df593e44d24ad290919690f44b4f828ba5fd0c44b631fc67e1bebba37762a374", "bytes": 9548}, + "nike": {"name": "Nike", "category": "E-commerce & Retail", "description": "Nike Thailand storefront (nike.com/th): black #111111 and white pill buttons with 30px radius, #f5f5f5 neutral surfaces, #707072 secondary text, Helvetica Neue LT Thai Bold at 16px and 24px, flat photography-led layout with no shadows.", "sha256": "415e70b611d55916f05f9ab53adad8645f1fc8dfe2ecb3e2bd7e69f5c0179839", "bytes": 14216}, + "nikon": {"name": "Nikon", "category": "Consumer Electronics", "description": "Nikon Corporation's global home page: monochrome Roboto interface (40px 500 tile titles with 2.4px tracking, 18px nav), #ffffff and #f3f3f3 surfaces, #222222 ink and primary, #111111 footer, a #000000b3 translucent header over three full-bleed photo panels, and square corners with 2px and 6px radii.", "sha256": "1ddf849240a2ae27e12a7f4a9ac48b649da9b1ff4165a6a08568f68048c49cd8", "bytes": 10040}, + "nine-to-five": {"name": "Nine To Five Studio", "category": "Architecture & Interiors", "description": "Nine To Five Studio (9to5), an Italian BIM architecture studio: an acid yellow #ffff02 field with pure black PPNeueMontreal type, a 36px bold uppercase wordmark, a 36px regular statement, 12px labels, a #ffffff canvas and 0px corners throughout.", "sha256": "cdc16adbde6702ffc39129766addcb7a53314d9222171c7e882ec8437c2aa864", "bytes": 9575}, + "ning-huang-digital-designer": {"name": "Ning Huang", "category": "Portfolio", "description": "Ning Huang's digital designer portfolio: a #080808 stage with #fcfcfc type and #f0f0f0 light bands, a 179.2px uppercase PP Eiko wordmark, PP Neue Montreal titles, Fragment Mono 300 captions at 11.7006px with -4% tracking, and 10px radius cards.", "sha256": "7e3848fa4c62a67bddee61d182f46d91206cf34cfd0a8e1069eb04142e1f82c9", "bytes": 9564}, + "ninja-van-thailand": {"name": "Ninja Van Thailand", "category": "Thai Brands", "description": "Ninja Van Thailand's Thai-language home page: brand red #c2002f headlines and buttons on #ffffff and #f8f9fa bands, a #231f20 header, Lato type (50px/700 hero, 18px body), #f1f3f5 inputs and 4px radii around a ninja-mascot logistics story.", "sha256": "ec0261e98aefdd0e4aef284dfb60e4b75df2ba6df33764a4b61a664d0fcdc914", "bytes": 10548}, + "nintendo": {"name": "Nintendo", "category": "Gaming", "description": "Nintendo of America's nintendo.com (US) storefront and marketing site: a bright white #ffffff canvas, #484848 grey ink, and Nintendo Red #e60012 owning every filled CTA, link hover, footer link and the racetrack logo tile. Every text role is set in Geologica Variable (OFL, by Monokrom) at only two weights, 300 and 600, with font-variation-settings \"CRSV\" 1. Primary buttons are 48px-tall 8px-radius red rectangles (0px 24px padding, 18px/600 labels); cards are white with 1px #dadada borders and 12px radii; small #4b5cce pill tags label offers.", "sha256": "1e7436f40237dc8b43707d6a20b6026832da619e40f8dca7c5241a7a90ff72c3", "bytes": 32670}, + "nipa-cloud": {"name": "NIPA Cloud", "category": "Thai Brands", "description": "NIPA Cloud, a Thai sovereign cloud provider: navy #232c65 headings on a #fefefe canvas, magenta #e91e76 buttons with 8px corners, Prompt and Sarabun type (64px hero, 18px body), white 12px-radius cards with #dfdfdf borders and a named type scale.", "sha256": "c7e78a9cc9facf69181108862563dc11e1e50949551d2d7f343b24afaeb35ad5", "bytes": 11250}, + "nirvana": {"name": "Nirvana Development", "category": "Thai Brands", "description": "Nirvana Development (nirvanadevelopment.co.th) Thai residential developer: full-bleed architectural photography with a 72px Montserrat 200 white headline, SukhumvitSet Thai fallback, #404142 ink, #fefefe canvas and 3px radius outlined tabs.", "sha256": "7bd1afab49276e1632ed77608f612fb55ad34b9f47fa89320c32226a9b53a04a", "bytes": 8947}, + "nissan-thailand": {"name": "Nissan Motor (Thailand)", "category": "Thai Brands", "description": "Nissan Motor (Thailand)'s English site: Nissan red #c3002f square buttons (0px radius, 14px uppercase), a proprietary Nissan Light/Regular/Bold family (48px display, 16px body) on white with #eeeeee panels, black footer, and no shadows or rounded corners.", "sha256": "254e95f1b668a766a1286e8caf2d3bda5b7aa068aef66ad0709dedbc95eaf808", "bytes": 10387}, + "nitex": {"name": "NITEX", "category": "Fashion & Apparel", "description": "NITEX, a real-time fashion supply chain: acid neon #d7ff00 against black #000000 and white #ffffff, a 68px uppercase RightGrotesk headline, PPNeueMontreal 15px body, Fragment Mono 12px uppercase labels, 0px radius everywhere and slanted shapes.", "sha256": "84a430d62ce69c0c009c303673cfeed61756112458a037c21e3d43f2e83fecd4", "bytes": 9601}, + "nivea": {"name": "Nivea Thailand", "category": "Beauty & Personal Care", "description": "Nivea Thailand home (nivea.co.th, reached from the nivea.com market chooser): NIVEABrandType Bold and ExtraBold uppercase headings in deep blue #0032a0 on a pale #ebf1fd canvas, electric blue #0f60ff pill buttons with 56px radius, circular product and editorial crops, and a solid blue footer.", "sha256": "32b71fef8ace06de82d3d6214fa570f8e035b2a98ed06aad23de604f43ccf18a", "bytes": 12733}, + "nk-studio": {"name": "/nk.studio", "category": "Product & SaaS", "description": "/nk.studio home: DM Sans (variable, weights 300 to 700) in a near-black #070b0a stage with warm off-white #fdfdf9 text, mint accents #00ffc2 and #20e7b7, 67.1925px hero headline with -1.34385px tracking, a floating 10px-radius translucent nav pill, and a cream sheet with 20px top corners.", "sha256": "a8b878c69069022c0c0dd9fec961d1a2284043654488807812bf7b92e29aee50", "bytes": 10113}, + "no-art": {"name": "No Art", "category": "Retail & E-commerce", "description": "No Art (noartmusic.com): monochrome #000000 on #ffffff, all-caps Chivomono monospace at 10.6667px to 16px with Nue Haas Grotesk Text Pro 600 statement headings at 42.6667px and -1.44px tracking, square corners, a full-bleed video hero and illustrated poster strip.", "sha256": "9b17206641d055df53afd7b6c7503bb56c13e069569ab80d1581ed279a69839b", "bytes": 11170}, + "noble": {"name": "Noble Development", "category": "Thai Brands", "description": "Noble Development (noblehome.com) home page measured in English: DB Heavent type at 32px headings and 22px inputs, black #000000 ink on white, #d26132 orange accent from the site's own --btn-color-orange variable, #f5f5f7 light panels, 4px and 10px radii and a black footer, over bright full-color project campaign banners.", "sha256": "3d87aca8b3aaa854666643a81f7663ba515137c4bbe2b82df5f3d9063a98b2a1", "bytes": 9593}, + "noho": {"name": "Noho", "category": "Business & Corporate", "description": "Noho (noho.ink) furniture storefront: Switzer 600 headings at 53.376px with -2.13504px tracking on warm neutrals #f1eee9, #e7e2da and #cdc0b0, charcoal ink #3c3c3c, square white and charcoal buttons, and flat-color photography of chairs.", "sha256": "838ecd3ba99d8ed5db105f961ffdd56207c6fde58274506d94457a004e69b042", "bytes": 11655}, + "nok-air": {"name": "Nok Air", "category": "Thai Brands", "description": "Nok Air (nokair.com) airline home: saturated yellow #ffcb0b header, booking panel and 50px-tall 5px-radius buttons with black text, DBOzoneX type at 21px body and 40px to 60px headings, pale-yellow #fefcc3 bands and circular photo badges.", "sha256": "8b5953b27340a2f2421dc5a34f8ac360a3aac2140b75d8d84892bbcc9146318b", "bytes": 10011}, + "nok-mini": {"name": "Nok Mini Airlines", "category": "Thai Brands", "description": "Nok Mini Airlines (nokmini.com) commuter-airline site: a boxed WordPress layout in Ubuntu 16px / 27.2px on white #ffffff over a #e6e6e6 base, #444444 text, a #16a1e7 active nav tab with white 12px bold caps, #0b91ea links and square corners.", "sha256": "cebb8702f903014fbc7835f2116ccfbd64172f207d5a6c7f5f9f9adb3b2155a6", "bytes": 10486}, + "noomo-showcase": {"name": "Noomo Showcase", "category": "Agencies & Studios", "description": "Noomo Showcase (showcase.noomoagency.com): a black WebGL stage with pale blue-white text #d9e0ed and #d2e0ff, cobalt #0004eb buttons with 6px radius and a round arrow tile, PP Neue Montreal grotesk with GT America Mono nav at 14px.", "sha256": "ef21cbdb503ea95b464dcf588f204c7c2d586fbc152b2f4353754e910eb10c40", "bytes": 10001}, + "nordhealth": {"name": "Nordhealth", "category": "Design Systems", "description": "Nordhealth (Nordic healthcare and veterinary software) marketing site: Nordhealth Sans at 80px/700 with -1.2px tracking over an accent-blue #3559c7 hero, white cards with layered #0c1a3d shadows, navy #09142f and #081c4a anchors, a #081c4a 10px-radius primary button with a frosted white secondary, and red, yellow and cyan underline accents.", "sha256": "7ae3a0322d77b3ca083995f23c7a0f5be91c59ca1567f719ce6880f54e7395a3", "bytes": 16102}, + "nordstrom": {"name": "Nordstrom", "category": "Retail & E-commerce", "description": "Nordstrom (nordstrom.com) retail home: Brandon Text bold 60px hero headline over full-bleed photography, near-black ink #191a1b on white and #f0f3f5, sale prices in #d82508, 4px-radius black buttons and cards with a 1px 4px soft shadow, built on the NDLS design variables.", "sha256": "be08cb42a08d9a8740c878981fead3b8e415111e72ab6f0bd2547a0ea3904e7a", "bytes": 12257}, + "nordvpn": {"name": "NordVPN", "category": "Tech & AI", "description": "NordVPN's site: Inter 600 headlines at 48px/62.4px over white and near-black #141415 sections, #2a2a2d body ink, red #e02f1f Get NordVPN pills 48px tall that hover to #9e1c10, Nord blue #3e5fff for accents and links, pale blue #f3f7fc FAQ bands, and 12px/20px/40px radius cards.", "sha256": "6c51e755f4486b0a74063bf8a27bd678eca424efc554976ad4b62287ba256a81", "bytes": 12560}, + "norgram-co": {"name": "Norgram", "category": "Agencies & Studios", "description": "Norgram (norgram.co) design-studio portfolio: Helvetica Now Display at weight 400 with -0.72px tracking, a 77.4589px heading, white #ffffff project list beside #141414 and #1f1f1f panels, #efefef and #777777 text, 4px image radii and translucent #55555599 news cards.", "sha256": "8f0dc7ef567e843150c30b87aa514dac05d4a7d0f3269a676540a4622c09b692", "bytes": 10219}, + "northern-bangkok-monorail-mrt-pink-line": {"name": "Northern Bangkok Monorail (MRT Pink Line)", "category": "Thai Brands", "description": "Northern Bangkok Monorail (nbm.co.th) MRT Pink Line site: magenta #c2007a header, search card and footer, pale pink #efd8de bands, white cards with a 2px 7px soft shadow, Sarabun light type at 16px / 22px, and 26px-radius pill 'Read more' buttons.", "sha256": "10a1b1b598dcc760a5d9285b96efceb16c381cfd808af03056bca991f22c8c09", "bytes": 10537}, + "northvolt": {"name": "Northvolt", "category": "Energy & Climate", "description": "Northvolt (northvolt.com) is a white #ffffff, photo-led battery-maker site set entirely in the custom Northvolt Grit typeface, with #222222 ink, square-cornered #44a27a green 'Join us' buttons, 40px regular-weight headlines, 100px stat numerals, a #333333 notice bar and an #080808 black footer.", "sha256": "9582f0bc84a53356ad4847096587848ca23588a87eafd0bc36ac6055df90560d", "bytes": 12285}, + "norway-designsystemet": {"name": "Digdir (Norwegian Digitalisation Agency)", "category": "Design Systems", "description": "Design language of digdir.no, built on the open Designsystemet token set: Inter at 400/500 weights, deep navy ink #1f2c3d on white, accent blue #0062ba for interaction, warm sand #f8e7c1 content cards with 8px radius, and flat illustration instead of photography-heavy heroes. Buttons use a 4px radius; the footer flips to navy #1e2b3c.", "sha256": "7d6f08c2a408cf232734f659c52bf956f89bb84866deb7afe5845efa40fdc716", "bytes": 10772}, + "nothin": {"name": "NOTHIN'", "category": "Portfolio", "description": "NOTHIN' (noth.in), a Paris creative studio: PP Neue Montreal 500 at 64px with -0.64px tracking and uppercase 9.6px UI, black #000000 and white #ffffff with grey #8e8e8e labels, 80px-radius pill buttons with a 1px #ffffff66 border, and glossy 3D imagery.", "sha256": "c66c904e27c73bcf4fe4c7523b519e9594d398e3e93b0b5b71962cb12aeee1dd", "bytes": 10138}, + "nothing": {"name": "Nothing", "category": "Consumer Electronics", "description": "Nothing's US Shopify store (assets on Shopify's Oxygen CDN) is a greyscale, type-led system on a #f4f4f4 canvas with #040404 ink: NType82-Regular headlines at 48px/32px weight 400 (and a 100-weight 'title' cut), the Ndot-Regular dot-matrix face for category and logo labels, LatteraMonoLL 11px uppercase for every nav label and callout, Geist Variable for long-form copy, black 4px-radius buttons (12px 16px, 40px tall), 8px-radius product tiles, and a single #ffc700 yellow accent.", "sha256": "0716bd74bc08cca7a27ee73f24f1e0f5b85d6d0da306763521970b4d76fd6b19", "bytes": 31079}, + "notion": {"name": "Notion", "category": "Productivity & SaaS", "description": "Notion homepage: white page with warm off-white cards (#f6f5f4), alpha-black text (#000000f2), one blue #0075de with 8px-radius buttons, NotionInter at 96px weight 600 with -4.6px tracking, 12px cards and very faint layered shadows.", "sha256": "0528488ea9c71812e947765eee36cd1fe00d810cdf0469d62ef9bc72fd19902a", "bytes": 15336}, + "novartis": {"name": "Novartis", "category": "Pharma", "description": "Novartis (novartis.com) global home: Volta Modern Display at weight 500 with 0.4px tracking, 40px headline on a near-white #fcfcfc canvas with #161616 ink and #f2f2f2 bands, orange #ff4e00 link and focus accents, warm editorial photography and 1px circular carousel buttons.", "sha256": "b96bfc89fba6bfa5aae9b32b653f814c8c5d7e1b5ffb59e04a7e456177ee0d7f", "bytes": 11205}, + "novo-nordisk": {"name": "Novo Nordisk", "category": "Pharma", "description": "Novo Nordisk corporate site measured live: deep navy #00008f on white #ffffff, a pale aqua #bfffff surface, the proprietary Novo typeface at 15px/24px body, pill buttons with 85px radius and full-bleed human photography.", "sha256": "64b78e7132191a0974e102e54f0f16ebadd69511ebb1c3ce850c34737c42f4bd", "bytes": 9826}, + "npr": {"name": "NPR", "category": "News & Publishing", "description": "NPR home page measured live: white #ffffff canvas, NPR blue #0a61db pill buttons with 60px radius, NPRSans headlines at 18px/500, NPRSerif 14px/21px teaser copy, and dense news cards with 4px image corners.", "sha256": "be01297095830924e0eb675946a8d3e81cfb2e2d8f57c38d380901dfd36a2fe3", "bytes": 10085}, + "ns-nl": {"name": "NS Dutch Railways (NS)", "category": "Design Systems", "description": "NS's site uses its own NS Sans (a Frutiger-based face) in bold blue (#003082) on white, with the railway yellow #ffc917 as the hero field, a single action blue (#0063d3) on 6px-radius buttons, 12px-radius cards with soft layered shadows, and real-people photography of travellers on yellow-and-blue trains.", "sha256": "4e6f72f2f1bcf6761aa8cacbf373b4be18d1d7d5aad6102acecbdaa840f22560", "bytes": 14411}, + "nsw-gov": {"name": "NSW Government", "category": "Government & Nonprofit", "description": "NSW Government (nsw.gov.au) is built on the NSW Digital Design System — Public Sans throughout (700 headings at 48px/32px/20px, 16px/24px body), white canvas with #22272b text, NSW Blue 01 #002664 for buttons, links and nav labels, NSW Red #d7153a as a 4px accent rule, #f2f2f2 off-white panels, 4px radii on buttons and cards and 30px pill links for popular pages.", "sha256": "f43c42dfe1b8c2d623e413e1821d939be5344d6faa13fcf74808cdda565a1b7f", "bytes": 27740}, + "nt-thailand": {"name": "NT (National Telecom)", "category": "Thai Brands", "description": "National Telecom (NT) home page measured live at ntplc.co.th/en: NT yellow #f8d247 hero and top bar, black #000000 pill buttons with 25px radius, a custom NT typeface in Thai and Latin at 18px/700 buttons, and a dark #555859 footer.", "sha256": "38b07457d59879ccb970fa918b06b418c6c821430f7b5349c68e5064d148241f", "bytes": 10380}, + "ntt": {"name": "NTT", "category": "Telecom", "description": "NTT, Inc. global site measured live: white #ffffff canvas, NTT blue #0072bc for the logo, cards and footer, Noto Sans with an 88px/92px bold-to-light hero headline, Noto Serif italic question labels, 60px pill buttons and pastel sky and teal cards.", "sha256": "0c2240bf7f5e1fe01577d292fc188a1ff6e921b25baba107c5ea862bc931c903", "bytes": 9667}, + "nubank": {"name": "Nubank", "category": "Banking & Insurance", "description": "Nubank (Nu) corporate site nu.com: Nu Purple #8d0de3 and its deeper steps #5d0599, #3f026a and #1e002f, used as the dominant page field (#8d0de3 covers the largest area) with white #ffffff text, set against warm cream bands (#f3efe6, #fffef6, #f8dcc6) and white sections. Type is the proprietary Nu Sans family, served as nuSansDisplaySemibold for 88px/83.6px hero titles with -3px tracking, nuSansDisplayMedium for 24-52px headings and nuSansRegular 20px/28px for body. Buttons are full pills (1000px radius, 56px tall, 16px 32px padding, 18px/600 with +0.5px tracking); cards use 12-16px corners.", "sha256": "7a9bf1768ceb5f27aeda2392f38072214470ce61ecd29beac735d8e779cfb492", "bytes": 26890}, + "nulogy": {"name": "Nulogy", "category": "Design Systems", "description": "Nulogy marketing site (nulogy.com): white canvas with navy #0f1f3d headings, a gold #ffc704 primary button and statistics, Blender uppercase 54px headlines over IBM Plex Sans body, 5px and 8px button radii and soft navy-tinted card shadows on 14px rounded cards.", "sha256": "6458d2619c1a0105502de04e6210b568f7c4f8826a443d0e0712a557cfb4cd9c", "bytes": 12090}, + "nutella": {"name": "Nutella", "category": "Food & Beverage", "description": "Nutella international site measured live at nutella.com/int/en: Nutella red #e20019 on white #ffffff, Montserrat in weights 900 and 700 with a 48px h1, 40px-radius pill buttons, a red pill navigation bar and photographic product scenes.", "sha256": "1c49fc0919a260ee28f92d25fda780c836c70d1626a315ec353f1de5c0db740d", "bytes": 10330}, + "nvidia": {"name": "NVIDIA", "category": "Media & Consumer Tech", "description": "NVIDIA homepage: white surfaces with #1a1a1a text, square 0px-radius #76b900 green buttons with black 700-weight labels at 16px, 2px-radius white cards with a 5px soft glow, NVIDIA-NALA at 36px bold headlines and 15px body.", "sha256": "92da706ed4bc4d5d4406cdf39a609046884af7ec9d86172e6d0ac2fd47919822", "bytes": 12766}, + "oatly": {"name": "Oatly", "category": "Food & Beverage", "description": "Oatly's US site rendered as a desktop 'browser window': a cream #fffef6 panel with a 1px #000000 frame on a white #ffffff grid backdrop, black #000000 Margo Pro Regular uppercase text at 16px, square cards with a 1px black border and a hard 2px 2px 0 black offset shadow, pastel tag chips (#fdcf85, #98c5d3, #f8c8d8, #c6c6c6), a black 9999px pill SHOW MORE button in Margo Pro Bold, and loud display faces (Girdo Black Pro, Toni Noveau Pro) on inner pages.", "sha256": "d578d467941e6f65d33a23678c6713cce998d92e4c734e3ef2ca05afaa8599b2", "bytes": 27770}, + "obsidian": {"name": "Obsidian", "category": "Productivity & SaaS", "description": "Obsidian's obsidian.md is a dark, product-first page: #0f0f0f body with #1e1e1e/#1f1f1f feature panels, the system UI stack (60px/600 headlines at -1.2px, 16px/24px body) in #eeeeee and #bcbcbc, violet #7c3aed 8px-radius 60px-tall download buttons that hover to #8b5cf6, and #a78bfa text links.", "sha256": "c20a1a993609c0cd368539b521022b384cd9958ad988f67544343170bee8fd42", "bytes": 13200}, + "obys-2": {"name": "Obys Agency", "category": "Portfolio", "description": "Obys Agency portfolio measured live at obys.agency: pure black #000000 on white #ffffff with grey #c9c9c9 inactive items, the custom Obys typeface at 71.1111px display and 9.77777px body with negative tracking, zero radius everywhere and a centered vertical image column.", "sha256": "f83972d4c8007d0934f87767d7beaacee7134cb67930c3a6fdda05d6b9edb72d", "bytes": 8953}, + "obys-design-books": {"name": "Obys' Design Books", "category": "Culture & Events", "description": "Obys' Design Books (library.obys.agency) measured live: near-black #0e0e0e canvas, a grey #7c7c7c paper panel with white KHTeka bold type at 70px/70px, a #d25933 orange quote panel, a #f5f5f5 ruler column, 10px and pill radii and tight negative tracking.", "sha256": "9c315dcddba2e1e7d6692f21848acba62e2ba924c5648945b6f2b68f3ee056f7", "bytes": 9561}, + "ocbc-thailand": {"name": "OCBC Group", "category": "Thai Brands", "description": "OCBC Group about-us page (the URL queued for OCBC Thailand): OCBC Red #e30613 accent bars, Geomanist 36px light display with OpenSans 18px body, slate-ash ink #363b40 and #3d525d, link blue #005efd, 5px radii, and award cards with a 0 2px 15px 8px 2% black shadow on a white canvas.", "sha256": "7f13f55232d451b88b82f8f796aaee595376017a6775d049e7a914e4793fb767", "bytes": 10338}, + "octopus-energy": {"name": "Octopus Energy", "category": "Energy & Climate", "description": "Octopus Energy's UK site: a deep night-purple #100030 canvas with #180048 bands, pale 'azure' #f0ffff text, cyan #60f0f8 headlines and links, a hot-pink #f050f8 primary button (hover #fa98ff) with 12px corners and a 2px same-colour border, violet #5840ff secondary accents, huge 60px-radius panels, all set in the custom Chromatophore typeface (300/400/500/700/800).", "sha256": "6cfe48e750f9619dc08e9d50b0b1401722de22cc89a4c05dfafb7442f05c52cb", "bytes": 19197}, + "odd-ritual": {"name": "Odd Ritual", "category": "Fashion & Apparel", "description": "Odd Ritual golf apparel store (oddritualgolf.com) measured live: white #ffffff and light grey #f4f4f4 surfaces, black #000000 text, electric blue #050fff accent, PP Neue Montreal at 40px uppercase 600 with -1.2px tracking, Instrument Serif labels and zero radius.", "sha256": "390e568feb960ef436791417a886dae1e0556b90c054ebcb8699f48b6290bf55", "bytes": 10461}, + "odyssee": {"name": "Odyssée", "category": "Business & Corporate", "description": "Odyssée medical aesthetics clinic (odysseeclinic.com.au, Hunters Hill NSW) measured live: warm white #fffcf8 canvas, navy #1e305e type, psTimes serif at 48px headings and baselGrotesk 14px body, 12px uppercase nav, zero radius and full-bleed skin photography.", "sha256": "8a4d50ae90d5f5c4a474e4fc8e12a3a6dffe79cffc86cdefc7dc420c75abcb9c", "bytes": 9496}, + "off-menu": {"name": "Off Menu", "category": "Portfolio", "description": "Off Menu studio site (offmenu.design) measured live: near-white #fdfdfc canvas, near-black #12110d ink, Neue Montreal at weight 500 with a 36px/40px project title and 16px/20px body, pill and 8px to 40px radii, and circular project thumbnails on an empty field.", "sha256": "7e8f9cae5926073b3fe404b3f6d813a9d120b03939dd9f3aff3484a32a9dc544", "bytes": 8748}, + "office-of-agricultural-economics": {"name": "Office of Agricultural Economics (สำนักงานเศรษฐกิจการเกษตร, สศก.)", "category": "Thai Brands", "description": "Thai OAE portal measured at oae.go.th/home (the real home behind a memorial landing page), set in Kanit with Sarabun, on #ffffff and a #f7f8f9 body, with #2b4497 navy-blue buttons (8px radius, white 16px weight 600 text), #1245af links and a published custom-property token scale.", "sha256": "38d292aedc21d1baff97574b85f7c08fa4b05d1618882f21a79c825135a1623f", "bytes": 11935}, + "officemate": {"name": "OfficeMate (OFM)", "category": "Thai Brands", "description": "OfficeMate Thailand (ofm.co.th) measured live: white #ffffff canvas with a #ebf1f4 page tint, deep navy #2c2d4e text, flash-sale red #ff0000 buttons with 4px radius, Kanit at 12px/18px body and 13px buttons, and a dense Thai e-commerce layout.", "sha256": "d028fcb8cd062a075c40a1b056796e48b382fce8f4906c9f6341823fe73ad06a", "bytes": 10110}, + "oflyn": {"name": "Oflyn", "category": "Fashion & Apparel", "description": "Oflyn French streetwear boutique (oflyn.fr) measured live: pure black #000000 canvas, white #ffffff type with 8% white #ffffff14 button fills, fluid Neue grotesk at 13.952px and 25.8987px statements, abc uppercase labels, 4px radius chips and grey studio product photography.", "sha256": "79f70d4945ebbc4bc43cb1b90c5192b26471d5538ea68340975390095e86d643", "bytes": 10322}, + "ogaki": {"name": "OGAKI", "category": "Fashion & Apparel", "description": "Social-first beauty agency site (ogakidigital.com) in a warm bone canvas #f2edeb with near-black ink #221f20, set in two typefaces: Reckless (serif, weights 300/400) for headlines and menu, GT America (grotesk, 400/700) in uppercase for navigation and labels. Radii are only 4px and 8px; no shadows, no CTA button fill.", "sha256": "66622d00a4ec10630821fa75d12213110132961c1c938641e9ed648c47849255", "bytes": 10944}, + "ogilvy": {"name": "Ogilvy", "category": "Agencies & Studios", "description": "Ogilvy agency home page (ogilvy.com): a full-bleed signal red #eb3f43 hero and statement section over a white #ffffff page, black #000000 and #231f20 text, set in two in-house faces, Ogilvy Sans for navigation and Ogilvy Serif for the 60px statement copy. Flat, shadowless, 0px corners with one circular 50% element.", "sha256": "dd4c4116ddc9adc479c130d4ca5bf2ca1913d85ec43cb7a22391588b821be16f", "bytes": 9810}, + "oimachi": {"name": "Oimachi", "category": "Portfolio", "description": "Copenhagen branding, Webflow and AI-visibility studio site (oimachi.co): light grey canvas #f0f0f0, pure black #000000 headlines and primary buttons, Aeonik at weight 300 with tight negative tracking, an italic Feature Deck accent, and small 3.17px to 5.86px radii with one 79.17px pill. No shadows or borders.", "sha256": "f8d50ef3269c88918dc3b1da401214d1ea69aeec2a6e185d15e164542d9ed661", "bytes": 10673}, + "okta": {"name": "Okta", "category": "Tech & AI", "description": "Okta's marketing site: SeasonMix serif headlines at 56px/63.84px weight 400 over a warm off-white #fbfbfa canvas, Aeonik sans for UI and body at 16px/22.4px, an electric blue #0131ff Contact us button with a 30px radius, deep navy #00033e glass cards on blue gradient panels, and a charcoal #1e1e1e footer.", "sha256": "abf4d214b300dc4f02760b57dcb2972de22d58e9a503402ece977cf662133824", "bytes": 13218}, + "olay": {"name": "OLAY", "category": "Beauty & Personal Care", "description": "OLAY US store (olay.com): white #ffffff and #fdfdfd surfaces, near-black #161716 primary buttons with 8px radius, Boston typeface at weight 900 for headlines with 1% tracking, Inter for small UI text, soft 16px card shadows and product photography carrying all saturated color.", "sha256": "1d1332277bbf9a5159646a4732e377f78b709210e6fc18569decb318344da131", "bytes": 11747}, + "old-navy": {"name": "Old Navy", "category": "Fashion & Apparel", "description": "Old Navy storefront (oldnavy.gap.com): white canvas, deep navy #05274c pill buttons with 999px radius and 12px 32px padding, black #000000 text, orange-red #ee4110 accent, set in the ON Sans family (Display 55.7px headline, Text 12-14px UI), flat surfaces and photography-led bands.", "sha256": "73eb10558029c76f1a7fa9994ab1c7de1140305f74c144b1e41cb5ee6346abd2", "bytes": 10645}, + "olha-lazarieva": {"name": "Olha Lazarieva", "category": "Portfolio", "description": "Portfolio of designer Olha Lazarieva (olhalazarieva.com): a light #f7f7f7 hero and a near-black #101010 section, giant uppercase Sofia Sans Condensed headings at 186.667px with -15.3334px tracking, Spline Sans Mono 300 uppercase captions, 2px radius only, no shadows or filled buttons.", "sha256": "bd1ff3dbecbf5c12442f94e18e139184cc83d99ac6bfe4355fc0ffac4555f470", "bytes": 10627}, + "olipop": {"name": "OLIPOP", "category": "Food & Beverage", "description": "OLIPOP's Shopify storefront: a warm cream #fff6ea canvas, deep forest-teal #14433d ink set in Alias Ano (16-20px), chunky WindsorEF 800 display headlines (90px hero, 52px sections), hot-pink #e31a82 pill CTAs (50px radius, hover plum #5a0c3c), forest #034638 secondary pills, a plum #5a0c3c announcement bar and a #008168 green footer.", "sha256": "33c7c2fd30a3fd814df10fa76bede52a0023bd0300225d9d1af06f5b65b86a61", "bytes": 30680}, + "ollama": {"name": "Ollama", "category": "AI & LLM Platforms", "description": "Ollama's marketing site is a near-monochrome, text-first page - white canvas (#ffffff), neutral-900 ink (#171717), muted neutral-500 captions (#737373), the system ui-sans-serif stack with a tight 22px/500 headline at -0.55px tracking, and a single pill-shaped (9999px) near-black \"Get started\" button that darkens to #000000 on hover.", "sha256": "91c09e8e0135703b6bb16e3c15438ff56423f4976f92c2715fe9b6b511dd196c", "bytes": 21134}, + "olympics": {"name": "Olympics", "category": "Sports & Fitness", "description": "Olympics.com, the IOC's digital home — white #ffffff canvas, #f5f5f5 rounded story cards (12px), full-bleed black photo heroes with olympicHeadlineRegular 56px/700 headlines, olympicSans body at 18–20px in near-black #020202, Olympic blue #0078d0 for the menu block and primary pill, light grey 32px-radius pill buttons, and ring-colour category tiles (#ee212e, #ffb13c, #01a54a).", "sha256": "d9f489e8f719e96ff8243c9fa36d8ed16c4b016291611b95f31df12ccbc221a2", "bytes": 23590}, + "omega": {"name": "OMEGA", "category": "Luxury", "description": "OMEGA homepage measured at www.omegawatches.com: a white canvas (#ffffff) with grey body text (#555555), omegact uppercase headings with 4.8px to 6.08px letter-spacing in a crimson (#c40d2e), square-cornered 0px buttons, and translucent white ghost buttons over full-bleed watch photography.", "sha256": "376af8cea81f57c3212c65c810d308b6048115fff8dfb71c6e4116d665d00451", "bytes": 11494}, + "omise": {"name": "Omise", "category": "Thai Brands", "description": "Omise payments home page (omise.co/en, queued as Opn): near-black #05080d hero with mint #80ffbf buttons at 6px radius, Outfit weight 300 uppercase display at 140px, DM Sans for body, light #f5f7fa solution cards with blue #3333ff caption tabs, two shadow stacks.", "sha256": "357fa2c5c7c01e490c60a320f69e8ee9a9c36ffcfdbf5979171b64c7cd570e47", "bytes": 10280}, + "on-energy": {"name": "ON.energy", "category": "Tech & AI", "description": "ON.energy site (on.energy): acid-yellow #fff313 statement panels against black #000000, Univers Next Pro weight 300 with -4% tracking at 56.89px, ABC Monument Grotesk Mono 12px uppercase labels, square black buttons and a 14.22px-radius yellow action chip, no shadows.", "sha256": "c104df3614e6ff4e541d328490eb9c041740ae9479109596163dcb8c7e93edf1", "bytes": 11113}, + "on-running": {"name": "On", "category": "Fashion & Apparel", "description": "On (on.com), the Swiss running and sportswear brand. A monochrome commerce system: pure #ffffff canvas, #000000 ink and #000000 pill CTAs (40px radius, 48px tall, 0 24px padding) that hover to #333333. All text is set in the served family \"On\" (Dinamo's custom On Diatype) at 400/500/700, with \"On Mono\" uppercase micro-labels, fluid clamp() sizes such as 48.448px and 15.104px, tight negative tracking on display type, full-bleed photography, a #f0eceb product backdrop and amber #995c00 product labels.", "sha256": "4ecc247f2872ef13e7eb2534bce355e927550c256cc51e29d07fc5c7eae20b23", "bytes": 31865}, + "one-medical": {"name": "One Medical", "category": "Healthcare & Wellness", "description": "Amazon One Medical's primary-care marketing system — warm editorial serif headlines in GT Super Display (72–88px, weights 500/600) over light Ginto 200 body copy at 18px/31.5px, set in deep jade #004d49 on white #ffffff with a jade #005450 pill CTA (36px radius, 16px 40px padding, hover #068466), avocado #abcc76 and melon #ffc776 secondary pills, clear-day #eef6f4 and warm #f5f3ef bands, 10px-radius photo cards and a jade footer.", "sha256": "6f8720f21ab3b4e847defb7ab8dd274851d97640de19716fb6ff727b9a8c1d39", "bytes": 28462}, + "oneplus": {"name": "OnePlus", "category": "Consumer Electronics", "description": "OnePlus US store (oneplus.com/us): white and #fafafa product stages with black #000000 bands, black 999px-radius Buy now pills (32px high, hover #4d4d4d), OnePlus Sans Regular and Medium at 36px headlines, a 4px-or-pill radius system and translucent ink colors like #1a1a1af2.", "sha256": "db96df22c930b88469135a3fc33b521b18c1a2be97ca5a318aa9e2f78cd8de5e", "bytes": 11138}, + "onsen": {"name": "Onsen UI", "category": "Design Systems", "description": "Onsen UI's site (onsen.io) fills its hero with a red-orange gradient (#ef3e29 fill, #f03b2a button) under white headlines, then drops to white and #fafafa sections with light-weight Helvetica Neue copy in grey (#666666), red section titles at 24px, square 3px uppercase buttons, and a phone mockup running the framework's own iOS-style components.", "sha256": "81d2999562714df9b5629eeffd85cd3674ad2696b09616a9da5d41117e8ff52e", "bytes": 11213}, + "onyx-hospitality": {"name": "ONYX Hospitality Group", "category": "Thai Brands", "description": "ONYX Hospitality Group home page (onyx-hospitality.com/en): white canvas with stone #eeebe7 and dark #32353a bands, near-black #111419 square buttons, plum #522953 pill Subscribe, Rubik 600 uppercase headings at 46px, Noto Sans 300 body, circular photography crops.", "sha256": "b9216871a6df5017f342d6f8525d6c930c5fb8ac91ecd3989f85da36d236f71b", "bytes": 11543}, + "ookbee": {"name": "Ookbee", "category": "Thai Brands", "description": "Ookbee Thai e-book store (ookbee.com): yellow #ffd54c header and buy buttons, black #000000 menu bar and footer, white and #f5f5f5 product shelves, Kanit at weights 400 and 700, red #e52735 prices, 3.2px header buttons and 48px pill buy buttons.", "sha256": "4afdba156acb9e3752297ba4191aaab92d4e00a8df6cf505085d21f3f550d359", "bytes": 10524}, + "opal-tadpole": {"name": "Opal Electronics", "category": "Retail & E-commerce", "description": "Opal Electronics (op.al, queued as Opal Tadpole): a black #000000 page with white #ffffff Die Grotesk C text at 18.64px regular and a 43.5px bold lowercase headline, +2% letter spacing, a single yellow #ffdb00 accent, full-bleed product photography and 0px radius everywhere.", "sha256": "f60aa291cbe8bd99a1f4896a1d5cbc11b2421f05b06bc95efdc6128a67dde639", "bytes": 8894}, + "open-props": {"name": "Open Props", "category": "Atomic CSS & Utilities", "description": "Open Props (open-props.style) is a library of CSS custom properties, and its site shows it - a pale #f8f9fa canvas with white #ffffff cards, near-black #030507 ink on a system-ui stack, weight-900 headlines at 56px and 40px, indigo link and code colors (#4263eb, #364fc7), small 5px control radii, and layered multi-stop soft shadows from the library's own shadow scale.", "sha256": "891edd0ee42d51d15446b4deec7fb8dab1c4af07ca1a0cf24280f063a95f50d7", "bytes": 19178}, + "openai": {"name": "OpenAI", "category": "AI & LLM", "description": "Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.", "sha256": "d9abf17a413c5b07bfd6e3306347a51b41b298470ca1d0fc37af2698250da76f", "bytes": 6466}, + "opencode-ai": {"name": "OpenCode", "category": "AI & LLM Platforms", "description": "OpenCode (opencode.ai) is a monospace-only, terminal-flavored product site - warm off-white canvas (#fdfcfc), near-black ink (#201d1d) and mid-gray body text (#646262), a Berkeley Mono / IBM Plex Mono stack at 16px, 38px bold headline, 4px-radius solid dark buttons, 6px inputs and tabs, hairline borders, and no shadows or gradients.", "sha256": "0c14a42f6727d8a1707ee287550b7d58ff8df7346fe8c9ab3279ae62d764ccf2", "bytes": 16663}, + "opendoor": {"name": "Opendoor", "category": "Real Estate & PropTech", "description": "Opendoor's 2026 marketing site is a warm-paper interface — #fbf9f9 canvas, #23201d warm-black ink with #5e564e muted copy, one saturated accent blue #0042e6 for every CTA (12px radius, 44px tall, with a -4px inset bevel in #0021d9), Graphik (Commercial Type) at 400/500 with tight negative tracking (48px/-2.4px section heads) and a single DM Serif Display 60px hero line, 20px-radius photo cards and a floating 64px address field.", "sha256": "02b40b5fe9cbcc87eabba1205749139486aadf1a9342a4ab4065a40b39ef5823", "bytes": 26485}, + "openstatus": {"name": "OpenStatus", "category": "Developer Tools & IDEs", "description": "openstatus.dev is a monospaced, square-cornered page: Commit Mono for every heading and paragraph (30px/36px 600 h1, 16px/28px body), white #ffffff cells divided by 1px #e5e5e5 grid lines, #0d0d0dcc ink, a #171717 'Get started free' block button at 0px radius, and status colors #20c45f, #f49f1e and #3a81f6.", "sha256": "3afa2bfe49d39fd1a530f4e9d1bee90247a1d930609e20ee365b2889c91264ce", "bytes": 11803}, + "openui5": {"name": "OpenUI5", "category": "Design Systems", "description": "OpenUI5 project site: white and #f4f9fb bands, brand blue #1873b4 with #0f9be6 gradient hero, black ink, SAP's 72 typeface at 17.6px body and 37.431px headings, flat blue illustrations, no shadows, 5px-radius buttons.", "sha256": "5e30ff371bcf9611c374801cb3c0efca82a63c9a5b2371fb8384e7496c561d23", "bytes": 11019}, + "optikka": {"name": "Optikka", "category": "Business & Corporate", "description": "Optikka's single-page product site is a warm sand canvas (#e6d9cc, with a lighter #ece6df largest area) carrying espresso text (#443218) in PPNeueMontreal 500, a 99.5555px tracked-tight hero, and one vivid ember accent (#fd4319) with zero measured border radius.", "sha256": "647b26396f999da08766c0eee618932600d4ee57ee8e7c64f74b353349afba1f", "bytes": 10081}, + "oracle": {"name": "Oracle", "category": "Design Systems", "description": "Oracle.com runs on the variable OracleSansVF (base weight 350, light 300 headlines at 40px/52px) in near-black #161513 on a warm #f1efed page ground with white #ffffff 12px-radius split cards, #312d2a 4px-radius buttons (hover #3a3632) and #006b8f text links.", "sha256": "4bf354247520361dd973a3deb4301d75a413699da70b524990fffedd6e9e5a96", "bytes": 14577}, + "orage": {"name": "Orage Studio", "category": "Agencies & Studios", "description": "Orage studio's site (Directors and post-production studio, Paris) is a black canvas (#000000) with white PPSupplyMono text in 10.6667px uppercase, a translucent #00000033 title bar, zero border radius and full-bleed film stills framed like a terminal console.", "sha256": "e3f3d3c743d2e60e2d491c16c6507330b7e300fbdc0d9954a8254265631c33d3", "bytes": 9801}, + "orange": {"name": "Orange", "category": "Design Systems", "description": "Orange's corporate group site (orange.com/en) is a black, white and orange system: HelvNeueOrange bold headlines up to 100px, a square-cornered #ff7900 button with black text that flips to black on hover, hairline #cccccc rules, #eeeeee panels, and large editorial photography of people.", "sha256": "8709944a3c610f40a2c9dd60f1eb80b7558f2a61a4cf28dc0036560d99da4ef7", "bytes": 14830}, + "orangetheory": {"name": "Orangetheory Fitness", "category": "Sports & Fitness", "description": "Orangetheory's US site pairs a warm cream canvas (#f4eddf) and near-black ink (#0a0a0a) with an orange (#ff8633) that fills pill buttons (32px radius) and rounded 30px feature cards, set in PPRightGrotesk 700 at 60.8px with 300-weight 14px body.", "sha256": "f70f1765ade0733179af7011186c6eff28d72f44e2365769bac53894bde8b2cb", "bytes": 11098}, + "oreo": {"name": "OREO", "category": "Food & Beverage", "description": "OREO's US shop (oreo.com) runs a saturated #0047d9 blue page body with white sections (#ffffff), near-black #0b0505 text, Pluto 900 uppercase display at 80.7887px with -5.65521px tracking, pill buttons (9999px) and a #1db9ff 3px button border.", "sha256": "b68c19c83a83cec8eb11531f59b89b5b32cfe7d9c603ce7f5228c85b404c83c1", "bytes": 11556}, + "origin-property": {"name": "ORIGIN Property", "category": "Thai Brands", "description": "ORIGIN Property's English home page (origin.co.th/en) sets IBM Plex Sans Thai on white (#ffffff) with navy headings (#0d1e3a), an orange accent (#f46e0b), a dark #121417 button with 10px radius and a floating pill-shaped glass nav.", "sha256": "14ebdee60a6eebbd57901428574d8f43c5a10bf0f503d48f79c41a4c951ff53a", "bytes": 13094}, + "orsted": {"name": "Ørsted", "category": "Energy & Climate", "description": "Ørsted's corporate site is a calm Scandinavian system set entirely in the bespoke Orsted Sans: 44px/500 headlines over full-bleed offshore-wind photography, 16px/25.6px body on a #ffffff canvas with #000000 ink, a single #007acc blue for actions and links, deep #001142 navy bands, #f2f2f2 subtle surfaces, 8px-radius 44px-tall bold buttons, 12px-radius hairline (#d8dbdd) cards and 40px-radius search fields.", "sha256": "6a8394abab65a7346fba57c76035c06985e40acecfc0036dfd2c92e3f35aa58b", "bytes": 26912}, + "oryzo-ai": {"name": "ORYZO AI", "category": "Agencies & Studios", "description": "ORYZO AI (oryzo.ai) is a satirical product campaign site by the design studio Lusion: a near-black brown canvas (#100904), cream ink (#ffedd7), burnt-orange accent (#dc5000), halyard-display-variable uppercase at weight 500 and 12px to 32px radii.", "sha256": "2cf3cb3154a2592e15ff9239592831174d6fbc2893691e73632cca80b47d1004", "bytes": 10656}, + "oscar-health": {"name": "Oscar Health", "category": "Healthcare & Wellness", "description": "Oscar's site sits on warm paper (#f7f5eb) with dark-brown ink (#1f0d05), pairing Klim's Heldane Display serif (served as 'display', 120px hero, 71px section heads, -1% tracking, italic for emphasis) with Lineto's Lettera Text sans (served as 'sans', 20px/32px body). The action color is Hot Blue #4f50ff on 56px pill buttons (hover #181867); stat tiles use 16px radius in blue, yellow #ffae00, teal #3fa6b4 and red-orange #ff6b3d.", "sha256": "a89d99aa2f778d591529dbf883917084d20ea97ef5f2b38c3e6bb247c618fee5", "bytes": 24367}, + "osmo-1": {"name": "Osmo", "category": "Tech & AI", "description": "Osmo (osmo.supply), a Webflow and HTML resource membership for creative developers: a #f4f4f4 page with #201d1d ink, violet #6840ff and lime #a1ff62 accents, Haffer type with tight negative tracking (99.5556px / -5.97333px) and very small radii.", "sha256": "13c58699b8873488c48efb560eca1b551083466b1643c77371da4fa50675752f", "bytes": 11474}, + "osotspa": {"name": "Osotspa", "category": "Thai Brands", "description": "Osotspa's English home page (osotspa.com/en/home) is a consumer-products corporate site in DB Heavent: white canvas, #131313 ink, teal #00a3ad hotline pill, brand blue #003087 buttons, #002871 footer, 40px pill radii and uppercase headings at 66px.", "sha256": "f52910d17eee31bcbd38bd89c4830a05756d9d68b403b418417fb6a4df727428", "bytes": 10605}, + "oura": {"name": "Oura", "category": "Healthcare & Wellness", "description": "Oura's smart-ring storefront — a warm sandstone canvas #f7f1e8 with sandstone-500 #4a4741 ink, condensed \"Editorial New\" serif headlines (80px/300 with -4px tracking, 68px/400) over AkkuratLL sans UI and body (16px/24px), a single Oura blue #2a72de fully rounded pill CTA (12px 24px, hover #2056a6), dark #4a4741 secondary pills, 12px-radius photo cards, #efe6db testimonial cards and a graphite #1c1b1a news band.", "sha256": "aa14d4ef82eba7a1243a97ea067404fed38b228bfc41321d249a95cb7832197b", "bytes": 25351}, + "ousmane-dembele-ballon-dor": {"name": "Ousmane Dembélé - Né Pour Briller", "category": "Culture & Events", "description": "A French editorial tribute microsite (ousmaneballondor.fr) on an off-white #fffcf5 page with a #0d0d0d dark block, club-colour sections (#610505, #ffd400, #05192e), red #bb2929 nav text and Doner and Being type, from 6.4px labels to 240px display.", "sha256": "c9c4ad7ffa450d116de07d63540949b1922f45bee196c61d89c6931ae1555436", "bytes": 9686}, + "outfit": {"name": "OUTFIT by ++hellohello", "category": "Fashion & Apparel", "description": "OUTFIT, the apparel store of the design studio ++hellohello: an #ede4dd page with signal-red #ff0001 text, a giant 163.2px wordmark, 24px / -0.6px tracked display, black and #d2cac3 surfaces, and a cyan #00c0eb nav-role colour; every corner is square.", "sha256": "029f03c144abd13bfb390b86f3c2beeebaf3256c2e4864d99b558dd0df8885e3", "bytes": 9769}, + "outsource-consultants-inc": {"name": "Outsource Consultants, Inc.", "category": "Architecture & Interiors", "description": "Outsource Consultants, Inc., a New York building-code and permit consultancy, as built at oci.madebybuzzworthy.com: cobalt #1925aa blocks against a #e8e6e0 paper page, PP Neue Montreal at 142.222px, GT America Mono labels at 10.6667px, and strictly square corners.", "sha256": "7339233b18ce9fb6eb1dc82b9e670e59a2f1239bf3a5c2a637bd2f5e18072bbe", "bytes": 11937}, + "ova-investment": {"name": "OVA Investment", "category": "Tech & AI", "description": "OVA (ova-investment.com), a Montreal investment fund: a pure black page (#000000) with white text, Neue Montreal at 80px weight 500 for section words, Geist Mono labels, a sunset-gradient hero with curved image cards, and no measured border radius or shadows.", "sha256": "0ab8f27c01a00a302daf04e434b88e49437456b688763a240cde55d40effab1c", "bytes": 9080}, + "oxford-university": {"name": "University of Oxford", "category": "Education", "description": "University of Oxford home page measured live: Oxford blue #002147 ground, cyan #26d2ff buttons with #002147 text, Tiempos Headline serif 500 at 51.816px for display and DM Sans 16.248px body, 6px button radius, pill 9999px chips, 4.9px spacing unit, inset-ring shadows instead of drop shadows.", "sha256": "d839527ca1f3c112c50b56e10410341c6313d13371a93099a43ac70d939d383a", "bytes": 11394}, + "pace": {"name": "Pace Development", "category": "Thai Brands", "description": "Pace Development Corporation (pacedev.com) corporate site: Cantarell 12px body text in #666666 on white, a deep navy #212844 (the site's --base-color--primary) for the footer band and text blocks, a #f8f8f8 secondary surface, a #6daadb light blue, a sharp-cornered flat layout and full-bleed night photography of Bangkok towers.", "sha256": "649c2516dfbed4cbc696e9c1496fa370a1c95e05a5634645c3b7ce7f78690010", "bytes": 8595}, + "pacific-park": {"name": "Pacific Park Sriracha", "category": "Thai Brands", "description": "Pacific Park Sriracha Shopping Center is a Sri Racha mall site built in royal-navy #232d80 and sky-blue #3270b6 with an orange #f7901e accent and a pink #fe579c active-menu state, set in Noto Sans Thai (16px body, 21px menu, 48px headings), with full-bleed category photo tiles and event cards underlined by an orange rule.", "sha256": "3e10e5e3b2c8d5e6869a47ea15b1033d58ef0f36d16bb8cfa157ce0edbb05161", "bytes": 9725}, + "pacman": {"name": "Pacman", "category": "Themed & Unique", "description": "Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.", "sha256": "61e11bcf09a3f3943739d07f16248d9cdfc8e98892c2a9a4a1d09b60a5a7e243", "bytes": 3136}, + "pacome-pertant-portfolio": {"name": "Pacôme Pertant Portfolio", "category": "Portfolio", "description": "Pacôme Pertant motion and sound designer portfolio, measured at its entry screen with a #0a0a0a canvas, #fafafa text, Indivisible Variable 500 at 80px with -4px tracking and 24px body, a 50px-radius light pill button labelled enter with sound, declared pop green #21ffc0.", "sha256": "bf437bc17d45f23c9974f7b324f2ba3a09c690e18c11b24953824ba698f66efc", "bytes": 9247}, + "paddle": {"name": "Paddle", "category": "Fintech & Crypto", "description": "Paddle's site is a warm off-white #f9f8f7 and sand #ebe7df page with near-black #1c1a15 ink, a condensed serif (serrifCondensed, 400) for 64px headlines over Inter body text, 10px-radius dark buttons, 24px-rounded white story cards and a signature yellow #ffd400 used for one call-to-action panel and small icon chips.", "sha256": "2245c633c32ec4702bae734c16b26ea30bc6701afc1508b4915166ad2507eada", "bytes": 15637}, + "paisana-house": {"name": "PAISANA(House)", "category": "Architecture & Interiors", "description": "PAISANA(House) design membership site measured live with a white and near-black #111010 band system, indigo #332eca Subscribe buttons with white text at 0px radius, neue-haas-grotesk-display 400 at 57.28px with -0.32px tracking, lavender #e1dffd band and pastel plan tints.", "sha256": "3a6a32dddfd08b3e7b3159523ec2da215ffdd9bdef4b520cce0299f3bc3ef982", "bytes": 10066}, + "palantir": {"name": "Palantir", "category": "AI", "description": "Palantir home page measured live with Alliance No.1 and No.2 at weight 400, neutral surfaces #efefef, #f3f3f3, #ffffff, dark #1e2124 and hero #0d0e10, text #666666, white square Get Started button with #1e2124 text, 2 to 4px radii and tight negative tracking.", "sha256": "a51ae688ecd58911162eb9555dbd7d4d084cc66a0e02a9fb0bcc542bc625e84b", "bytes": 12160}, + "palmer": {"name": "Palmer", "category": "Food & Beverage", "description": "Palmer dinnerware exploration site measured live with a warm #f5f6ee canvas, #222222 ink and dark controls, TWK Lausanne 300 at 106.667px with -4.26667px tracking, 12px body, hairline #a1a19c, 2.67px control radii and no UI shadows.", "sha256": "fd3bb6ae001c625b14b7f290205e17669099fe0cde3848ad76fa9a60230a1cf3", "bytes": 9992}, + "palmetto": {"name": "Palmetto", "category": "Energy & Climate", "description": "Palmetto (palmetto.com), the US home clean-energy company: white #ffffff and warm off-white #fbfbf7 pages, a sage #dae3d8 panel, near-black green ink #1f2723, and Palmetto75 red #f9593b for every call to action and the footer (hover #d73e20). Headlines are ultra-heavy ABC Solar Display 800 at 88px/88px; body is Saans 500 at 21px/28px. Buttons are 16px-radius, 50px tall with 16px 20px padding and morph to a 32px radius on hover; cards and panels use very large 28-64px corners.", "sha256": "b193c6b93b537b66aafe4264a2903b9869d30be5a367b1ba41535684e427973c", "bytes": 22881}, + "palo-alto-networks": {"name": "Palo Alto Networks", "category": "Tech & AI", "description": "Palo Alto Networks' site: TT Hoves 500 headlines at 44px/52.8px in white on near-black #141414 and #000000 bands, Cyber Orange #fa582d eyebrows and logo, #f76a43 pill buttons with a 36px radius and black text that hover to #f98768, deep red-black #190000 recommendation strip, Strata yellow #ffcb06 product CTA and CelestePro serif inputs.", "sha256": "9816cebe69db6237b016df6ad83f5a901b0b175392104120e879078509106f93", "bytes": 14225}, + "panasonic": {"name": "Panasonic North America", "category": "Consumer Electronics", "description": "Panasonic North America (na.panasonic.com) sets proxima-nova 700 headlines on Panasonic blue #1953b4 and white, with navy #0f315f and #f0f0f0 feature panels, white or black 12px-radius buttons (48px tall, 12px 24px padding), 16px-radius imagery and circular industry thumbnails.", "sha256": "04809a09c8aca506c24225ad64adcc59141b33e8da28ed147e3d9369cd40f220", "bytes": 11962}, + "panda-css": {"name": "Panda CSS", "category": "CSS-in-JS", "description": "Panda CSS (panda-css.com) is a build-time, type-safe CSS-in-JS library whose marketing site is a loud neo-brutalist page - a #fde047 yellow hero, black and white bands, Onest at weight 700 with tight negative tracking (210px wordmark headline), Geist Mono for code and eyebrows, yellow #facc15 accents, and 3px black borders with hard 4px offset black shadows.", "sha256": "3e037c7496ad449c2908a6fce1d23482884f193497c956681f8263a7812a08b3", "bytes": 18184}, + "pantheon-media-group": {"name": "Pantheon Media Group", "category": "Product & SaaS", "description": "Pantheon Media Group home screen measured live: black #000000 canvas with #f2f2f2 text over full-bleed video, uppercase PPMori 400 at 17.8105px with 0.534316px tracking, DMMono for bracket glyphs, 0px radius everywhere and no shadows.", "sha256": "0495602207f2cef9062edcecdf7d6a284687bd1aafc040c93547cc18cb6c9fc4", "bytes": 8462}, + "pantip": {"name": "Pantip", "category": "Thai Brands", "description": "Pantip Thai community forum measured live in its dark theme: purple-navy canvas #353156, cards #3c3963, primary #7459c8 follow buttons with white Arial 600 text, Roboto 16px reading text in translucent lilac #e9e5f6de, yellow #fbc02d panel titles and 2px to 4px radii.", "sha256": "75a022eccacc0c1828f75e7fb644698f745d889f951f90c30a14adc11929c066", "bytes": 10290}, + "panus-assembly": {"name": "Panus Assembly", "category": "Thai Brands", "description": "Panus Assembly (พนัส แอสเซมบลีย์) Thai truck-body maker site measured live: lime #8ec33d action tabs, deep blues #013b63 and #025086, #333333 body text, thaisans_neue Thai fonts at 20px, dark navy #001422 footer and single-corner 20px tab rounding.", "sha256": "0bb40c71638ff09be92aa757efdf1c24a83ec424d41b261ebfdd5c35ac7ce58d", "bytes": 11021}, + "paolo-vendramini": {"name": "Paolo Vendramini", "category": "Portfolio", "description": "Paolo Vendramini brand design portfolio measured live: white #ffffff and black #000000 with one pure blue accent #0000ff, NeueMontreal-Bold uppercase 12px captions, PPNikkeiMaru serif display, a 4-column 2rem-gutter grid, 16px radius and no shadows.", "sha256": "bd7e806e2b9b92d9e1a3ff4ddd37d952f831bf596fceac77764db78afc551627", "bytes": 9383}, + "paper": {"name": "Paper", "category": "Retro & Nostalgic", "description": "Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.", "sha256": "aa4d8b38f35a8264b90d3a8a216857860a32fa4d870f3fa8c6d77bd53955923f", "bytes": 3050}, + "paper-tiger": {"name": "Paper Tiger", "category": "Portfolio", "description": "Paper Tiger NYC web design agency measured live: white #ffffff and black #000000 with lavender #9589d3, lagoon #6dc9bc and tart #fa435b accents, giant Rightgrotesk 900 capitals, Onsitestandard 18px body, DMMono caps labels and square corners.", "sha256": "8e0b8f729d7128638e5f40ec574f8aec69f5b7880e55f842dbba8cd74d7c8f4b", "bytes": 10832}, + "paradise-park": {"name": "Paradise Park", "category": "Thai Brands", "description": "Paradise Park (ห้างพาราไดซ์ พาร์ค), an MBK Group mall on Sri Nakarin Road, Bangkok: white canvas, dark #323232 text, orange #fe5706 and lime #93d500 accents, the proprietary dbo_zone_x Thai typeface, pill buttons at 50px radius and 10px cards.", "sha256": "63a074ddca9139c851ba4a02ee97ed3099ac23906a67ae0503e734a719950e23", "bytes": 11538}, + "paragon-department-store": {"name": "Paragon Department Store", "category": "Thai Brands", "description": "Paragon Department Store is the website of The Mall Group's flagship Bangkok department store: a white page with a centered script-and-serif wordmark, a thin champagne-gold #a49e89 rule and accents, near-black #1f1e1f text in small 12px uppercase navigation, and grey #cccccc promo cards that carry loud red, black and purple campaign banners.", "sha256": "0ed06449b1b84c628adbb7649f72d7adcad1db32a44c67a8f089226972862faf", "bytes": 9494}, + "park-ui": {"name": "Park UI", "category": "Headless UI", "description": "Park UI (park-ui.com) is a component library built on Ark UI and Panda CSS, and its site is a quiet neutral showcase - Outfit type at 60px/700 with -1.2px tracking, a near-white #fcfcfc canvas, black solid buttons (#000000) with 4px radii, #d9d9d9 hairlines, #646464 body text, and soft layered shadows on 6px cards.", "sha256": "e632da4e10a6e81e58eeeffeec5ede75631f7c4a5addf78fd6546b5d498cee43", "bytes": 18089}, + "partizan": {"name": "Partizan", "category": "Portfolio", "description": "Partizan film production site measured live: white #ffffff interface frames and black #000000 text around a mosaic of footage, Teodor serif at 42.6667px with -1px tracking, GT America Standard 500 uppercase 8.88889px navigation, one 8.89px radius and no shadows.", "sha256": "8464645f31bc8735f37876cd72e368eaeac1358874942045f994a571fa7aa3dd", "bytes": 8928}, + "passione": {"name": "Passione Shopping Destination", "category": "Thai Brands", "description": "Passione Shopping Destination (แพชชั่น), a Thai shopping mall site: white canvas and a solid magenta #ed0281 directory panel, Celias display type at weight 800 with DB HeaventRounded body text, 10px and 20px radii, rounded promo photography.", "sha256": "f738622dc7c84f0ac34727c1eaa90ee7b2109f4b70052d5a1d61f51530ae56b3", "bytes": 9539}, + "patagonia": {"name": "Patagonia", "category": "Fashion & Apparel", "description": "Patagonia's storefront is a photography-first, near-monochrome system: Ridgeway Sans at weight 300 for body and 500 for headlines (64px/70.4px hero with -1.28px tracking), Copernicus serif for Stories, #000000 ink on a #ffffff canvas with #f5f5f5 8px-radius image tiles, a #1b2b79 navy hero panel, 30px-radius pill buttons (9px 28px, 39px tall) and a full-black #000000 footer, with #fa4616 orange reserved for activism headlines.", "sha256": "09e5db2b66143c014655c18df7a52bac8fffc807bb141ab4fcc57d025498ade7", "bytes": 40562}, + "patek-philippe": {"name": "Patek Philippe", "category": "Luxury", "description": "Patek Philippe's homepage pairs Open Sans Light uppercase display type at 40px with Lora serif body at 16px, charcoal ink #2e2e33 on a white canvas, one warm taupe accent #8c7a66, pill-shaped 9999px outlined buttons and full-bleed photography; flat, with no shadows.", "sha256": "ec7e9120cc033c3df25a9a1d26e5b981d74c86bb42c3c8006c489142974c8c38", "bytes": 9701}, + "patreon": {"name": "Patreon", "category": "Media & Consumer Tech", "description": "Patreon's home page is a scroll of full-bleed creator photography and periwinkle-blue (#71a0ff, #94bbff) bands, set in the ABC Oracle variable font at an ultra-light 250 weight (166.667px hero with -10px tracking), with black #000000 26.67px-radius pills with white text and a black footer.", "sha256": "ab4ed43ab5ef0590d558b522ffc7aca81aac844b20d2db35c46074781a3a8886", "bytes": 12908}, + "patternfly": {"name": "Red Hat", "category": "Design Systems", "description": "Red Hat's corporate site (redhat.com) on its Red Hat Display and Red Hat Text typefaces — near-black #151515 hero panels against white #ffffff, brand red #ee0000 pill buttons with 64px radius, #0066cc link blue, 16px-radius outlined cards with #c7c7c7 borders and a 36px/500 display headline over 18px body copy.", "sha256": "418922899362833d21cc251cc7ced266f130e10cd40fade09f5f9d3c67f7355f", "bytes": 11370}, + "paul-kalkbrenner": {"name": "Paul Kalkbrenner", "category": "Portfolio", "description": "Official site of electronic musician Paul Kalkbrenner: a white page with pure black ABC Diatype Plus Variable type at weight 700, a 133.333px display headline with -6.66667px tracking, a #c5c5c5 grey recordings band, #a7ff9c and #ff6831 accent blocks, and 13.33px or pill radii.", "sha256": "613e0221c7910a2e51f489ad42db372e12f79ecf65e16524c11712feb23ae4ce", "bytes": 12478}, + "paypal": {"name": "PayPal", "category": "Banking & Insurance", "description": "PayPal US homepage: white canvas with a sky-blue #60cdff hero, brand blue #0066f5 and navy #002991 panels, proprietary PayPal Pro 900-weight headlines (82.9px, tight tracking), 24px body in PayPal Pro Text VF, and 48px pill buttons with an 8 percent navy tint fill.", "sha256": "16b3842b9a6634b3dd7b530ea0fe9ec05f662346a86440a98ed50de922264e5d", "bytes": 10951}, + "pea": {"name": "Provincial Electricity Authority (PEA)", "category": "Thai Brands", "description": "Provincial Electricity Authority's English home page: white canvas, magenta brand #a80c8a with a #a80689 fill, aktiv-grotesk-thai at 400 to 600, 40px section titles, 16px rounded white service cards with a soft rgba(16, 24, 40, 0.08) shadow and 24px pill-like filter buttons.", "sha256": "2de200015246ff8824f589f9db8f2a61631d22e640e5de6aca2671d6e4b9c1e1", "bytes": 10741}, + "peaencom": {"name": "PEA ENCOM International", "category": "Thai Brands", "description": "Corporate site of PEA ENCOM International Co., Ltd., a solar and electrical-systems company, set in Inter with Prompt for Thai on a dark slate #343a40 canvas, green #00c96d highlights, translucent black #000000a6 header and square 52px buttons with a #00a65a border.", "sha256": "21fa571c0d80ef5ebefa9ca02c3038370a60d748a3f7212acacf7a66599fa335", "bytes": 10929}, + "pedestal": {"name": "Pedestal", "category": "Retail & E-commerce", "description": "Pedestal, the Danish-design TV stand brand: pale #fafafa canvas with #eeeeee tiles and #212121 ink, FK Display at 160px with -6.4px tracking, Suisse Intl at weights 400 to 500, near-square 2px and 4px corners, and a flat dark #212121 Configure button.", "sha256": "6a8800a03e15f4752baac8f08e9b1b5314cee45610724a5d7093c065d57a1e9e", "bytes": 11616}, + "pega": {"name": "Pega", "category": "Design Systems", "description": "Pega's homepage uses Lora 700 serif headlines at 64px in deep navy #001f5f with Open Sans body, #3e67bb pill buttons, a yellow #ffc836 accent and a navy-to-violet palette; the Constellation design system documents a separate Roboto Flex application UI.", "sha256": "66b89b38cefa508a4e49c91a1383683f855f7c5c991d57dae9ad1d3a54a91dc1", "bytes": 14026}, + "peloton": {"name": "Peloton", "category": "Sports & Fitness", "description": "Peloton's onepeloton.com retail system as measured — Inter (variable 100–900) throughout, near-black ink #181a1d with grey #65666a secondary copy, a cool off-white #f5f7f9 page surface alternating with white #ffffff, one Peloton Red #df1c2f (hover #d00c2a) for purchase CTAs, and fully rounded pill buttons whose radius is half their 56/48/40px height.", "sha256": "d16b8cd44131e15a77adb88fa3d441d71ccc08ae65a75fac60737792769b044c", "bytes": 26929}, + "penpot": {"name": "Penpot", "category": "Design & Creative Tools", "description": "Penpot's penpot.app marketing site: pale #f5f8fb canvas, dark blue #151035 text and footer, Work Sans throughout (72px regular hero with a 600-weight 'Together.'), turquoise #14ceca 8px-radius buttons with dark blue labels, outlined 1px #151035 secondary buttons, and a brand palette of magenta #f23ae5, violet #6911d4 and indigo #2f226c from the official brandbook.", "sha256": "8475b761896d96732ca985a27c23ae0f9df1574254188d169b78c51f6d3ad915", "bytes": 11866}, + "pensatori-irrazionali": {"name": "Pensatori Irrazionali", "category": "Portfolio", "description": "Pensatori Irrazionali, a European creative house: light grey #f5f5f5 canvas, black and #434343 helveticaNow type at weight 400, 60px display with -1.5px tracking, uppercase 12px LEARN MORE buttons on #434343 with 0px corners, and neon #2bff00, #f669e4, #ff0066, #adf800 swatches.", "sha256": "4678a6acd7670cc0c83238a06f00ec7d11d580ac4040255393cd5258f732d4c6", "bytes": 9904}, + "pentagram": {"name": "Pentagram", "category": "Agencies & Studios", "description": "Pentagram's site is an achromatic gallery catalog: a #ffffff canvas alternating with #222222 and #000000 bands, all text set in Optimo's Plain (served as \"Plain, Arial, sans-serif\") at weight 400 with 500 reserved for the wordmark and filter chips. Ink is #1a1a1a, secondary text #767676, display type 52px with -1.04px tracking. The only interactive fill is a translucent #00000012 chip with a 4px radius; imagery is square-cornered and carries all of the color.", "sha256": "d04860c63730bcd5e3ecbe1f17ea1872f06dc8633354914cdf18a479448283b1", "bytes": 37068}, + "pepsi": {"name": "Pepsi", "category": "Food & Beverage", "description": "Pepsi (pepsi.com, measured at https://www.pepsi.com/): a pure black canvas (#000000) with white uppercase text in pepsi-owner-extended, an electric blue #0000fe pill call-to-action with 30px radius and 18px uppercase label, brighter blues #0025ff and #2e86ff for accents, 60px section headings, and glowing product-can photography.", "sha256": "9105866eccfa7abfc0313d383ea9291bee1993cafa5d3a63f71a4e7ac00e8a78", "bytes": 10212}, + "pepsico": {"name": "PepsiCo", "category": "Food & Beverage", "description": "PepsiCo corporate site: white canvas, deep navy #02355a text and footer, light-blue #a5caee pill buttons, lime #bfde7d and forest #0f440e accents, Pressural 900 uppercase display at 224px with -7.84px tracking, Gilroy 400 to 600 body, and 24px or full-pill corners.", "sha256": "e0aeb3b22b75088288f114016bde7d17adb1b44a5fee2f2fa0b6586f6ccb4cbc", "bytes": 10682}, + "permian": {"name": "Permian", "category": "Fashion & Apparel", "description": "Sneaker brand site for Permian (permianworld.com): cool grey #dddddd canvas with product photography, electric blue #1f35f9 for text, buttons and footer, white #ffffff panels, supplyMono 12px uppercase labels, ballinger bold headlines, square 0px corners and dashed blue frame lines.", "sha256": "6c42654fe7d5a71ed565e98f88cf9b1b2e72bfd503e71132bafb14db8812ce9a", "bytes": 11209}, + "perplexity": {"name": "Perplexity", "category": "AI", "description": "Perplexity's logged-out home screen: a near-white #fbfbfb canvas with a left sidebar, pplxSans type at weight 400, deep teal-black text #071f21, a teal #016a71 accent, a 24px 'What do you want to know?' heading, a white rounded search box and 8px to 16px radii with 9999px pills.", "sha256": "5629883c488c1033b13904966ae4799ff31b3e44b700dc551ad50ddc124daf07", "bytes": 10976}, + "perspective": {"name": "Perspective", "category": "Layout & Structure", "description": "Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.", "sha256": "69196e2707b397e70c43cab0b4f2affe0830c04eae9bda2149be734deab3435e", "bytes": 3093}, + "petrobras": {"name": "Petrobras", "category": "Energy & Climate", "description": "Petrobras corporate portal (Brazil): white canvas, #373737 text, brand green #008542 with a #fdc82f yellow accent, link blue #0b5fff, Petrobras Sans at weight 700 with a 38px hero title, 8px cards with a #d7d7d7 border, 4px inputs and fully rounded green buttons.", "sha256": "c80a93fbbf19d6437e88507dda5f53d3b6ebd0255838804be72de86a5369f2d2", "bytes": 10800}, + "pfizer": {"name": "Pfizer", "category": "Pharma", "description": "Pfizer corporate home page (pfizer.com), measured — white #ffffff canvas, Pfizer Blue #2e29ff pill buttons (58.67px radius) hovering to #00009d, #0000c9 blue links, #0a0a0a text, pale #f2f9fc and #e0f5ff section tints, Pfizer Tomorrow 72px display and 42px titles over Pfizer Diatype 24px/20px text, 16px-radius cards with a soft 32px shadow.", "sha256": "a901900cd6586729c5b1f50f365bfaea2d0e51720ec8b9e0c620809a5362c2ad", "bytes": 13169}, + "phantom-land": {"name": "Phantom Studios", "category": "Agencies & Studios", "description": "Phantom Studios (phantom.land), a technology-led creative agency in London and Auckland: pure #000000 canvas with #ffffff text, Helvetica Now 500 to 700 with ballinger-mono 10.88px uppercase captions, 28px section titles, 48px pill buttons and 40px tag chips, no shadows.", "sha256": "32c65fee249306ba919c88270ed8f560d9803aa35fc424c26b6db4d03f0ed165", "bytes": 9869}, + "philips": {"name": "Philips (United States)", "category": "Healthcare & Wellness", "description": "Philips US home page (usa.philips.com): white canvas with #f6f8f9 product cards, #15191e text, Philips blue #0061c2 pill buttons and a #0b5ed7 top bar and footer, Neue Frutiger World at weights 350 and 700, a 36px hero title and 6px card corners.", "sha256": "9109e968c18841e600407c89a962beb41ac761d1bb097c2015ada81ff080c801", "bytes": 9926}, + "philips-hue": {"name": "Philips Hue", "category": "Consumer Electronics", "description": "Philips Hue US storefront: white canvas with #f9f9f9 bands, #101010 text, a Hue blue #0066f5 pill button (hover #0050a8), a #000826 midnight-blue nav, sohne type at weights 400 and 700, a 48px page title with 56px line height and 100px pill corners.", "sha256": "2b95aaaed61b0eec339874b8c81e28b3ce3b3e82acbaca0698cafe959a1cfa1b", "bytes": 10233}, + "phive-clubs": {"name": "Phive Clubs", "category": "Product & SaaS", "description": "Phive Clubs (phive.pt/en) is a dark warm-black #161003 fitness-club site with saturated yellow #ffe000, all-uppercase PPFormula and AcidGrotesk at weight 400, 29.392px rounded slabs and a white pill outline button.", "sha256": "49a8c419e5f3e574f21abd413dec02c62cefd1a03a5e4dab0b6ec76912671389", "bytes": 12230}, + "phonepe": {"name": "PhonePe", "category": "Design Systems", "description": "PhonePe's home page sets Inter Tight at 32px/500 headlines and 22px grey body on white, with a deep-space dark hero (#040417), a brand purple #5e2b9d for 160px-radius pill buttons, a #21153d dark purple card surface and soft illustrated product cards.", "sha256": "a0a5a06e82041bd5f5672c1a0c7ad646a9eb59adea8802a86457a54d8e38ab3b", "bytes": 11110}, + "piaget": {"name": "Piaget", "category": "Luxury", "description": "Piaget (piaget.com/us-en) is a Swiss luxury watch and jewelry site: white canvas, Piaget blue #022969 ink, PhxsgRhymesDisplay serif at weight 280 over PhxsgNeutrafaceText, square 0px corners and full-bleed campaign panels.", "sha256": "3c0c1109638474e92b85c66d48787067361804cbf9e2b314fe87319d3443fbc3", "bytes": 10913}, + "pico-css": {"name": "Pico CSS", "category": "Atomic CSS & Utilities", "description": "Pico CSS (picocss.com) is a minimal, class-light CSS framework for semantic HTML, and its site is airy and light - white canvas, #373c44 slate text, Figtree 700 headings (50px h1) over a system-ui 20px body, a #0172ad blue primary and #181c25 contrast button, 5px radii, and a very soft multi-layer blue-gray card shadow.", "sha256": "d8dfa29236300646f175494c7579553fc37d8c006c4c653ffa28fd7518c59c55", "bytes": 20205}, + "pictoric": {"name": "Pictoric", "category": "Portfolio", "description": "Pictoric (pictoric.com.ua) is a Ukrainian illustration studio site: grey #f6f6f6 canvas, chocolate brown #411f15 ink, yellow #ffe515 stickers, GTAmericaLCGV uppercase at weights 700 and 900, 14.22px card radius.", "sha256": "857a453c03e2ebc5e0b8b00270093048a97ab2cde3fcfa6068d0de41f1a493e2", "bytes": 11461}, + "pieterkoopt-r": {"name": "PieterKoopt®", "category": "Product & SaaS", "description": "PieterKoopt® (pieterkoopt.nl) is a Dutch painting-buying service: near-black green #171c1c canvas, beige #d4c6b9 text, sage green #7a8b69 call to action, Basic Grotesque uppercase with tight tracking and 2.67px button radius.", "sha256": "b3b853ad1822162990aa6f91ef2b159d38ef7793b60abf450806965d87624eb1", "bytes": 11555}, + "pinecone": {"name": "Pinecone", "category": "Backend, Database & DevOps", "description": "Pinecone, the vector database and AI knowledge platform: #fbfbfc and #ffffff canvases, warm near-black #1c1917 headings over #57534e body text, electric blue #002bff square CTAs (0px radius, hover #222160), gtPlanar at 44px/700 and 16px/24px, JetBrains Mono code tabs, and 1px #e7e5e4 hairline grids.", "sha256": "1c0adbefc99b15d5291311173acb5613ceb496a96fc337df81a1ce677185a03e", "bytes": 14085}, + "ping-an": {"name": "Ping An Group", "category": "Banking & Insurance", "description": "Ping An Group (group.pingan.com) is a corporate finance site: white canvas, Ping An orange #f05a23 headlines and buttons, GothamRounded at weights 400 and 500, dark warm-grey #4b4a48 footer, 3px solid buttons and pill outline secondary.", "sha256": "bfd80a7e1279632daf7dcfa413ff98220a3d927db027e62c91ce3cbd88091b21", "bytes": 10916}, + "pinterest": {"name": "Pinterest", "category": "Media & Consumer Tech", "description": "Pinterest.com landing page as measured: a white canvas with near-black (#000000) text, the single saturated brand red #e60023 on its \"Join Pinterest for free\" and \"Log in\" buttons (16px radius, 48px tall, #cc001f on hover), warm sand neutrals (#e5e5e0) for secondary fills, and the proprietary Pin Sans family at weights 400 to 900, with a 48px/900 hero headline. Photographs carry all the color; the chrome stays neutral.", "sha256": "f8c504e7d46a847165bc4097378ac4ca355ff7b6d6d56640be22cb4e60e8e21d", "bytes": 19076}, + "pipedrive": {"name": "Pipedrive", "category": "Product & SaaS", "description": "Pipedrive's CRM homepage sets a Haffer 52px/700 green #017737 headline on a mint #d7f9d3 hero, Inter body text in navy #192435 on white, violet #6861f2 4px-radius 'Try it free' buttons that deepen to #413d99 on hover, lavender #e1e1ff secondary buttons and a yellow #ffde00 pill.", "sha256": "46b1a21a1df28baa1cae6042016598712ae08c1bbe06b5950cf37109cb472e03", "bytes": 15277}, + "pitch": {"name": "Pitch", "category": "Design & Creative Tools", "description": "Pitch (pitch.com), the Berlin-built AI presentation workspace: white #ffffff canvas against deep violet #280f62 bands, electric violet #5318eb primary, lime #c4ee87 sign-up chips, Mark Pro Bold display at 180px/-7.2px over Eina 03 Regular 16px body, 4px button radius and 16-40px rounded cards.", "sha256": "efd6faecce2b0476a45e4a7199bbc516572fefe5ee624dd1f80fa80e6217797e", "bytes": 15695}, + "plaid": {"name": "Plaid", "category": "Banking & Insurance", "description": "Plaid (plaid.com) is a fintech data-network site: white canvas, navy #02294b ink, teal #05565c, footer #00172e, Plaid Sans and Cern, tightly tracked headings and fully rounded pill buttons with soft multi-layer shadows.", "sha256": "370ac25b487476f3ba0f2aa10ce1910ba029227ed0aa5f2b9c28e664c2b33bc6", "bytes": 12841}, + "plan-b-media": {"name": "Plan B Media", "category": "Thai Brands", "description": "Plan B Media (planbmedia.co.th) is a Thai out-of-home advertising site: navy #002563 header, light #f7f7f7 canvas, Montserrat 800 hero over Prompt 300 body, white 100px pill buttons and 20px rounded cards.", "sha256": "00cfa50b6dde96f38e53415dc048150cab8acedda1a31bcf7ae872d75d864bee", "bytes": 11038}, + "plane": {"name": "Plane", "category": "Productivity & SaaS", "description": "Plane.so home: white #ffffff canvas alternating with near-black #0f0f10 bands, Satoshi 58px/430 headlines with -1.74px tracking, Inter UI text at weight 430 in #1d1f20 and #4e5355, near-black #090b0c 8px-radius buttons, #f7f7f8 12px-radius product cards with #eaebeb borders and a blue #006399 accent for eyebrows.", "sha256": "7808676c389422d97f8cce7a3564e811176ea845695279a5d14fdf136d81cb7e", "bytes": 11925}, + "planetono": {"name": "Planetoño", "category": "Food & Beverage", "description": "Planetoño (planetono.space) is a playful space-food concept site: flat red #eb3322 canvas, cream #f7f2e5 display type, black #000000 outlines, Futura Passata bold with -2.18px tracking and Poppins 15px body.", "sha256": "68a46b08e7bed25be6ba32309e2cea494aafe23bd5163efa815f19b80aad4c6c", "bytes": 9939}, + "planetscale": {"name": "PlanetScale", "category": "Backend, Database & DevOps", "description": "PlanetScale's marketing site is a single-typeface terminal page — the system ui-monospace stack at 16px/24px for every heading, paragraph and button, #414141 ink on a #fafafa canvas, a #fbca00 announcement bar, #f35815 orange square-cornered CTAs (0px radius everywhere), #0b6ec5 inline links and #111111 tab buttons.", "sha256": "22aad7b4e98b4ba44ab887edfdf6e1693205df855685ebd075501858144ef3dc", "bytes": 14846}, + "plasmic": {"name": "Plasmic", "category": "Developer Tools & IDEs", "description": "Plasmic's plasmic.app marketing site: white #ffffff canvas alternating with near-black violet #060317 sections, Inter throughout (80px/600 hero at -3px tracking), black #0d0d12 pill buttons with #ededec labels, a purple-pink-coral-orange gradient (#8636f8, #f020b3, #f8475e, #ff9421) on highlighted headline words, and 21px-radius translucent dark cards with #343337 borders.", "sha256": "ebc7134fcdaa4873b5d54fe4eb595f9f26d982c757c33f9fa804f75a36e6af44", "bytes": 11971}, + "platinum-fashion-mall": {"name": "Platinum Fashion Mall", "category": "Thai Brands", "description": "Platinum Fashion Mall runs a WordPress site set entirely in Montserrat with Prompt for Thai, where headings and the Platinum logotype share one royal indigo, #272897, on a white canvas; headlines are 800-weight Montserrat at 24px, navigation is 600-weight uppercase at 18px, and big rounded corners of 25px to 70px shape cards and outlined buttons.", "sha256": "378fc0634053d480efecd61924a0e1156661291e72b97155d7ff67bfd7539cde", "bytes": 11057}, + "plausible": {"name": "Plausible Analytics", "category": "Product & SaaS", "description": "Plausible Analytics' marketing site: a #f9fafb and white page in the system-ui font stack, 48px weight-800 headlines with -1.2px tracking and an indigo #5850ec highlight, slate #4b5563 body text at 18px/32px, #5850ec CTAs with 6px corners that lighten to #6875f5, and a dark #252f3f footer.", "sha256": "95531ae1d9f68ddee079afbe8b8b411d864843bc5e642c36b6ced7dc4b13dcc8", "bytes": 15020}, + "playstation": {"name": "PlayStation", "category": "Media & Consumer Tech", "description": "The PlayStation Thai-language home page as measured: a white canvas under a black Sony strip, a dark #121314 games band, light-weight (300) Thai-capable headings, and a single PlayStation blue #0070cc on pill-shaped sign-in and learn-more buttons (hover #005499). Condensed uppercase AlternateGotNo1D appears at 52px for promo titles; SST loads at 400/500/700. Photography and console renders carry the color.", "sha256": "a8353643887d98673f365bce7e29a406ecb7c0a85151c9d4546cdfcec296bc5e", "bytes": 20074}, + "pluralsight": {"name": "Pluralsight", "category": "Design Systems", "description": "Pluralsight's marketing site uses PS TT Commons at weight 400 for 56px headlines with -2px tracking, a deep ink-purple #130f25 for pill buttons and dark bands, warm #f7f5f4 surfaces, white 20px-radius cards with soft shadows, and hot pink (#ff1675, #e7005e) and lime (#cfff6e) accents.", "sha256": "0c7b1e5e5d1213496da4e5961ddee724db36caedd9b13f45a65c6256a130b101", "bytes": 12217}, + "podium": {"name": "Podium", "category": "Portfolio", "description": "Podium (podium.global) is a sports creative studio site: black #000000 canvas with white and black uppercase bold Futura (57.408px headings, 24px display, 16px body), Univers Condensed footer, and every element square at 0px radius.", "sha256": "0fc4f726048d02fc3afaf5f3a1ac7f71f514d57e5014409e3945ce6fcfad44d8", "bytes": 10004}, + "polaris-design": {"name": "Shopify Polaris", "category": "Design Systems", "description": "Polaris, the Shopify UI framework now shipped as s-* web components, measured on the shopify.dev docs and in its live component previews: Inter at a 13px/450 base, near-black #303030 primary buttons and text, 8px-radius controls 28px (buttons) or 32px (fields) tall, 12px-radius sections, pale tone fills for badges and banners, and a docs shell in cool blue-greys.", "sha256": "da01d3f4398b43e3590203cbd08512b78690ab04d78024203391a04ca2eaf223", "bytes": 24035}, + "polestar": {"name": "Polestar", "category": "Automotive", "description": "Polestar (polestar.com/global) is an electric-car site: white #ffffff canvas with #f0f0f0 panels, black text, Polestar Unica at weight 400 with tight negative tracking (-1.2px at 30px), square outlined buttons and photography-only color.", "sha256": "6ef6dc96a4775f7a3dbcaf290ac1df7835b9be5c2b39e14d2a8ff7d23ab6b9eb", "bytes": 10354}, + "politico": {"name": "POLITICO", "category": "News & Publishing", "description": "POLITICO (politico.com) is a US political news front page: white canvas, black bold din-2014 headlines (58px lead), POLITICO red #d71920 accents, tracked uppercase 10px bylines, 8px cards and a navy #121522 footer.", "sha256": "4926abbee747c3376de137e6800b626cc3d5eb34586741b49a3f36e41432c76e", "bytes": 10949}, + "polyplus": {"name": "Polyplus Entertainment", "category": "Thai Brands", "description": "Polyplus Entertainment (polyplus.co.th) is a Thai TV production company site: white canvas with a #f7f7f7 program band, #0099cc footer, Arial 14px and 12px at weight 400, blue #0066ff links turning orange #ff6600, and square 0px corners.", "sha256": "d4e13b101a679b454ae10511d102e6907df366482d4b103c4366ab74ff554a9e", "bytes": 11000}, + "pomelo-fashion": {"name": "Pomelo Fashion", "category": "Thai Brands", "description": "Pomelo's US storefront (pomelofashion.com/us/en) is a white-canvas, photo-led fashion shop: black #000000 ink, a #e4e4e4 grey product-tile ground, CircularXX Web Medium/Regular set small (12-20px), 1px square outlined SHOP NOW buttons with 1.35px uppercase tracking, and a #dd5260 coral reserved for error and sale emphasis.", "sha256": "7e44ea2f741ebbf87d87a5865767f628ebbed01f0175a9c677f27a274d521c77", "bytes": 12646}, + "ponpon-mania": {"name": "Ponpon Mania", "category": "Culture & Events", "description": "Ponpon Mania (ponpon-mania.com) is an interactive comic by Justine Soulie and Patrick, a single 1280x800 illustrated scene on a near-black #171717 canvas with cream #feece3 Libre Franklin 700 labels at 15px, a black 'read now' pill over flat purple, orange, pink and green artwork, and 3px, 25px and 42px radii.", "sha256": "30b92346c3c5f8bec49af3f79ab89d91416bc3986594e4be43b56619d01073d6", "bytes": 9281}, + "pop-up-10-ans-la-rosee": {"name": "Pop-up 10 ans La Rosée", "category": "Fashion & Apparel", "description": "Entry page of La Rosée's 10th-anniversary pop-up microsite (popup.larosee-cosmetiques.com): a white 24px-radius welcome card with a Chaparral serif 30px title in navy #304656 and Basis sans 14px copy in slate #82909a, floating over a full-bleed 3D paper-flower scene in powder blue, pink and yellow.", "sha256": "1afe8f8e53c6fda6f036d3907314754862a652718d91af9133927c56302fc203", "bytes": 8827}, + "porsche": {"name": "Porsche", "category": "Design Systems", "description": "Porsche's site is built on its own Porsche Design System: Porsche Next type at 16px/400, black #010205 buttons with 12px radius and 56px height, white #ffffff canvas with full-bleed dark car photography, 24px and 32px rounded image tiles, and frosted translucent grey secondary buttons.", "sha256": "5d202eb14b701c34049a1b5f51fabfc33939614835c4280844fd99a2236ec508", "bytes": 11605}, + "posthog": {"name": "PostHog", "category": "Backend, Database & DevOps", "description": "PostHog.com as measured: an operating-system-style desktop of translucent windows over a grass wallpaper, set in the RoundHog typeface (500 body, 800 headlines at 36px), on a sage cream #eeefe9 canvas with #fdfdf8 cards, amber #cd8407 call-to-action buttons with a 1px #b17816 border and 8px radius, and the brand red-orange #f54e00 reserved for active tabs and frames.", "sha256": "245c270072a75095dd821e5edc925eec55d611ed26f7c91e080a6e59fc3c1ce8", "bytes": 18035}, + "postman": {"name": "Postman", "category": "Developer Tools & IDEs", "description": "Postman runs a warm-black #0e0704 developer page: gtStandard 56.32px/500 headlines in cream #fff0de, Inter 19px/30.4px body in #cdbfad, IBM Plex Mono labels and code, a #e0531f orange 5px-radius Sign Up button hovering to #ff6c37, pill chips with #ffe0c424 hairlines, 10-12px-radius cards and glowing orange-violet gradients.", "sha256": "c001b8aa8af8292b11eb374beed3503ee73f86a7d78240187571ec98adcecdde", "bytes": 15949}, + "postmark": {"name": "Postmark", "category": "Developer Tools & IDEs", "description": "Postmark (postmarkapp.com) puts Elizeth 700 slab-serif headlines (52px) over Rund Text body copy on a signature #ffde00 yellow hero and a warm #faf9f7 canvas, with #007bc8 blue buttons (4px radius, 1px inset ring) darkening to #005e99, coloured feature headings (#ed746f, #6e5bff, #4fc47e) and line illustrations.", "sha256": "5535e95a3a07f516424bb7ca2bc42ad3d02a08bf8cf1e236146a6a01a997a2fd", "bytes": 13343}, + "pp-neue-montreal": {"name": "PP Neue Montreal", "category": "Business & Corporate", "description": "Specimen site (neuemontreal.com) for Pangram Pangram's PP Neue Montreal grotesque: a #1a1a1a dark canvas with cream #f0e7d4 type, an #ff4000 orange-red signature, a #d82f2f red hero, multicolour display words in green, yellow, blue and pink, and pill-shaped controls (999px to 1000px) set in the typeface itself.", "sha256": "6e950b34afc4c79acd04d7c587134e3dffad1fe6f619675f35dee18d3ab82abd", "bytes": 10964}, + "prachatai": {"name": "Prachatai (ประชาไท)", "category": "Thai Brands", "description": "Prachatai.com, Thai independent news site: a dense white newsroom front page with a black category bar, alternating #cccccc and #ffe2c9 section bands, Anuphan 600 headlines at 24px and Sarabun 15-16px copy, a #e96024 orange 'read more' button, #ff6347 theme links and 4-6px radii.", "sha256": "ea1d6d4ee869b354185dd16f6ac0c748b67189b343ee0bef1ef36b41ff533482", "bytes": 11143}, + "prada": {"name": "Prada", "category": "Luxury", "description": "Prada's US store (prada.com/us/en) is a white, photography-first system set entirely in Grilli Type's GT-America (400/500/700): 32px/500 hero titles in white over full-bleed 1280x720 campaign media, 14px/500 uppercase underlined text CTAs with 0.2px tracking, #000000 ink with #4e555a and #767676 secondary greys, #f7f7f7 editorial bands, a #111111 news section, #ebebed product wells and 0px corners on every button, card and image.", "sha256": "14d65d26f4c549f781f2fe20c8cc4b9326f96edc075e96b4fb19e35975923bde", "bytes": 18354}, + "preact": {"name": "Preact", "category": "Frontend Frameworks", "description": "Preact (preactjs.com) is a white #ffffff docs-style site under a full-width Preact purple #673ab8 hero, system-ui type (64px/100 thin section headings, 16px/26.4px body in #444444), uppercase letter-spaced 4px-radius buttons with 3px #eeeeee borders, and dark #101725 code blocks with Material-style syntax colours (#ff696d, #ffcb6b, #c792ea).", "sha256": "2ae94101a7c26433fce5c5107bc7ac4552ea9f82ff534201baed4e4939cb6260", "bytes": 14023}, + "preline-ui": {"name": "Preline UI", "category": "Frontend Frameworks", "description": "Preline UI, the open-source Tailwind CSS component library, as measured on preline.co and in its live component previews: a stone-grey page (#f5f5f4 canvas, #292524 ink), one electric blue #155dfc for solid buttons and links, 8px-radius 46px buttons and fields, 12px cards, the system-ui font stack, and a gray-toned demo palette (#e5e7eb borders, #1e2939 text) inside the previews.", "sha256": "0f6f7c6dccc9f403495ee94e3c3dfe6f19fb7630803f34de6cd4e99545daa033", "bytes": 23646}, + "premier-league": {"name": "Premier League", "category": "Sports & Fitness", "description": "premierleague.com as measured — Premier League purple (#37003c) as the single ink and action colour on a near-white lilac-tinted canvas (#faf9fa) with white 12px-radius content cards, the league's own Premier Sans served as PremierLeague / PremierLeagueBold with uniform -0.02em tracking (32px hero, 24px section heads, 16px card titles), fully rounded purple pills, and a neon brand gradient (yellow #ebff00 to green #00ff87 to cyan #05f0ff) reserved for accents like the Join myPL ring.", "sha256": "ea37ad51269340fd19fda9481709507146703f70c1b9cbe0348d6a7be973a59b", "bytes": 23784}, + "premium": {"name": "Premium", "category": "Professional & Corporate", "description": "Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.", "sha256": "4bece56047e4faac9efc18afc38f067d4087fa33cf8a62477b2878beb794bbad", "bytes": 3047}, + "priceza": {"name": "Priceza", "category": "Thai Brands", "description": "Priceza, Thailand's price-comparison portal: a proprietary Priceza typeface, a blue (#1e7be5) 4px-radius 'เช็คราคา' button on 8px bordered product cards, a 47.9864px white hero headline over photography and an orange sale ribbon.", "sha256": "248e47857b8d9bba232ad6a148659174047007102fa50e869d0852deb917cb92", "bytes": 10988}, + "prime-road-power": {"name": "Prime Road Power", "category": "Thai Brands", "description": "Prime Road Power (PRIME, primeroadpower.com), a Thai solar-power developer, uses a white canvas #ffffff, near-black ink #1d1d1d and a signature red #bb241d for its View more buttons and FY 2025 heading, set in Prompt with Raleway and Sarabun accents, 3px button corners and grey #f8f8f8 country cards.", "sha256": "4b28ec07705b2deaefc5330f630cc06983140e0d48ed688d9ee8c2cab36d6c3e", "bytes": 10493}, + "primeng": {"name": "PrimeNG", "category": "Design Systems", "description": "PrimeNG's site pairs Inter var at light weight 400 with tight negative tracking (60px display, -3px) on a near-white slate canvas, a near-black navy primary (#020617) on pill-shaped 48px hero buttons and 6px-radius docs buttons, and slate greys for text, with a full dashboard screenshot as the hero image.", "sha256": "7f78f4dc2809801bbad3f521662c1cc5303d879f5108b2c64e29747a8e47ffed", "bytes": 14659}, + "primereact": {"name": "PrimeReact", "category": "Frontend Frameworks", "description": "PrimeReact, the React component library whose v11 site is primereact.dev, as measured on its home page and Button and InputText docs: Inter on slate neutrals (#334155 text, #f8fafc page, #e2e8f0 borders), a near-black #020617 primary, 6px-radius 35px demo buttons and inputs, pill-shaped hero buttons, and -3px tracking on the 60px headline.", "sha256": "ffa2648d3f1b4011e20b3da4b14405b786c9d7d743f5e556b51227686128c967", "bytes": 20918}, + "principal-thailand": {"name": "Principal Thailand", "category": "Thai Brands", "description": "Thai fund-management and provident-fund site in FS Elliot Web and ekkarach: white #ffffff ground, #035fa4 blue links and 4px-radius buttons, #0091da header blue, #373737 charcoal footer, #464646 body text, no shadows.", "sha256": "2483683e13263f253312b655293b14ad06b0b8447f06ae27d0ac222234b1759b", "bytes": 10131}, + "prinsiri": {"name": "Prinsiri", "category": "Thai Brands", "description": "Prinsiri (prinsiri.com) developer site: SMBAdvance Thai type at 40px headings and 23px light body, brand purple #6b3a6f with deeper #5a1d60 and an orange #ed6423 promotional accent, #58595b grey ink on a #e2ded6 canvas with white cards, 3px-radius outlined buttons and bright house photography.", "sha256": "7010c512bd70f454ae1fa5de249dcdca4bc6075e3a32a85dee14cdcf42c4639b", "bytes": 10095}, + "prisma": {"name": "Prisma", "category": "Backend, Database & DevOps", "description": "Prisma (prisma.io) is a white #ffffff page with Sora headings (57.6px/500 hero), Inter body at 16px/26px in #646567, black #000000 pill CTAs (12px 24px, 48px tall), glassy 18px-radius cards with #e5e5e5 borders, and the brand 'prism ray' — cyan #01d7e4, yellow #f3c306 and red #f34a60 bands at −16° — over grain-washed rainbow panels.", "sha256": "e21c4ab2a64c788d0572cf16910d5336ff3433d6331c444475c746acc906fa6a", "bytes": 13495}, + "privy": {"name": "Privy", "category": "Design Systems", "description": "The Privy digital-identity and e-signature site (privy.id, Indonesia): Google Sans Flex Variable at 56px/700 headlines, DM Sans on buttons, Privy red #e60034 pill buttons, deep plum ink #430a23, white content bands, beige #f2e8dd footer and dark burgundy sections with a dotted pattern.", "sha256": "ab4c415de4039c5ff4c7a0b225da27f4336438ddcdb8d0f8fc7c8be7d6f66996", "bytes": 12346}, + "procreate": {"name": "Procreate", "category": "Design & Creative Tools", "description": "Procreate's home page is a black #000000 showcase set in the system UI font: 70px/600 headlines with -0.35px tracking, 20px/30px body, blue #0076ff 'Buy now' pills (100px radius, hover #2189ff) beside graphite #262626 'Learn more' pills, and #121212 product cards with 24px corners and a 10% white hairline, all built around vivid full-bleed artwork.", "sha256": "92971d8e8476d63cdb36e4313a62d3b66f30de102eb1682314d28ed7ebcf8cac", "bytes": 12188}, + "procter-and-gamble": {"name": "Procter & Gamble (P&G US)", "category": "Beauty & Personal Care", "description": "P&G's US corporate site (us.pg.com): Montserrat throughout, royal-blue #003da5 as both ink and brand fill, a #f2f7ff pale-blue content band, white canvas, pill buttons with 44px radius, circular and arched image masks, and soft blue-grey shadows such as rgba(0, 0, 0, 0.05) -8px 16px 16px.", "sha256": "6bfd2eeb4fecf6a7d07f1abccfe404b94ab1e0676b45b8747e6f59e3ff18667e", "bytes": 9575}, + "produx-design": {"name": "Produx Design", "category": "Agencies & Studios", "description": "Produx (produx.design), a branding studio whose site is a near-black #0e0e0e canvas with a huge thin PRØDUX wordmark, At Aero grotesque headlines at 56.832px, DM Mono 12-17px uppercase labels in bracket syntax, and large tilted flat panels in olive #303930 and #545e54; radii are pill-only.", "sha256": "780565f76af41f68d0ff29d0f1f745e11fb4e5eda6465b22119301b12ae70e01", "bytes": 10593}, + "proennet": {"name": "PROEN Corp Public Company Limited", "category": "Thai Brands", "description": "PROEN (proen.co.th/web), Thai data-center, ISP and multi-cloud provider: IBM Plex Sans Thai throughout, sky blue #00b3ff and #009de0 on a white canvas, #f2f2f2 grey carousel band, #373737 charcoal footer, white outlined pill buttons with 25px to 100px radii over full-bleed cloud and data-center photography.", "sha256": "86d568223cbc7961b1f129d09f7db596c8519e8baad330a5567e1f5458b42d26", "bytes": 10689}, + "professional": {"name": "Professional", "category": "Professional & Corporate", "description": "Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.", "sha256": "c3c652fdf2c08441088b79b859ed0e25a48c0bcd679333b7bc909e7199e61cb6", "bytes": 3064}, + "propertyscout-th": {"name": "PropertyScout", "category": "Thai Brands", "description": "PropertyScout (propertyscout.co.th), an English-language Thailand property rental and sales platform. Roboto at 400, 500 and 700, orange-red #e74119 buttons with 6px radius, navy #002a55 stats band and footer, green #0c8b46 verified badges, #fafafa and #ebebeb section greys and 16px listing cards.", "sha256": "65b17cf06aae671e605b56caac3068e4938fe281d53cafc131ebb631b8bd64fc", "bytes": 10470}, + "prospect-logistics": {"name": "Prospect Logistics and Industrial Freehold and Leasehold REIT", "category": "Thai Brands", "description": "Investor site of Prospect Logistics and Industrial REIT in Gothic A1 with Noto Sans Thai (900-weight uppercase headings at 44.7px), deep navy #1a3870 canvas, orange #f59024 figures, green #3bb04a accents, white ink and square outlined buttons with 2.4px tracking.", "sha256": "d4dca74631e2d7892890139aacd5029b95dd151d9b0f5a2b85cca04751a3b819", "bytes": 10655}, + "proton": {"name": "Proton", "category": "Tech & AI", "description": "Proton's privacy-suite site: ProtonSerif (ABC Arizona Flare) headlines at 60px/63.6px with -2.4px tracking in deep violet #372580, ProtonSans (Inter) body at 16px/26px in #4b5563, Proton purple #6d4aff pill buttons 50px tall that hover to #4a2dc5, on white with #f6f7f9 panels, 24px-radius cards and a lavender #e2dbff tint.", "sha256": "7c53012e75c0fb52ec3c5985b46b90dea20fa7cbf6c8f7907c3280b49ed704fc", "bytes": 12172}, + "prototype-3": {"name": "Prototype (Prototype Studio)", "category": "Portfolio", "description": "Prototype (prototypestudio.fr), a French creative house for daring brands: a white canvas ruled with 1px #00000014 hairlines and diagonal construction lines, black type in condensed uppercase DeanGothicCMP (88.8889px display) and light italic SilvanaDisplay serif (40px statements), with only pill-shaped (9999px) elements.", "sha256": "a99a96f8ff22ad4885d46d636f43cfd7b84d3e27b1abc47009a651b917a8e11d", "bytes": 9918}, + "prudential": {"name": "Prudential Financial", "category": "Banking & Insurance", "description": "Prudential Financial's US home page (prudential.com): a white canvas with #1a1d1e text, Prudential blue #0066cc for links and the primary pill, navy #091f3d and #001f45 bands, a #443bb2 indigo card band, #ffd200 yellow for Request a call and Log In, Pru-Modern condensed headlines and Open Sans body, radii from 3px to 44px.", "sha256": "b04783ffc6fa5419aec78695dfae24461a572a183d1d53f646007d72c78a433d", "bytes": 12282}, + "prudential-thailand": {"name": "Prudential Thailand", "category": "Thai Brands", "description": "Prudential Thailand English homepage: Open Sans with negative tracking at 18px body and 32px semibold headings, Prudential red #da291c on 96px-radius pill buttons (48px tall, #a31f15 hover), #f8f9fb and #fff4f6 tinted panels, #131313 hero black and 16px card corners.", "sha256": "82e1e561e9b0eae784c6ffa2e06b8a237c73574119d08d8c06ff3d5983bf4f4a", "bytes": 10609}, + "pruksa": {"name": "Pruksa Real Estate", "category": "Thai Brands", "description": "Pruksa Real Estate (pruksa.com/en), Thai home developer: warm grey #f2f2f1 canvas, #444444 text, one olive green #6d981d for the search action, DB Gill Siam X uppercase headings at 46px, square 1px-outlined buttons with 0px radius, and full-bleed project cards under a saturated campaign carousel.", "sha256": "ab7442d2c1864f41aacadf4ae11aad5cd3d5d1e2cc97c84a37719e97217b052a", "bytes": 11276}, + "psu": {"name": "Prince of Songkla University", "category": "Thai Brands", "description": "Prince of Songkla University (psu.ac.th/en), southern Thailand: white canvas, #666666 body copy, deep PSU blue #003c71 footer and links, light blue #68a8de accent, psu-font 40px 600 headings, uppercase tracked menus over a blue silk hero, 3-4px corners and a translucent pill TOP NEWS button.", "sha256": "644d4f4cad7314aba042fd9988cf88cac003f07c902f21f7603c8dd36d28f8fb", "bytes": 10221}, + "ptt": {"name": "PTT Public Company Limited", "category": "Energy & Climate", "description": "PTT's corporate portal (pttplc.com/en) is set entirely in the proprietary PTT45Pride typeface (16px body, 44px hero), on a pale aqua canvas (#edfcfe) with navy ink (#183259, #002f5b), a white 9999px pill 'View All' button with a soft 4px 4px 8px shadow, and 16-25px radii on cards and inputs.", "sha256": "75f130c90aab17ef0cabf20c683fc6a7a2ab53158ce15500bb8ff4b4510cfcd0", "bytes": 10618}, + "ptt-global-chemical": {"name": "PTT Global Chemical", "category": "Thai Brands", "description": "PTT Global Chemical (GC) pairs a corporate blue (#0056b8) and deep indigo (#1b1466) with DM Sans plus Noto Sans Thai at 18px body and a 34.8512px bold h2, 40px pill buttons and search field, 10-50px rounded cards, and very soft shadows over white and #f2f2f2 surfaces.", "sha256": "5d13bf4119652f82bbf8d12540d384c3dd9e8d91d4fb33ff6e1d71570b73a695", "bytes": 10584}, + "ptt-ngd": {"name": "PTT NGD", "category": "Thai Brands", "description": "Corporate site of PTT Natural Gas Distribution Co., Ltd. in PSL Kanda Thai display faces (112px uppercase headline) and 13px Tahoma body on white, with a dark translucent #323232ab numbered header, yellow #f3eb0a section accents, sky-blue #26aae2 text and #dddddd form fields.", "sha256": "6c3e9a967672bddc6f61679c27e45234fd5ca60ae9e437b5245fa82027976440", "bytes": 9112}, + "ptt-oil-retail": {"name": "OR (PTT Oil and Retail Business)", "category": "Thai Brands", "description": "OR's English home page (pttor.com/en/home) uses the DB HelvethaicaMon X typeface at 20px body with 1px tracking, a cyan-blue CTA (#00aeef) on white and #ecf4fd, deep indigo headings (#1b1464), 10-12px rounded buttons, and 100px or circular image masks with a soft rgba(49,69,244,0.1) 0 15px 45px shadow.", "sha256": "0e59efc26d00eee70c583c69b6f042630e0d7a37f727ca913edd8de43e1339cd", "bytes": 10999}, + "pttep": {"name": "PTTEP (PTT Exploration and Production)", "category": "Thai Brands", "description": "PTTEP's English home page (pttep.com/en/home) is set in Inter with Noto Sans Thai at light 300 weight (19px body, 44px display on #474747 ink), with a cyan accent (#009fda), pale blue bands (#f3faff, #ccecf8), 8-10px rounded outlined buttons and no box shadows.", "sha256": "59c5bea7bb80a02b95bd5d7d7180f038b7fe1082817523265b6eae21a319a92f", "bytes": 10217}, + "publication": {"name": "Publication", "category": "Creative & Artistic", "description": "Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.", "sha256": "f0aaeed691caeecf624bb510482baee6a5d1fe2593ac72b87e691c3009e37b03", "bytes": 3065}, + "puma": {"name": "PUMA Thailand", "category": "Sports & Fitness", "description": "PUMA's Thai storefront (th.puma.com, puma.com redirects here) is monochrome: black (#000000) uppercase 15px/600 Shop Now buttons with square corners, #181818 ink on white, Noto Sans Thai 700 uppercase headlines at 56px and 24px, FFDINforPuma for the cookie button, and no shadows.", "sha256": "fb9fee2a07f24b3bef9090a993afdc18b1a0bafced508164bb7641d7805592c4", "bytes": 11036}, + "purpose-talent": {"name": "Purpose Talent", "category": "Tech & AI", "description": "Purpose Talent is a warm cream-and-ink search consultancy site: #f9f2e9 canvas, #1e1e1e ink, a #f0b420 yellow pill CTA with white Raleway 700 text, uppercase Tay Bea display type at 110.08px and 52.48px, 16-35px card radii, and soft warm shadows (rgba(123, 94, 92, 0.06)).", "sha256": "016cee37c2879fdc2cbcfb8275a77e14dc413703ae4a3d7eb49143de52e32eff", "bytes": 10238}, + "pusher": {"name": "Pusher", "category": "Design Systems", "description": "Pusher, the hosted realtime APIs company (a MessageBird company), marketed in Maison Neue (500-weight 48px display, 16px/28px body) with a deep-aubergine #300d4f ink and button fill on a pale lavender #f9f8ff canvas, a violet #7000ff accent, dark #3e414f code panels, 4px-radius 48px-tall buttons and 6px-radius panels.", "sha256": "c1aa95c788e31223f1cc3a8aebbadd5ad1c17e23283d47c9e16f298f8ac0fb73", "bytes": 11014}, + "pwc": {"name": "PwC", "category": "Agencies & Studios", "description": "PwC's global home page (pwc.com/gx/en) pairs ITC Charter serif headlines (52px/700 with -2px tracking, 108.8px/800 hero) with Helvetica Neue body, a flat peach CTA (#ffaa72, black text, 0px radius), brand orange #fd5108, white and #fff5ed bands, no shadows and no rounded corners.", "sha256": "010bb7f1487906cf7d928bd01b639ed516ec044de11c30643f5fadbc7bd999ae", "bytes": 10726}, + "px-push": {"name": "PX PUSH", "category": "Portfolio", "description": "PX PUSH is a retro-tech design subscription site: SemiSqueezed display type at 153.6px with -1.28px tracking, Mono 14px captions, ink #111111 and silver #bababa on #71737d and #1a1a1a, electric blue #03049c panels, a #00ff00 status dot and 6.4-12px radii with no shadows.", "sha256": "7513f26100ef6ee885ff31baafcee86394b2021a57ffbcec145bdcf64bdab161", "bytes": 10354}, + "qantas": {"name": "Qantas", "category": "Airlines", "description": "Qantas Airways' web booking and marketing system — proprietary \"Qantas Sans\" served at 300/400/500/700, Qantas Red #df0000 for every filled CTA (hover #bc0b07, pressed #99110b), charcoal ink #323232 on white with warm-grey #f3f2f1 search fields and teaser surfaces, 24px-radius search button and 800px pill buttons, 8px cards with a signature 64px \"kangaroo-tail\" corner, and a three-tier base/alias/comp CSS-variable token architecture.", "sha256": "0864be53c820a3f0f5e5d5287fcc39b746ec3727b3831dfbc47517569749b0f3", "bytes": 29231}, + "qatar-airways": {"name": "Qatar Airways", "category": "Airlines", "description": "Qatar Airways' US booking home page: pale lavender-grey #f2f3fa canvas, near-black #1f212b ink, burgundy #8e2157 'Search flights' button with 32px corners (hover burgundy #5c0931), white 64px-radius 'Book now' pill, Jotia Light 48px/56px headlines over Graphik 16px/24px body, all driven by --f-brand-* tokens.", "sha256": "53cb5242d0d205fa817ec1302450b0878c844425f29d9b283466ee9b3724f9c6", "bytes": 14016}, + "qtc-energy-th": {"name": "QTC Energy", "category": "Thai Brands", "description": "Corporate site of QTC Energy Public Company Limited (qtc-energy.com), a transformer, EV-charger and solar business. Prompt typeface at weights 200 to 500, blue #00558f headings and buttons, orange #f15a29 emphasis, deep-navy #001439 band, warm #f7f5f4 section tint and 27px-radius product cards.", "sha256": "d8b5db1edb8a5ea0a022d7c6c0192f4d79991148a6f0fdbbab577d1b6d59ff0a", "bytes": 10731}, + "qualcomm": {"name": "Qualcomm", "category": "Consumer Electronics", "description": "Qualcomm's marketing homepage measured at www.qualcomm.com: a white and pale-grey canvas (#ffffff, #f5f6f7), Alfabet display headlines at 48px/400 with +0.48px tracking, Roboto Flex body at 14px, a 4px-radius blue button (#2849d2) and a saturated Snapdragon red (#e71324) product card with 16px corners.", "sha256": "2d8e0e935b5622b11377349055e2decd57523ceda60ab852bc697244f3b35bca", "bytes": 11549}, + "quality-houses": {"name": "Quality Houses", "category": "Thai Brands", "description": "Quality Houses (QH, qh.co.th) residential developer site measured on its Thai home page: thaisans type at 20px body and 30px bold H1, navy #17497c square-cornered buttons with a #63b3d8 hover, #333333 ink on white, #f0f0f0 bands, 1px #dadada inputs and full-bleed property photography.", "sha256": "38e675aa28c10f1769ada85bcd88486103335729d5e14289e4c6d83971523643", "bytes": 10864}, + "quasar": {"name": "Quasar", "category": "Frontend Frameworks", "description": "Quasar is a Vue.js framework, so its design language is two layers - a Material-derived component library (Roboto, 3px button radius, 4px generic radius, uppercase 500-weight buttons, brand primary #1976d2) and a docs site that dresses it in a deep-space navy canvas (#080e1a) with Montserrat headings, electric cyan #00b4ff titles and a single orange #ea5e13 call to action on white cards.", "sha256": "249a9ccda274be35e26c449f9e6d4cbda04e7719872e04ea829362ec384e290b", "bytes": 13731}, + "quebec": {"name": "Québec.ca", "category": "Design Systems", "description": "The Government of Québec portal at quebec.ca, built on the government's own design system with Roboto bold headings at 48px, Open Sans body at 16px, a white canvas, link blue #095797, dark text blue #223654, pale-blue chips #dae6f0, a coral accent #e58271 and square 0px corners everywhere.", "sha256": "e57806653e7122314fa5eb19dbb3d85422cc2f699b64cb410afb3896b86026ae", "bytes": 13345}, + "quiet-cubes": {"name": "QuietCubes", "category": "Architecture & Interiors", "description": "QuietCubes sells luxury office pods on a near-black canvas (#0a0a0a) and warm beige (#dbd5ca) bands, set in Inter Tight Variable at 12.443px body with 49.7718px and 42.6616px headings, tiny 8.88783px uppercase buttons in #ebebeb and white, orange accent #ff8333, 4-5px radii and pill chips at 42.66px.", "sha256": "5b62b3cd99a1025edc941fb2cb58abcf3e44d554696a824bd1ce49e82be31a58", "bytes": 10753}, + "quizlet": {"name": "Quizlet", "category": "Education", "description": "Quizlet's study-tool marketing site sets everything in Hurme Geometric Sans (served as hurme_no2-webfont) on a cool #f6f7fb canvas with #282e3e slate body text and a 44px/700 black headline. The single action color is Quizlet blue-violet #4255ff (token twilight-500) on 200px pill buttons, darkening to #423ed8 on hover; feature cards are 24px-radius tiles in #4255ff, mint #d9ffcc and teal #12c1cb, and the page uses a 4px-dominant radius and soft #282e3e-tinted shadows.", "sha256": "48e7c91f769dd739951f93d7785e631714e2e73e0a6562182f6ae4c83bebb93a", "bytes": 24636}, + "quora": {"name": "Quora", "category": "Media & Consumer Tech", "description": "Quora's logged-out home: a single white #ffffff login card with a 3px radius and #dee0e1 border over a full-bleed illustrated mural, system-UI type (-apple-system stack) at 13px and 15px, #636466 grey copy, #195faa links and a #2e69ff pill Login button.", "sha256": "1d5c6bbb6efff87506ce556404c480d361a00b7a8fb21ef68d4eedf248784959", "bytes": 11843}, + "qwik": {"name": "Qwik", "category": "Frontend Frameworks", "description": "Qwik (qwik.dev) runs on a deep indigo canvas #151934 (--qwik-dark-purple-bg) with white Poppins headlines (80px/600, -2.4px tracking), sky-blue #18b6f6 highlight words and buttons, Qwik purple #ac7ef4 / #976ae2 accents and bands, 8px-radius buttons with 15px 35px padding, 11px-radius bordered cards and a white footer.", "sha256": "7e7545337804e89d9950896e15b0d635bf2738e984da9993b3a9b4db33e6c37a", "bytes": 12793}, + "r-ga": {"name": "R/GA", "category": "Agencies & Studios", "description": "R/GA's home page is a black and white agency site: Helvetica Variable (HelveticaVariableforRGAW05) in heavy uppercase at 100px/900 with -3px tracking, 27px/31px body with -0.8px tracking, HelveticaNeue 56px display, 0px radius everywhere and no shadows, with colour supplied by work imagery.", "sha256": "ae46a8180fc817231f7a4cf91e76d62e3ed3f2606b698dbca4b8299e204da752", "bytes": 10303}, + "radaville": {"name": "Radaville Studio", "category": "Agencies & Studios", "description": "Radaville Studio's entry page (radaville.studio) is a one-screen dark splash: #000000 and #040404 canvas with espresso #311512 and #1d0100 surfaces, cream ink #ebe5df and #f1e6d2, PPNeueWorld at 66.6667px for a loader counter, PPNeueMontreal 16px body, a pale pill Enter button and no shadows.", "sha256": "a28702b671e83c6353cf8b44cc77a5621590d4cda469b20075b271e0f4f5e386", "bytes": 9510}, + "radian": {"name": "Radian", "category": "Retail & E-commerce", "description": "Radian's EXR electric enduro site (rideradian.com) uses Instrument Sans at weight 500 with tight negative tracking (53.3333px h1 at -1.33333px, 12px body), warm off-white #f5f3ef over near-black green #121714, a flat #fdeb07 yellow Pre-order button with 0px radius, 640px pill controls and no shadows.", "sha256": "c53a428414345ac259b0dc6dc621cacacb304deeba271a09b7e375f7d19547f7", "bytes": 11870}, + "radical-face": {"name": "Radical Face", "category": "Culture & Events", "description": "Radical Face is the artist home page for music, writing and visual art: a warm paper canvas (#f0eeeb) with black ink (#000000), a near-black footer (#0e0e0e), TimesNow serif body at 21.3333px, SuisseIntl sans labels at 13.3333px weight 600, a condensed Druk wordmark, and small outlined pill links with 12px radius.", "sha256": "5324be52d126d5476e409c5200eb66ad1799b549960a1bbc87fd3c6145113df1", "bytes": 11106}, + "radix-ui": {"name": "Radix UI", "category": "Headless UI", "description": "Radix is a component system, not just a site - Radix Primitives, Radix Themes and Radix Colors. The marketing page sets a 78px adobeTextPro serif headline in near-black #1c2024 against white, with untitledSans body and buttons at 8px radius, while the Themes library itself ships indigo #3e63dd solid buttons at 4px radius on a 12-step, alpha-aware colour scale.", "sha256": "e131bc536bc491e207b2913c77b7e48d45a78b4eda77ce5e424294687b12d809", "bytes": 13536}, + "raffles": {"name": "Raffles Hotels & Resorts", "category": "Travel & Hospitality", "description": "Raffles Hotels & Resorts is a luxury hotel site: white canvas (#ffffff) with soft grey-black text (#3c3c3c), a deep green (#0c1f1e) for headings and the secondary button, blush (#f6f1ef) and taupe (#d5c0b5) bands, CanelaThin serif headings at 44px weight 250, LatoRegular 15px body, and square 0px uppercase AkzidenzGroteskPro buttons in #141414.", "sha256": "884524248205a4ebc26ee1fc829a6913cb8992ebc1d5cab0ddcc3676834a342e", "bytes": 10904}, + "railway": {"name": "Railway", "category": "Backend, Database & DevOps", "description": "Railway is a dark #13111c night-sky page: IBM Plex Serif headlines (54px/500, -1.96px), Inter 16px/28px body in #f7f7f8, a muted #553f83 purple 8px-radius Deploy button with a translucent border, 12px-radius #ffffff0d glass cards, JetBrains Mono data tables and teal, navy and plum section tints.", "sha256": "5ad0c6a76d51ce7498f97f1467620f3bf79ac6fbb61bd2545f8b0d7fb5144531", "bytes": 14684}, + "raimon-land": {"name": "Raimon Land", "category": "Thai Brands", "description": "Raimon Land (raimonland.com, measured at /en/home) luxury developer site: Proxima Nova type with a 31px bold uppercase heading and 3px-tracked 25px section titles, #111e6c deep navy actions with white text, #111820 ink on white, #f1f3f7 blue-grey bands, square 0px CTAs and full-bleed Bangkok skyline photography.", "sha256": "1e576c51b2b6f16e1c1f3e24f50f7ce3e79f5b94963459335fb0845fe65624d5", "bytes": 10271}, + "rakuten": {"name": "Rakuten", "category": "Retail & E-commerce", "description": "Rakuten is a cash-back shopping site: white canvas (#ffffff), grey ink (#575757) and charcoal (#252525), a purple primary (#8529cd, hover #9b50d6) on pill buttons 56px high with 9999px radius, Stag light serif headings at 46px weight 300, Rakuten Sans UI body at 20px, pastel tinted cards with 16px radius and a charcoal footer.", "sha256": "16cd0c85d6a856e1141a01c8497a95e4a87417af010289ed360114af0e413830", "bytes": 10472}, + "rambler": {"name": "Rambler", "category": "Design Systems", "description": "Rambler.ru portal design language — a pale periwinkle canvas (#f5f7ff) under a sky-blue gradient header, near-navy ink (#1e2332), SB Sans Text at 15px/500 for UI and 600 for headlines, pastel-blue (#4b7dff) 10px-radius buttons beside the brand's Rambler Blue (#315efb), and 20px-radius white cards with photo-led news tiles.", "sha256": "5c355e5913f24416e28e1e949c8cc0c6f73a4be4f06141852ef8de034467406b", "bytes": 13577}, + "ramotion": {"name": "Ramotion", "category": "Agencies & Studios", "description": "Ramotion's agency site is a light #fafafa page in Graphik (Graphik Web) with a centred 92px/600 headline (-3.2px tracking), #262626 text and filled #262626 pill-like buttons (20px radius 'Contact', 40px radius 'Let's talk'), #6f7984 secondary text, #cccccc hairlines, 8px-radius project images in a staggered grid and no shadows.", "sha256": "e0449ae2361300805b3d3be19f9fa28f34d11f99fc672681833895bbb657e9bd", "bytes": 12885}, + "ramp": {"name": "Ramp", "category": "Banking & Insurance", "description": "Ramp's site is a restrained, editorial finance page on a white #ffffff canvas with warm-gray #f4f2f0 panels and near-black #0c0a08 ink. Every word is set in Lausanne at a single weight (400). Headlines are large (64px/64px h1) with a two-tone trick: the second half of a sentence drops to 60% ink (#0c0a0899). One acid accent, 'solar' #e4f222, fills the primary CTA (6px radius; 8px on the 52px hero form button) and brightens to #f5ff78 on hover; the secondary CTA is a #1a1919 black button. Cards use 12px corners with 1px #2121211a hairlines; the footer is #1a1919 with 128px vertical padding.", "sha256": "b2856846b2a5ee7ed637cc876e021f29254b7c666a7c59bde822846420bd7871", "bytes": 27986}, + "rappi": {"name": "Rappi", "category": "Design Systems", "description": "Rappi Mexico delivery site: a saturated #ff441f hero with white PP Object Sans display type (56px/63.84px, -1.44px tracking), ink #2e2c36 on white, green #29d884 accents, 22px-radius category tiles, 8px inputs and cards, and short Spanish microcopy.", "sha256": "a73acabda81bcbd540764a94046a6e5bc9f4a13ba6045fbc763a4eb49e4087c0", "bytes": 10039}, + "rare-beauty": {"name": "Rare Beauty", "category": "Beauty & Personal Care", "description": "Rare Beauty (Selena Gomez) runs a warm editorial Shopify storefront on a cream #fdfbf8 canvas with blush #fdf6f0 bands, set in \"Ogg Regular\" serif headlines at weight 400 (48px section titles, 56px hero) over \"Neue Hass Unica Regular\" body copy, with deep burgundy #6f0936 as both the brand ink and action colour — square 0px buttons 36px tall with tiny 10–12px uppercase labels tracked 4–5px, outlined by default and filling burgundy on hover — plus round 50% portrait crops and navy #000914 text.", "sha256": "f48c26160ec68c81b48fd84b128829c62b6bce59697d5ea9cdee4c6859e58822", "bytes": 25813}, + "ratchthani-leasing": {"name": "Ratchthani Leasing (ราชธานีลิสซิ่ง)", "category": "Thai Brands", "description": "Ratchthani Leasing English homepage: white canvas, teal-green #01aa8d primary buttons and table headers, blue #0b5d99 and #13609b navigation and backdrop, red #ee3741 headline accent, Kanit typeface and 4px button radius.", "sha256": "47fbd975ab2d67bafbd4f0fee4888cb8739ac4109ee470d75eb03affbb153a29", "bytes": 13705}, + "ravi-klaassens": {"name": "Ravi Klaassens (R—K Design & Code)", "category": "Portfolio", "description": "Ravi Klaassens (R—K Design & Code) is a design-and-code studio portfolio: warm grey canvas (#e0dedd) with pure black ink (#000000), a single oxblood accent (#891a20), ReplicaLL 26.6667px weight 500 headings with -1.06667px tracking, Suisse Intl Book labels at 10.6667px, near-square corners of 2.13px to 5.33px and a black footer.", "sha256": "95aa1949704333d93d5173d9da8d58b9daaa276add37133e9ebad39aa22fc985", "bytes": 10593}, + "raycast": {"name": "Raycast", "category": "Developer Tools & IDEs", "description": "Raycast's marketing site is a near-black (#07080a) stage for one idea, a hero of diagonal brand-red (#ff6363) stripes behind a 64px Inter 600 headline, with a light-grey (#e6e6e6) 8px-radius download button as the only solid action, Inter throughout with GeistMono kickers, and translucent black cards edged with 1px white-alpha hairlines.", "sha256": "aa29fbd323fdec56d754946bba5a3c0d76a001d6b3448debf4b36fd7f29e79f6", "bytes": 11628}, + "razer": {"name": "Razer", "category": "Gaming", "description": "Razer's US storefront is a pure-black (#000000) gaming catalogue lit by one neon green, #44d62c, used on 3px-radius uppercase Titillium Web CTAs; RazerF5 headlines at 40px/700 uppercase, Roboto 16px body in #bbbbbb, and a #111111 footer.", "sha256": "be21d505b2d9af24a442b8b8e66466777c96941385c79b1507ff97173f3dd1f9", "bytes": 13185}, + "razorpay": {"name": "Razorpay", "category": "Design Systems", "description": "Razorpay marketing site: white and #f8fafc surfaces, navy ink #192839, electric blue #305eff action color, TASA Orbiter Display headlines (48px/56px) with Inter body (16px/24px), 4px 48px-high buttons, white cards with a soft 2px 16px shadow and full-bleed blue campaign banners.", "sha256": "851e911b6729f316a6f92b522e0e4be25a477563bd908f2eba3713adbc300326", "bytes": 9776}, + "re-max": {"name": "RE/MAX (Thailand, remax.com)", "category": "Real Estate & PropTech", "description": "RE/MAX (the measured remax.com Thailand English home page) is a real-estate portal: warm off-white canvas (#faf9f5), navy ink (#000e35), a vivid blue primary (#0043ff) on square uppercase Montserrat buttons 52px high, Montserrat 40px headings and 16px body, beige panels (#f5f3ea), 4px radii and a navy footer.", "sha256": "fb171fa20d273abbcee9bd32a049c75c5b1a318f53264cd6f35a7bb0879b9f7e", "bytes": 11212}, + "readme": {"name": "ReadMe", "category": "Developer Tools & IDEs", "description": "ReadMe's marketing site pairs an editorial serif (STKBureauSerif 64px/400 hero, 24px section heads) with STKBureauSans UI text, Geist Mono eyebrows and an Inter/system body stack; a deep-navy #000342 hero, white #ffffff canvas, electric-blue #012bff pill CTAs (9999px) and 8px-radius product cards with a layered hairline shadow.", "sha256": "b5c01626218cb7f320299a5cbdefda7593077173b001fd2ab09785cd7b65ad94", "bytes": 15537}, + "readyidc": {"name": "ReadyIDC", "category": "Thai Brands", "description": "ReadyIDC is a Thai data-center and ISP site: dark navy hero imagery (#0e1131) with white type on a white canvas (#ffffff), grey ink (#54595f), an orange accent (#f15721), Prompt headings at 69.12px weight 600 with 1.4592px tracking, Sukhumvit Set buttons, translucent 10px-radius tab buttons and 16px-radius cards with deep shadows.", "sha256": "09f8ec9a8c626b67020269d466559bc61c4bd47992c4a6b0926e649b230918b5", "bytes": 12106}, + "readymag": {"name": "Readymag", "category": "Design & Creative Tools", "description": "Readymag's site is a white #ffffff gallery of customer work with black #000000 type in uploaded custom fonts (30px/31px hero at -1.6px tracking, 12px/500 body), #ec520b orange 200px-radius pill buttons that hover to #282828, frosted #f4f4f4f5 nav pills, and a bento grid of 8px-radius tiles in #ff5900 orange, black, blue and lime.", "sha256": "29a983068a943e055e2da78fec3e0a9851340926dbb719fe46dae75bee15ea4c", "bytes": 12564}, + "real-madrid": {"name": "Real Madrid", "category": "Sports & Fitness", "description": "Real Madrid CF (realmadrid.com/es-ES) is a white #ffffff club site set in the custom RMNeue typeface with navy #0f2145 ink, an electric-violet #3e31fa primary with a #3e31fa→#8760f6 gradient on 16px-radius 64px 'Comprar ahora' buttons, pale #eef2fd panels, 16px-radius cards and violet-tinted soft shadows.", "sha256": "9cffec21d15c82ac9d90cb8d046fab2da31d684ea8f33ca1b7d12ee803e7dd6d", "bytes": 13384}, + "red-bull": {"name": "Red Bull", "category": "Food & Beverage", "description": "Red Bull (redbull.com US English) is a media-led brand site: light grey canvas (#f8f8f8) with white cards (#ffffff), deep navy ink (#000f1e), a single crimson action color (#db0a40), the Bull VF variable typeface at 18px body and 32px weight 700 headings, 8px card radii, pill-shaped controls (9999px) and a translucent navy navigation pill.", "sha256": "4af108e6dbdf8d7f70054c6f0466b538b2adad7578489ef2896dee4e1b933b86", "bytes": 10213}, + "red-cross": {"name": "American Red Cross", "category": "Government & Nonprofit", "description": "The American Red Cross site (redcross.org) runs on Red Cross Red #e11b22 for every action, Roboto 900 headlines in #333333/#212529 on white, Open Sans for the header utility layer, a #007caf link blue, 3px button corners with a soft rgba(0,0,0,0.15) 0 2px 4px shadow, and full-bleed photo bands of volunteers at work.", "sha256": "8a7094844d92977e269fe636a1b13821e3a2435cf85020a1e70c05ac39146a33", "bytes": 15777}, + "red-planet-hotels": {"name": "Red Planet Hotels", "category": "Thai Brands", "description": "Budget hotel chain in the Philippines on a Wix site: white canvas, black ink, red #da291c pill buttons with 30px radius, uppercase Lemon Sans-style display headings at 60.7px, Didact Gothic body at 20px, black footer.", "sha256": "4d46d5356477bd5cc69051713d133b243e74fb5c75a2a66b42a540b831516401", "bytes": 10675}, + "reddit": {"name": "Reddit, Inc.", "category": "Media & Consumer Tech", "description": "Reddit, Inc.'s corporate site (redditinc.com) is built on OrangeRed #ff4500, black (#000000) and white: RedditDisplay ExtraBold 70px/800 headlines, Reddit Sans 20px/28.8px body, OrangeRed pill buttons (19.5px and 40px radii) and 24px-radius white stat cards on black bands.", "sha256": "9eaaf155d954f42c015b472b19504193f7536061f2e75e3f5351b39d084ca573", "bytes": 12392}, + "redhat-vanilla": {"name": "Canonical Ubuntu", "category": "Design Systems", "description": "Canonical's Ubuntu homepage is a dark Vanilla-framework page: Ubuntu variable typeface at weights 300 to 550, a #262626 canvas with white text, square-cornered (0px radius) #008013 green buttons, #6699cc link blue on dark, and a 40px h1 at 550 weight with 48px line height.", "sha256": "4f01dce32bff87c99d7ffe93c92136b1eb7c5074e8287b6c61e171671ed4d3f4", "bytes": 10985}, + "redis": {"name": "Redis", "category": "Backend, Database & DevOps", "description": "Redis (redis.io), real-time data for agents and apps: a midnight #091a23 canvas with #0d212c cards, Redis red #ff4438 on dark-red #351d22 'Try Redis' buttons, dusk #163341 secondary buttons, acid yellow #dcff1e highlights, a condensed uppercase primaryFont display at 100px/85px over Space Grotesk 16px/25.6px body, 5px button and 10px card radii.", "sha256": "0f5a6f98de482443ee3256374138a579c676a88af2de49b354033398e6527df7", "bytes": 14523}, + "redwood-team": {"name": "Redwood Team", "category": "Culture & Events", "description": "Redwood Team is a Spanish-language production company showreel site: a pure black canvas (#000000), cream ink (#f9f3de), a single red accent (#e91b00), the Plaak display face at 204.444px with -4.08889px tracking for project names, Inter 500 uppercase labels at 17.7778px, and video frames with 8.89px rounded corners.", "sha256": "c2598c37ecbff341dcb76391ddb029c9a8e3ba699bdea5d083669a41fcc0628f", "bytes": 8975}, + "reebok": {"name": "Reebok", "category": "Sports & Fitness", "description": "Reebok's official US site is a retail storefront: white canvas (#ffffff) with black ink (#000000) and black square buttons 66px high, Neue Plak Extended Bold uppercase headlines at 66px, Neue Plak Regular 14px body, a blue promo bar (#244496), amber (#ffaf04) accent glow, full-bleed campaign photography and 0px button corners.", "sha256": "4aac71bcc4d51c24f3e4eb31c97d867cf5b3ab52aa19ddf8fbed4d3caa9adb22", "bytes": 11687}, + "ref-digital": {"name": "REF Digital", "category": "Portfolio", "description": "REF Digital is a digital agency site: a greige canvas (#c4bab0) with black type (#000000), full-width royal-blue case-study bands (#10096b), Habitus light display type at 49.7778px with -1.49333px tracking, tiny uppercase Aeonik labels at 10.6667px, thin black-outlined buttons and no rounded corners anywhere (every computed radius is 0px).", "sha256": "32e84ae081eb60b11719429b1a052da03f54002988b2212ddb7bfad990f37983", "bytes": 10217}, + "refined": {"name": "Refined", "category": "Modern & Minimal", "description": "Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.", "sha256": "04d7d749077655c0007bcd91851df1a6b9620d898c66c0213a531b5a9f7389be", "bytes": 3059}, + "reform-collective-5": {"name": "Reform Collective", "category": "Portfolio", "description": "Reform Collective is a digital design and branding agency: a cream canvas (#f9f8ed) over black bands (#000000), charcoal project cards (#27282e) with 14.22px radius, a red pill call to action (#d00401, 74px high), editorialNew light serif display at 94.2208px with -2.82662px tracking, foundersGrotesk 17.7792px body and uppercase service tags.", "sha256": "49b488fa8b668b3e327deb30564812ac482d35b38f8cff07e3c754ca1d66e77b", "bytes": 10831}, + "regeneron": {"name": "Regeneron", "category": "Pharma", "description": "Regeneron is a biotechnology company site: white canvas (#ffffff) with black text, a blue primary (#2169e6) on rounded buttons, an icy tint (#f6fafe), blue-to-purple-to-magenta gradient accents, Roboto Condensed bold headlines at 42px, Roboto 18px body, 8px button radii and large 80px corners on story cards.", "sha256": "01dc8fcc7da0b000a12bb4f491bffc8d520e15c214261cb34761a81005805f66", "bytes": 10362}, + "regional-container-lines": {"name": "RCL Group", "category": "Thai Brands", "description": "RCL Group (Regional Container Lines) corporate site: a white canvas with a deep #004b8e blue navigation drawer, SourceSansPro-Light 72px hero text over aerial container-port photography, OpenSans bold 14px uppercase navigation with 1px letter spacing, and a single 30px radius used on a handful of elements.", "sha256": "f3d214f55b20b19783be40e4b85753379612a55cc3d0f62caa53e3593eb62981", "bytes": 9495}, + "relats": {"name": "Relats", "category": "Tech & AI", "description": "Relats Top Tier site: near-black #0a0a0a canvas with white ink, Roobert (400/500) for text and DM Mono for labels, a white pill button with #1d1d1d text and 13.34px radius, an #eae4df warm card surface, and full-bleed video and product photography of protective sleeving.", "sha256": "1ecc332f7afc8529799be953893bb313a16e78d78449738544a283603b4c6968", "bytes": 10562}, + "reliance-jio": {"name": "Jio", "category": "Telecom", "description": "Jio consumer site (Reliance Jio): white canvas with #0f3cc9 blue actions, JioType Black 40px/900 headlines with -1.2px tracking, JioType Medium 16px body in translucent black #000000a6, rounded 24px photo cards, pill-shaped controls, and warm lifestyle photography.", "sha256": "df695a9b115b2dc006040795bea74d7ee5852ce4f3d902e9cf35704c7f98e20d", "bytes": 10183}, + "relume": {"name": "Relume", "category": "Design & Creative Tools", "description": "Relume's relume.ai marketing site: warm off-white #f1f0ee canvas, #101010 Geist text (56px regular hero, -1.68px tracking), hot magenta #ff00f4 6px-radius buttons and Geist Mono uppercase eyebrows, pink #ff9fff and cyan #98eafd gridded showcase panels, and 16px-radius cards outlined in translucent #1b19191a hairlines.", "sha256": "0754acfda70b0c28ca17204348bc9a4e4da81427c4d1aa4c8199b8e329977336", "bytes": 12028}, + "remarkable": {"name": "reMarkable", "category": "Consumer Electronics", "description": "reMarkable's 'Ark' web system: warm paper-cream surfaces (#f3efe7 sections on a #fcfbf8 base, #d9d2c4 and #e0dacc bands), near-black #211e1c footer and dark hero, a single pen-blue #2559f4 action colour (hover #1142d4) on 2px-radius buttons, reMarkableSerif at weight 375 for fluid headlines (59.168px h1) and reMarkableSans 400/500 for body (20.8992px) — both proprietary reMarkable typefaces.", "sha256": "c79628a755102c23a7396ebc2616f70cb94d58c401a9ba01c843ed3b3e6e0dcf", "bytes": 26637}, + "remix": {"name": "Remix", "category": "Frontend Frameworks", "description": "Remix (remix.run) is a black-canvas (#000000) developer site: a giant electric-blue racing wordmark, Inter 76.8px/700 headlines tracked to -2.304px, JetBrains Mono uppercase keyboard-shortcut nav, brand blue #2dacf9 for hover and highlights, translucent white pill buttons (999px) and glassy 24px-radius panels with #5f91cd46 borders and inset light shadows.", "sha256": "9cbdc0485011c5219499ae3582621628e77fd2c72110833ea6f5e5fb252b644a", "bytes": 15964}, + "remote": {"name": "Remote", "category": "Product & SaaS", "description": "Remote's homepage sets the Rotina typeface (300/400/700) in ink #14191e over a purple #500087 to cyan gradient with a giant pale-cyan wordmark, translucent white #ffffff4d cards, 6px-radius ink buttons with #fafafa text, 2px inset-outline secondary buttons and Nova/Zora design-system tokens.", "sha256": "c948aace0b30bcd2fc96c27e91c764cc2ec604723fd4fe41be7891943e1abf03", "bytes": 15200}, + "renault": {"name": "Renault Group", "category": "Automotive", "description": "The Renault Group corporate site (renaultgroup.com) is a dark editorial magazine, a black canvas (#000000) with white RenaultGroup-Variable headlines at weight 700, full-bleed photographic cards at 16px radius, 100px-pill buttons in white or black, warm taupe (#978b7f) chrome and a rare signal red (#e60000) for \"new\" chips.", "sha256": "22a53419cb193ebb836b0f6e222af2560fe84041c7530a818977f6019cf3e44a", "bytes": 12204}, + "render": {"name": "Render", "category": "Backend, Database & DevOps", "description": "Render sets light Roobert 300 headlines (80px, -2.4px tracking) and PP Neue Montreal body text in #0d0d0d on white, with square 0px-radius black buttons (66px and 48px tall), #e3e3e3 hairline grids, a #8a05ff violet accent for highlighted words and icon tiles, a multicolor service list and a #141414 footer.", "sha256": "ae50c2c14246fdef66a22093a1d218fb55cf12f949e1bc064927dae24a246fb4", "bytes": 13832}, + "replicate": {"name": "Replicate", "category": "AI & LLM Platforms", "description": "Replicate's homepage sets a white canvas (#ffffff) against a hot magenta-to-yellow gradient hero, with 72px rb-freigeist-neue headlines at weight 700, basier-square body, JetBrains Mono code, square black buttons (#000000, 0px radius) and pill-shaped filter chips. It reads as a developer tool dressed in a print-poster palette.", "sha256": "fedd41312a4e9c52cde1b4a951ff7a5c2e3088c6cae71691ebba396da972611d", "bytes": 13571}, + "replit": {"name": "Replit", "category": "Developer Tools & IDEs", "description": "Replit sets everything in its own Replit Diatype (64px/400 headlines at -3.84px, 20px/26px body) in warm #312e2e on a #faf6f1 off-white canvas, with #ff3c00 orange 8px-radius buttons, 24px-radius feature cards in peach #f9aa8b, coral #ff764d and dark #2c3328, 6px-radius prompt chips and a mono uppercase eyebrow style.", "sha256": "71fe90ffdda39ca37df03d3f596fb126d9bde01d4eb63b34189998dd301c4bd1", "bytes": 13870}, + "resend": {"name": "Resend", "category": "Productivity & SaaS", "description": "Resend is a dark-first email API brand, a pure black canvas (#000000) with soft white-alpha text (#f0f0f0, then #a1a4a5), 96px domaine serif headlines beside aBCFavorit and Inter, and glassy outlined buttons at 16px radius. Panels are blue-black (#0b0e14) with faint blue-white hairlines, and colour is withheld for logos and code.", "sha256": "2863bfdad22a1fb2466395fbaac272cd260080dfbb5fa7300e609cb491f180ae", "bytes": 13148}, + "reshaped": {"name": "Reshaped", "category": "Design Systems", "description": "Reshaped is a React and Figma design system whose own site is a white canvas set in Inter (48px semibold display, 16px body), near-black ink #1f1f1f, a single electric blue #1760fa for primary actions, 6px-radius buttons, hairline outlines on faded neutral #ebebeb surfaces, and live component demos on a dotted grid.", "sha256": "b033d2f2d9c0645d9a3dc36cfb13c65523b1addb3834cbe72098c6359ba44683", "bytes": 12590}, + "retool": {"name": "Retool", "category": "Developer Tools & IDEs", "description": "Retool's homepage is a dark #151515 canvas with warm cream #e9ebdf type and pill buttons (hover #ffffff), Saans light-weight (300) headlines at 68.9231px with -0.022em tracking, PX Grotesk for small UI labels, a cream 20px-rounded AI prompt card with a deep 0px 68px 116px shadow, and #e9ebdf1f hairlines.", "sha256": "6ba59888b40e6383d4c5cc2206907f2057ff0da475a363a2f46cb6c85d69560f", "bytes": 15284}, + "retro": {"name": "Retro", "category": "Retro & Nostalgic", "description": "Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.", "sha256": "ba3fdc8e5be058513ea6ff5f19938db831e94d7bbfc03da8383327a2f7e3a86e", "bytes": 3060}, + "revelatio-studio": {"name": "Revelatio Studio", "category": "Business & Corporate", "description": "Revelatio Studio site: pure #000000 canvas with white ink at several opacities, Neue Haas Grotesk Text Pro 55 Roman at 31.99px with -0.96px tracking, tiny 9.33px interface labels, translucent #ffffff29 glass buttons with a 3.55px radius, and an ASCII-rendered team portrait hero.", "sha256": "9f96569a9487db2c79900263ac506c62475c918325ce95453441b4585ea8e3ad", "bytes": 10818}, + "revolut": {"name": "Revolut", "category": "Fintech & Crypto", "description": "Revolut's UK homepage as measured on the live site — a full-bleed photographic hero with white Aeonik Pro 500 display type at 84.6578px, a near-black #1f1f1f pill call-to-action (9999px radius, 10px 24px padding), Inter at 12px for running text, and alternating white, #000000 and #191c1f bands. Product UI is driven by a --rui-* token set shipped in the page CSS.", "sha256": "cee0f265869c335a494b6a0f925a288aaf4ae280c7c73bd09d6b2e560554d955", "bytes": 14111}, + "ribbit": {"name": "Ribbit", "category": "Agencies & Studios", "description": "Ribbit (ribbit.dk), a Copenhagen studio site: light #fafafa page with a dark #2f2f2f feature band and #502b1a brown footer, enormous 249.6px FKTEcho condensed display type with -6.4px tracking, FKGroteskNeue 12px uppercase navigation, and a 21px-radius pill navigation.", "sha256": "446ca99ef9b0ff0efef4d892474676721c0884631c4e7f813781dc3fe9725415", "bytes": 9878}, + "rice-department": {"name": "Rice Department (กรมการข้าว)", "category": "Thai Brands", "description": "Thai Rice Department portal (ricethailand.go.th) set in IBM Plex Sans Thai with Bai Jamjuree and Sarabun accents, on white with black ink, a #e9d189 pale-gold search button (4px radius), a #e9b621 gold header, #129137 green active tabs and gold-outlined service tiles.", "sha256": "bc8b22eb5587771238ed0f709d9ef68ec00ff406e90a85960bfa31fbd9bdbb6c", "bytes": 11449}, + "rightmove": {"name": "Rightmove", "category": "Real Estate & PropTech", "description": "Rightmove (rightmove.co.uk), the UK property portal, pairs a deep navy #000433 with an electric mint-teal #2cdebe / #00deb6 accent on a white #ffffff page and #f2f3f4 footer. Everything is set in Dalton Maag's Effra at 400/500 with a +0.1px letter-spacing (hero 45px/500, headings 24px and 20px/500, body 16px/24px in #4e516b), controls are 8px-radius rectangles 48px tall, content cards are 16px-radius, and the hero search sits in a translucent navy 24px-radius panel over dusk aerial photography.", "sha256": "4296ec26f257a15caa522a2eea6d40b07ad918c258b88e6ff16a68daf401981c", "bytes": 22024}, + "rijksmuseum": {"name": "Rijksmuseum", "category": "Culture & Events", "description": "Rijksmuseum (rijksmuseum.nl/en): full-bleed photography stacked edge to edge on a slate #40474f body and black #000000 footer, all text in white RijksText (400/700) with bold uppercase headings at 21.408px, small white 12px uppercase labels, and 2px-radius buttons in Rijksmuseum orange-red #cc4c28 or translucent white #ffffff33.", "sha256": "ace19d07aae60c9ec0ff47402389cde52a7d089b59dc403aeacb75417c4529b2", "bytes": 11076}, + "ring": {"name": "Ring", "category": "Consumer Electronics", "description": "Ring home security site: white canvas with #424242 body ink, near-black #121212 buttons with 8px radius and 18px bold RingSans labels, #0063a5 blue navigation links, #f6f8fa and #fafbfc cool grey surfaces, 12px-radius bordered product cards, and 42px/500 display headlines.", "sha256": "6cf9f9a86fbd0e60f679e1bfcccdb273c7ec913f38272693dc5f4ddfcad2890d", "bytes": 10327}, + "riot-games": {"name": "Riot Games", "category": "Gaming", "description": "Riot Games' corporate site (riotgames.com) is a near-black, art-led game publisher shell — #0a0a0a hero and news bands, a #1f1f1f games band and a #111111 fixed header, with crimson #d1363a as the single brand accent on pill CTAs (25.6px Sign In, 24px Explore Careers). Section titles are set in the proprietary Riot Sans Latin at 48px/700 with -1.44px tracking; everything else runs Inter V Latin (16px/400 body, 31.008px/700 feature titles) with tight negative tracking, 8px-radius news cards and parallelogram clip-path game cards.", "sha256": "f2fc81fd030a7ed21415b9f52ddab64ba35b2efbfa13a5a79f24de0a0cab8e28", "bytes": 32898}, + "ripples-commerce": {"name": "Ripples Commerce", "category": "Thai Brands", "description": "Ripples Commerce e-commerce agency site: white canvas with black ink, a #0063ff blue pill CTA (14px 24px padding, 48px high), Montserrat display text at 96px and 102.4px with negative tracking, pale blue-violet gradient hero wash, and leaf-shaped image masks with 280px and 300px corner radii.", "sha256": "67b742623ac7e2e3987c32c9a1ccbca089ba6964514300c3ea9f23c0060e2d87", "bytes": 10526}, + "rippling": {"name": "Rippling", "category": "Product & SaaS", "description": "Rippling's homepage sets the Basel typeface (400/500) in black on white and warm sand #f2eeeb, frames it with a deep plum #4a0039 hero and a lilac #eab8f2 announcement bar, and drives every action with a 4px-radius amber #ffa81d button (hover #f59701) and 12px-rounded sand case-study cards.", "sha256": "97fd239a9adb9151a4ed820258ba89a7d764a75a7c7774731ffe11a3b1ed7784", "bytes": 16111}, + "ritz-carlton": {"name": "The Ritz-Carlton", "category": "Travel & Hospitality", "description": "The Ritz-Carlton luxury hotels site: white canvas and #e9f1fa pale blue bands, #1c1c1c square-cornered buttons with 13px Swiss-721 bold labels, Caslon540Std serif headings and body at 18px, 12px uppercase navigation with 1.3px tracking, and thin #916e27 gold rules.", "sha256": "eebd542ca7e3887343eb2f6e5093786171784c3913868778946f8e09df0feba4", "bytes": 10211}, + "rive": {"name": "Rive", "category": "Design & Creative Tools", "description": "Rive's home page is a black #000000 Framer site with a game-UI flavour: uppercase Orbitron 900 headlines (40px, +0.4px tracking), Tomorrow uppercase labels and buttons (12px/500, +1.2px), Inter and Inter Display body copy in 60% white, dark #1d1d1d buttons with 4px corners (hover #222222), #111111/#121212 panels and small neon accents in orange #ffa41c, green #71ff19 and cyan #19f2ff.", "sha256": "c126082a05569637a2499bbd2ea862199610eaf9125c57dd8016cc802a34c61d", "bytes": 12670}, + "rivian": {"name": "Rivian", "category": "Energy & Climate", "description": "Rivian's site is a photo-led, near-monochrome system set entirely in its proprietary Adventure face (a Pentagram adaptation of Söhne) at 400/500/600 — a 72px/600 hero with -3px tracking, 200px/500 model marquees, 16px/24px body — on a #f2f2f2 product canvas with #ffffff surfaces, #000000 and #151515 ink, #212121 footer, and a single yellow voltage (#ffaa00, hover #ffbd2e) on 9999px pills; 40px-radius 56px buttons, 12px floating nav, 20px media cards.", "sha256": "a6504d09ba8d55c959aa8d95a18d7a37f69c4dec5b26ac4912654b59ddea4526", "bytes": 29504}, + "robinhood": {"name": "Robinhood", "category": "Banking & Insurance", "description": "Robinhood's 2024 identity as shipped on robinhood.com: a black #000000 canvas of full-bleed photography, Robin Neon #ccff00 for every primary pill button and the lime footer, warm near-black #110e08 as the dark text and button colour. Headlines alternate between Martina Plantijn (110px/400 hero, -0.5px) and Phonic (52px/40px/400 with -2px to -1px tracking); all running text is Phonic 16px/24px at -0.25px. Buttons are 44px-tall 36px-radius pills with 0px 32px padding that fade to 0.85 opacity on hover.", "sha256": "1f25567b7663e505a99133ba60f63aa373135f1a7dc15e421b166c8d79c63e4d", "bytes": 21550}, + "roblox": {"name": "Roblox", "category": "Gaming", "description": "Roblox's logged-out web surface is a dark sign-up page — a #121215 form card and footer over a tilted mosaic of game thumbnails, all text set in the proprietary Builder Sans (300/400/500/700/800). Body ink is #f7f7f8 with #d5d7dd secondary, links are #70a0ff, the emphasis action is cobalt #335fff, and every button, field and card uses an 8px radius.", "sha256": "afd7c4920e60c8089aa672c859daac2c65b0c91b7ea1b8048e099b3ff3c022d6", "bytes": 25729}, + "robot": {"name": "Robot", "category": "Portfolio", "description": "Robot (therobot.tv) production company site: #e3e4d8 warm grey canvas, #000000 and white sections, #fe0000 red accent for bracketed links and a generative grid, OTMedium squeezed condensed typefaces up to 466.64px, 13px uppercase tracked labels, and every element with a 0px radius.", "sha256": "7d513716becbc6cc1f8a88ca67c376a7db6bc9887f9cdbfdbc4e3e501f46a553", "bytes": 9831}, + "roche": {"name": "Roche", "category": "Pharma", "description": "Roche corporate site: white canvas with black ink, Roche blue #0b41cd square-cornered buttons (56px high, 18px roche-sans), a light-weight 200 roche-sans at 40px for headlines, roche-serif pull quotes, warm grey #544f4f secondary text and #022366 hover.", "sha256": "0a36ad4271102a1861469144218079946a3f3f1cc2e07f50b1a6705900cd0822", "bytes": 10097}, + "rockstar-games": {"name": "Rockstar Games", "category": "Gaming", "description": "Rockstar Games' site is a black (#000000) stage for full-bleed key art, set entirely in Monotype's Helvetica Now (Display 700 for 54px/45px headlines, Text 400/700 for 18px body and buttons). Text is soft grey (#ebebeb, #cecece) not white; actions are 54px pills with 1000px radius tinted per game — #fff6b2, #ffd4a8, #ffb2c6, Rockstar gold #fcaf17 — or white-outlined on art; cards are rgba(255,255,255,.1) with 8px radius.", "sha256": "0cbb64646230f4cd971dc8f99ddf3e4176d4cbbdb213914c78ef9482b9c6cc28", "bytes": 24679}, + "rogers": {"name": "Rogers", "category": "Telecom", "description": "Rogers Communications consumer site: Rogers red #da291c with 32px-radius pill buttons (44px high, Ted Next Var 16px weight 600), white and #fafafa page, #1f1f1f dark panels, 4px-radius cards, 42px/700 headlines with -0.3px tracking, and a #2f6fa7 blue link color.", "sha256": "b04884ddfec6a44bec4928cb29f10f6b63b0fd07c76103ae29df1591a6a6a21a", "bytes": 11175}, + "roland": {"name": "Roland", "category": "Music & Audio", "description": "Roland Global site (roland.com/global): #141414 and #000000 dark navigation and footer, a #ff5a00 orange logo tile and accent, proxima-nova in light 300 weight at 13px for body and 80px for the hero title, uppercase 18px labels, #e5e5e5 grey bands, and a pill search field with 37.5px radius.", "sha256": "5d497bfb3a95ef404e58aa9f52f1ae9adc2650cda878060272e7533c7a7efbae", "bytes": 9924}, + "rolex": {"name": "Rolex", "category": "Luxury", "description": "Rolex's site is a white (#ffffff) and near-black (#212121) editorial frame around full-bleed watch and cultural photography, set entirely in Monotype's Helvetica Now Text at 300/400/700 with a 71.936px/700 hero headline, RolexFont-S tracked labels, a single Rolex green (#127749) for hover and links, translucent pill buttons (rgba(118,118,118,0.3), 9999px, 0 35px, 44px tall), a 45-degree green gradient CTA and a #f8f8f8 footer.", "sha256": "630fb3af9b3f83d1865dc43c72b4f9b1c25f345a20255e5accd90cbf5db02706", "bytes": 27725}, + "rolls-royce-motor-cars": {"name": "Rolls-Royce Motor Cars", "category": "Luxury", "description": "Rolls-Royce Motor Cars home page measured at rolls-roycemotorcars.com: a black canvas (#000000) of full-bleed car video, white uppercase Riviera Nights display type at 70px/300 with 2.5px tracking, and a white pill button (#ffffff fill, #151515 text, 30px radius) labelled DISCOVER MORE.", "sha256": "1d05c3fe19f9433ea1280655ec534955934bde6e3fd285b68d1818d75ea10f8d", "bytes": 9872}, + "roojai": {"name": "Roojai", "category": "Thai Brands", "description": "Roojai Thailand insurance site measured at roojai.com/en: Prompt typeface at 400 and 500, deep navy #003b71 hero and footer, orange #d84000 Get Quote button with a #ff5011 gradient and highlight, white cards with 20px radius and a navy-tinted 28px shadow.", "sha256": "ea51a182da0852d0ee57093f05b1009ec8e96ff4600ebe683f16407cc9049af0", "bytes": 11339}, + "rose-media-and-entertainment": {"name": "Rose Media and Entertainment", "category": "Thai Brands", "description": "Rose Media and Entertainment (rose.co.th), a Thai music and documentary label site: db_helvethaica_x55/x65 Thai faces plus Tahoma, red #d71921 nav and footer, a #555555 music grid band, 3px radius gray #9a9a9a buttons and a 38px input.", "sha256": "74d9dc451d67a415f99292ecc6972d950c4aea9f035cbfe33ae85655a0059a18", "bytes": 10475}, + "rosewood": {"name": "Rosewood Hotels & Resorts", "category": "Travel & Hospitality", "description": "Rosewood Hotels (rosewoodhotels.com) measured home: off-white #fafbf5 canvas, cream #f0eee0 bands, forest green #013d2d square RESERVE button, Engravers Gothic Bold caps with wide tracking plus Austin Light Web serif, zero radius, almost no shadow.", "sha256": "ac791e84f0be295ace9a2f1c93784629594378f944697f7be83ac64d46104747", "bytes": 10105}, + "royal-bank-of-canada": {"name": "Royal Bank of Canada (RBC corporate site)", "category": "Banking & Insurance", "description": "RBC (Royal Bank of Canada) corporate site, rbc.com/about-rbc.html: RBCDisplay headings with Roboto body, RBC blue #006ac3 actions with #0051a5 hover, yellow #fedf01 Sign In button, white cards on a #eeeeee band, near-square 1px button radius.", "sha256": "8b2d5ba0afff68f73b0504cf2b3c1feafb7104330259eea7afe8b878944d0b54", "bytes": 10656}, + "rs-group": {"name": "RS Group", "category": "Thai Brands", "description": "RS Group (rs.co.th), Thai entertainment and commerce company, brand purpose \"Life Enriching\": a single serif family gt_sectra (Trirong, serif fallback) at 15px body and 26px headings, black on white with #f7f7f7 bands and #505052 secondary text, zero radius, no shadows.", "sha256": "440746086aec3c67d7113473e08f258cde36aa64a4f371114bbc98e7eecab72d", "bytes": 9146}, + "rs-music": {"name": "RS Music", "category": "Thai Brands", "description": "RS Music (rsmusicth.com), Thai label site \"RS MUSIC IS BACK!\": black pages with white Kanit uppercase headings, magenta #e708ff accents and buttons (2px radius, 44px high), purple #8601ff hover, release cards with magenta category chips and a 4-up artist photo grid.", "sha256": "ebd9726f3a893ae228034b25868b30b184a6a95bf61fed50bde52e7fe841b5cd", "bytes": 10118}, + "runwayml": {"name": "Runway", "category": "AI & LLM Platforms", "description": "Runway's homepage as measured on the live site (runway.com) — one typeface, abcNormal, at weights 400 to 600; a white canvas with #0c0c0c full-width dark panels; compact 6px-radius buttons in #262626 with white 14px/600 labels; hairlines in #e5e7eb; no box shadows measured; and a blue-violet #2b22fa announcement bar above a photographic hero.", "sha256": "df5f2bd468b371e4486ae6136cab9fbc0b0ffc20f6efecc52af55199ae01e376", "bytes": 12585}, + "rvp": {"name": "Road Accident Victims Protection Co., Ltd. (บริษัท กลางคุ้มครองผู้ประสบภัยจากรถ จำกัด)", "category": "Thai Brands", "description": "RVP (กลางคุ้มครองผู้ประสบภัยจากรถ) homepage: white canvas, purple #774cb8 primary with deep #3d1982 accents, a font named \"line\" at 700 weight, 12px-radius buttons, 24px cards and a Tailwind colour scale on the root.", "sha256": "12a8d2db8bb23a18253bad8e43f86f91d73b0a25122f055846de573000fe0a22", "bytes": 14843}, + "ryanair": {"name": "Ryanair", "category": "Airlines", "description": "Ryanair Ireland home (ryanair.com/ie/en): Roboto only at 400 and 700, navy #073590 text on a blue booking header, yellow #f1c933 pill actions (16px radius, 32px high), light #f4f4f4 canvas with white cards, 2px and 4px card radii and very soft shadows.", "sha256": "a9dd6c8bcbdf50d9e54a40149b548b70b8483be10ac3f2510d9380c5a5ecbaaf", "bytes": 9711}, + "s-2k": {"name": "S-2K (Honda S2000 tribute)", "category": "Business & Corporate", "description": "S-2K (s-2k.webflow.io), a Webflow tribute site to the Honda S2000 (1999-2009): off-white #efefef and near-black #0e0e0e, PP Neue Montreal at weight 200 up to 192px, IBM Plex Mono 12.8px uppercase labels, orange #ff7700 markers, no radius, no shadows.", "sha256": "c9a0a9882a1fd24e179c03ffb624644ac944693c33611ad4ea4db7a34262be36", "bytes": 9176}, + "s-and-p": {"name": "S&P Syndicate", "category": "Thai Brands", "description": "S&P Syndicate (snpfood.com/en/home), Thai restaurant, bakery and food group: Kanit at weight 300 body and 500 headings, S&P red #e32126 buttons (3px radius, 46px high) and red-to-maroon gradient bands, light #f4f4f4 canvas with white cards.", "sha256": "89879343ea56181469bfce9b1741d951f3b475eba6d9aa2fa31ea049baa8c43c", "bytes": 9373}, + "safety-insurance": {"name": "Tokio Marine Group Thailand", "category": "Thai Brands", "description": "Tokio Marine Group Thailand landing page (reached from safety.co.th): white canvas with deep teal ink (#022b39), petrol-blue pill buttons (#00546c, hover #006d8a), lighter teal secondary (#33abba), Lato Bold headings at 30.56px, pastel category chips, a rounded dark footer (#032b39) and a sky-and-lifestyle hero.", "sha256": "e9f74b090c55d1a290e321f8d2473195d7823661b60e5e401a5a9c5890484e4c", "bytes": 11383}, + "sahapat-delivery": {"name": "Sahapat Delivery", "category": "Thai Brands", "description": "Sahapat Delivery (sahapatdelivery.com) is a Thai online grocery storefront on a light #f4f4f5 canvas with white #ffffff product cards, Noto Sans Thai at 400 and 600, #242526 ink, a red #ff2a00 sale accent, 8px card radii and a soft rgba(96, 108, 171, 0.18) card shadow.", "sha256": "1a3c4c22b46aaaa28ce7bd1f808a94b0aec52a718ef39c5c0280bdd2fb00046a", "bytes": 11676}, + "sakazuki": {"name": "SAKAZUKI", "category": "Food & Beverage", "description": "SAKAZUKI (sakazuki.io), a Japan culture membership guided by Suntory group: hagrid display and hagrid-text serifs at weight 400 only, warm #e1d6ce canvas, black and #c30d23 red sections, square 52px MINT button with a white border, no shadows.", "sha256": "21d25cd067713251104584c71ab5f59223e616ee26e1d42473be5137dc9666aa", "bytes": 10317}, + "sakol-energy": {"name": "Sakol Energy", "category": "Thai Brands", "description": "Sakol Energy Public Company Limited (SKE, sakolenergy.com) uses a white canvas #ffffff, charcoal ink #333333, a gold #e5b71b READ MORE button, slate #5c666f bands and an #ececec footer, all set in Myriad Pro; its entry gateway is a monochrome mourning page in PSL Malinee Pro 56px.", "sha256": "b2321d0905553cc9ead07e39eeae484cc13fe07f160bbd5d7660c272bfee9a99", "bytes": 10169}, + "saksiam-leasing": {"name": "Saksiam Leasing Public Company Limited (ศักดิ์สยามลิสซิ่ง)", "category": "Thai Brands", "description": "Saksiam Leasing homepage: white canvas, navy #243865 pill buttons and header, ink #192543, sukhumvitTadmai typeface at 48px/800 for display, 32px button radius, 28px cards and a --main-blue and --main-yellow root colour scale.", "sha256": "e7e0a7db3468d52430c9be74fb217e3e9499dd603a9edc820ebe13142dd6bb1f", "bytes": 15823}, + "salary-hero": {"name": "Salary Hero", "category": "Thai Brands", "description": "Salary Hero site at salary-hero.com: Poppins 48px bold headlines, violet #745bf7, lavender #f3f3ff, indigo #251a52 and magenta #982a96 colour blocks, white pill buttons with #542ad8 hover, 16px-radius stat tiles and a floating dark pill nav.", "sha256": "81488b97d956e78cd1f9fcbeba3e4f9e492663c91882ba83fbaed8ee6ae7440f", "bytes": 10434}, + "salesforce-g": {"name": "Salesforce", "category": "Product & SaaS", "description": "Salesforce's home page (measured on the Thai locale salesforce.com/th/) pairs ITC Avant Garde 70px/400 headlines in navy #002c6e with Salesforce Sans 16px body in #181818, a #0176d3 4px-radius 'start free' button (hover #0b5cab), #066afe pill buttons, and translucent 32px-radius product cards on deep #032e61 bands.", "sha256": "6fa9f639a79282509439470420e19a153d7264fd265c127483bedfe1171b3bdf", "bytes": 14218}, + "salomon": {"name": "Salomon", "category": "Sports & Fitness", "description": "Salomon US store: uppercase salomonSansFont 700 headlines (42px hero, 32px with -1.5008px tracking) over full-bleed outdoor photography, Inter 400/600/700 for UI and 14px body text, #141414 ink on #ffffff, #f5f5f5 secondary surfaces, a #000000 S/PLUS member footer, translucent #ffffff59 48px-radius search field and pill-shaped buttons.", "sha256": "a4727195cf02d20240b300241d858b6f9930f1326984f254a2c7821ba928a775", "bytes": 12287}, + "samart-group": {"name": "Samart Group (Samart Corporation)", "category": "Thai Brands", "description": "Samart Corporation Public Company Limited group site - white page with navy (#2d3359) Kanit text, a #0b4596 royal-blue MORE/SUBMIT button family, 10px-radius bordered business cards, and a dark #363537 header and #323437 footer; Thai-first copy with English subtitles.", "sha256": "92cb9b7e255e7fa6d56a87bd4a61539ccea69c78122ff77ee7bb0d62f8f81317", "bytes": 11447}, + "samart-telcoms": {"name": "Samart Telcoms", "category": "Thai Brands", "description": "Samart Telcoms (samtel.com), Thai ICT and telecom group: Kanit at weights 300 and 500, orange #f05a22 pill buttons (25px radius, 47px high, 2px tracking), blue #1b67cc headings, white cards with a 5px radius on a #dedede page, dark #1e252d footer and #1c1918 top bar.", "sha256": "d0e5caaf5871b0dc5fc56d0c15b566ca9512d3289ea1dd24286490589c8f0515", "bytes": 9966}, + "samitivej": {"name": "Samitivej Hospital", "category": "Thai Brands", "description": "Samitivej Hospital (samitivejhospitals.com), Bangkok private hospital: Helvetica Neue uppercase headings with 1px to 2px tracking, deep green #004729 and brass gold #b18e50, sage #dce0d6 bands, square 50px buttons, soft white and gold-tinted panels, no shadows.", "sha256": "6e44e33af4225a633d23baa5ef1b38808a67c7ebd9b1a0acfe063e5b85fbe9f6", "bytes": 10107}, + "sammakorn": {"name": "Sammakorn", "category": "Thai Brands", "description": "Sammakorn (sammakorn.co.th) Thai luxury-housing developer site in DB Heavent 300 to 700: navy #012168 primary with white text, warm beige #efece7 search band, gold-brown #867551 rules, tan #bbb19d chips, square 0px buttons and 4px chips on a white canvas.", "sha256": "251cc6cb7c9c91f15580faf16f5311e1659023058c9d0d8d3c0042fa0bd68d15", "bytes": 10560}, + "sammitr-motors-manufacturing": {"name": "Sammitr Motors Manufacturing PLC", "category": "Thai Brands", "description": "Corporate site of Sammitr Motor Manufacturing PLC, a Thai logistics-transport and automotive-parts maker. White canvas, a saturated red #ed1b25 nav bar and accents, Athiti display headings at 40.8px/600 over Roboto 16px body, pill-shaped 99px secondary buttons and a charcoal #2c2c2c footer.", "sha256": "e3492193df0ef62b29a39da9db6beaac92f740829788e56424052502a1413141", "bytes": 10250}, + "samsung": {"name": "Samsung", "category": "Consumer Electronics", "description": "Samsung US storefront (samsung.com/us): white #ffffff pages with #f7f7f7 product stages, black #000000 text and black pill CTAs (17.7778px radius, 36px tall at 1280px) that invert to white on hover, blue #006bea for hover and savings, SamsungSharpSans 700 for display headlines (49.7778px / 35.5556px) over SamsungOne 400/700 for UI and body, 7.11111px tile radius, and a type/spacing scale that is fixed at 1440px and scales down proportionally below it.", "sha256": "61efd84008b12a97a138b614deb467248eb76076b45304022092e0fda0dea524", "bytes": 30190}, + "san-rita": {"name": "Atelier San Rita", "category": "Portfolio", "description": "Portfolio site of Atelier San Rita, a Canadian creative studio. A map-as-interface home on icy blue #dde2e4 with forest-green #2d3329 ink, adventure-yellow #e2ffcc highlights, F37 Stout compressed capitals at 56px over 10px bold monospace labels, and no rounded corners anywhere.", "sha256": "935066736839c630e5da3b81ae625c7e221691f5447de9c688fedff9e23b6a19", "bytes": 9679}, + "sanity": {"name": "Sanity", "category": "Backend, Database & DevOps", "description": "Sanity's homepage as measured on the live site — a #0b0b0b near-black canvas, white Waldenburg display type up to 112px with -4.48px tracking, IBM Plex Mono uppercase 13px button labels, pill buttons filled #ff4100 (with a #ff560a brand variable in the page CSS), a full-width orange logo band, and dark Studio mockups with 3px to 12px radii.", "sha256": "4e910d5acfb277bc70b29b8470ca951002a82b972409f404c8c502ca217ed32b", "bytes": 14241}, + "sanofi": {"name": "Sanofi", "category": "Pharma", "description": "Global biopharma corporate site at sanofi.com/en. White canvas, Sanofi Sans 16px body and 700-weight 48px headlines with Sanofi Serif italic accents, brand purple #7a00e6 for links, hover and arrows, 4px-radius buttons, 8px-radius bordered article cards and a #f5f5f5 Global selector.", "sha256": "006a4db26d3d7b419b7635a176b038bb572efcfc87ba5d6db1b537173baad910", "bytes": 10308}, + "sanook": {"name": "Sanook.com", "category": "Thai Brands", "description": "Thai news and entertainment portal at sanook.com. White canvas, brand red #f70000 channel tabs, Sukhumvit 33px bold headlines with Prompt 30px section headings, light grey card shadows, 20px-radius search and login pills, and dense multi-column card rows.", "sha256": "006e4c37cf84a5662e2b4adac7cf6ebc8f7f69d9507b8398dd38e0f44fd7b291", "bytes": 11237}, + "sansiri": {"name": "Sansiri", "category": "Thai Brands", "description": "Thai property developer site at sansiri.com/thai. White canvas, brand blue #0053b5, GraphikTH Regular and SemiBold with 36px headings, 50px-radius pill buttons and inputs, 16px-radius project cards with soft shadows, and a #f6f6f6 footer.", "sha256": "158075de0b87918ea050614a9df903ccb9019d1a1f7c977f92ff95fd8994d3f1", "bytes": 10481}, + "santander": {"name": "Santander", "category": "Banking & Insurance", "description": "Santander Group corporate site at santander.com/en. White canvas, brand red #ec0000, proprietary Santander Headline and MicroText fonts with a 48px hero headline, a 47px Online Banking button with 4px corners, pale blue statistic tiles and a #f7f7f7 footer.", "sha256": "0d2ce13fe0a139b10647ca73298eb4e82397cdc7484fb26f6204433cddb59d13", "bytes": 9592}, + "sanuk-games": {"name": "Sanuk Games", "category": "Thai Brands", "description": "Indie game studio site at sanukgames.com. White canvas with #767676 Source Sans Pro 16px text, deep red #ce1a1a links and hover, Raleway navigation over an illustrated dark header, a #1c1c1c footer, and square corners throughout with no shadows.", "sha256": "fe45ff46ad694038e45fae003b9445d60d1273fa4adff5d704f6b4f2861aff98", "bytes": 8449}, + "sap-fundamental": {"name": "SAP (sap.com)", "category": "Design Systems", "description": "SAP's product pages: the proprietary 72 Brand Variable typeface (Arial fallback) in medium weight, near-black navy text (#223548) on white, a single saturated blue (#0057d2) for the floating Contact us button and every link, a pale blue hero band (#ebf8ff), 8px-radius buttons with a soft blue-grey drop shadow, and a dark #222222 footer.", "sha256": "d841f314000883ad6c58a55f403f087589d13ae2c6edce45b750061f28ba87d8", "bytes": 10177}, + "sappe": {"name": "SAPPE", "category": "Thai Brands", "description": "SAPPE Public Company Limited's English corporate site (sappe.com/en) — a white canvas carrying a single saturated red (#ec1c25) for the logo, nav hover, headlines and full-bleed action tiles, set in the DB Havel / DB Helvethaica Thai-Latin family at heavy 900 weight for display and 400 for body, with 50px pill-radius red panels and a muted slate-grey (#7c858c) paragraph voice.", "sha256": "f052e68a0775fc071c28aaa936bec5c2066db9e014023b483e608bc8893f9b4a", "bytes": 14867}, + "sarakadee-books-wiriyah-business": {"name": "Sarakadee Magazine", "category": "Thai Brands", "description": "Thai documentary magazine site at sarakadee.com. White canvas, #212529 ink, red #ff0000 SUBSCRIBE button, Anakotmai 36px headlines with Sarabun 16px/30px body, square black and white buttons, a split photo-and-dark-panel hero and a dark two-tone footer.", "sha256": "8f816aec2d1043a22547b113401a445858e56da42540ee2f297feb11517011f4", "bytes": 10512}, + "sasom": {"name": "SASOM", "category": "Thai Brands", "description": "SASOM (Thai streetwear and collectibles marketplace) design system: Noto Sans Thai at 12 to 16px, neutral #f9f9f9 canvas, near-black #18181b login button with 4px radius, pill shortcuts and 12px media tiles.", "sha256": "603610b1d6651dd95500b5467814676cb63b36b0384ea4e234d589ea74934b65", "bytes": 10704}, + "savills": {"name": "Savills", "category": "Real Estate & PropTech", "description": "Global real estate services site at savills.com. White canvas with #313131 ink, Savills yellow #ffdf00, navy #35384b footer, red #cd171e uppercase links, Domine serif 56px headlines over Gotham 16px body, and square corners with no shadows.", "sha256": "9665765c8e76559813c6a599e838cc40ea7ebf564d3f0115f1dd87e6deb6ecbe", "bytes": 9159}, + "savor": {"name": "Savor", "category": "Food & Beverage", "description": "Savor fats brand site at savor.it. Cream canvas #fff9eb, maroon ink #370808, #f0e7d7 buttons with 5px radius and #e6dac4 hover, Suisse Intl 17.7px body with Roslindale Display Condensed 111.6px hero type, no borders or shadows.", "sha256": "d5e6480f51465a312649ae0f20368bc0e7e77cf7d1cfa963319f410c1744ce74", "bytes": 10344}, + "sc-asset": {"name": "SC Asset", "category": "Thai Brands", "description": "SC Asset (scasset.com, measured at /en/) residential developer site: BrutGrotesqueThai type with 36px weight-300 headings and -0.72px tracking, #000000 ink on white, a #ff6200 orange accent for nav band and tags, pale peach and #fee6ee pink promotional bands, 10px and 15px radii, and large house photography.", "sha256": "692f6a41fcbf53ba6c1bb3087653fa49c4360dc0420148923617143cabeaee6d", "bytes": 9331}, + "scale-ai": {"name": "Scale AI", "category": "AI", "description": "Scale AI home page: monochrome enterprise-AI site in the aeonik grotesque at weight 400, 64px display with -0.64px tracking, black #000000 primary buttons with 8px radius on a white #ffffff canvas, body ink #575757, tinted cards in #a8927c, #193a29 and #79648c.", "sha256": "118ee96f4207974ca874ce0386f5f1ce45518b9f44b95a121d8e0226c4c9dac4", "bytes": 10806}, + "scania-thailand": {"name": "Scania Thailand", "category": "Thai Brands", "description": "Scania Thailand (สแกนเนีย ประเทศไทย) country home page: deep navy #041e42 header and 80px Scania Sans Headline Bold headings on a white #ffffff canvas, full-bleed documentary truck and bus photography, square corners, body ink #000000de at 16px.", "sha256": "2ac81fbb0d7db94967fa40d8981861fe9a629973cea696966527c290ef356ee2", "bytes": 9418}, + "scb": {"name": "SCB (Siam Commercial Bank)", "category": "Thai Brands", "description": "SCB's personal-banking website — a light #f9f9fa canvas with white 4px-rounded cards on a soft 0 2px 6px rgba(0,0,0,.07) shadow, SCB purple #7a58bf for 44px buttons and links, deep purple #462279 footer, Sukhumvittadmai type in a single 400 weight (bold via the sukhumvittadmai_bol face) — 54.08px hero headlines, 28px card titles, 16px/22.4px body.", "sha256": "d29417f2ed6bd7d904a8a239110b194aca3c72aa7ac31c31dcd865c81abc8b7d", "bytes": 18744}, + "scbx": {"name": "SCBX Group", "category": "Thai Brands", "description": "Dark corporate fintech hub in SCBX proprietary typefaces: #151a1f near-black ground, white #ffffff headings, #aeb3b4 secondary text, #d3adff lavender accent, square 1px white outlined buttons with no shadows and 4px radius only on one element.", "sha256": "cbc40a40add789cdea7fbec2da374be7c2eb2356c10c9e60e24366457b94fcd7", "bytes": 10113}, + "scg-express": {"name": "SCG Express", "category": "Thai Brands", "description": "SCG Express parcel-delivery site: SCG red #ed1c06 hero and tiles, teal #008c74 accent, db_helvethaica 700 uppercase 48px headings, 14px body, square color-block service tiles, pill tracking input with 9999px radius, grey #e6e7e8 footer.", "sha256": "8df6025520869e61287f92af3c110c3737438efb4bb82591d8a7416392b262ec", "bytes": 9037}, + "schneider-electric": {"name": "Schneider Electric", "category": "Energy & Climate", "description": "Schneider Electric global corporate site: Arial Rounded MT for SE type, green #3dcd58 primary from --se-primary, grey #f0f1f2 page body on #fcfcfc canvas, white cards with 8px radius and #e6e6e6 border, dark product-render panels at 16px radius.", "sha256": "18862925db97df3b645c50e3c0b72ab1afac899aadb5aae9da3c6228b62c03c8", "bytes": 9755}, + "scot-gov": {"name": "Scottish Government", "category": "Design Systems", "description": "gov.scot is built on the Scottish Government Design System: Roboto throughout (44px/56px bold H1, 19px/32px body), near-black ink (#1a1a1a), brand blue (#0065bd) for links and the primary button, a white canvas (#ffffff) with light grey panels (#f8f8f8, #ebebeb), square 0px corners and a thick blue top rule above each content section. Hover blue is #00437d.", "sha256": "5da9c1c1b753cf459237cda4533c521b61cd1f5e0a5e4f2e91b23f544719f547", "bytes": 10512}, + "sculpting-harmony": {"name": "Sculpting Harmony", "category": "Architecture & Interiors", "description": "Sculpting Harmony, a Getty interactive story on Frank Gehry and the Walt Disney Concert Hall: orange #ffa441 opening field, black #000000 ink, Reckless serif and Roboto Mono uppercase labels, bracketed buttons with 32px radius, chapter colors #4596ff, #16a147, #ff6359.", "sha256": "352afa4aaa2a4a827f2dfc20130c6af7405e6f83ee8cd02e362ca4cc9d87bd5d", "bytes": 10148}, + "se-ed": {"name": "SE-ED (ร้านหนังสือออนไลน์ SE-ED)", "category": "Thai Brands", "description": "SE-ED's online bookstore: Poppins with Noto Sans Thai fallback, a red (#e50000) brand with 30px-radius outlined buttons, a near-black (#222323) category bar, 8px product cards and bold 32px/700 shelf headings on white.", "sha256": "fb4873df44a9baec3903911505c2c32cf0c17e4bb12bce9db9ce468b5c12b230", "bytes": 10567}, + "seacon": {"name": "Seacon Development", "category": "Thai Brands", "description": "Seacon Development (seacon.co.th, Thai: ซีคอน รับสร้างบ้าน) custom home builder site: Prompt type at 32px light headings and 14px body, navy #1f3765 ink and #1d2a4e bands on a #d4d4d4 canvas, a #ed1c25 red accent, pill-rounded 100px search field, soft navy shadows and large house-render imagery.", "sha256": "f5459647ea1f0ad9047b5263d3e1c7bba971f729b2550842ee97eeee520b851c", "bytes": 10421}, + "seacon-bangkae": {"name": "Seacon Bangkae", "category": "Thai Brands", "description": "Thai-language site of Seacon Bangkae mall, set in Red Hat Display with a 199.897px outlined uppercase hero, Roboto and Mitr text, white and #f5f5f5 canvas with black ink, #f37c4b orange accent, a #00000080 glass header and 32px-radius frosted news cards.", "sha256": "7132f32c7eb6ec17167e0d072a82ce75cc20ac93ca7f55725c50d93322e61343", "bytes": 11852}, + "seacon-square": {"name": "Seacon Square", "category": "Thai Brands", "description": "Design language of the Seacon Square shopping center website: a white canvas with black headings, white text on translucent bars and #959595 captions, a translucent black header, Red Hat Display 700 uppercase for the giant SEACON hero word, Roboto with Mitr as the Thai companion for everything else, full-pill controls (100px radius), with event posters and photography doing nearly all of the colour work.", "sha256": "762390d6de5e749da1a8d6d7eb6c64169284930038d3957cd2475b68652b03f5", "bytes": 10752}, + "seasats": {"name": "Seasats", "category": "Tech & AI", "description": "Seasats ocean-autonomy site: seasonMix serif display at 110.222px, seasonSans body, supplyMono uppercase labels, off-white #fffdfd canvas, ink #232323, forest-green #2b3922 button cap, mint accent #e3ede4, radii scaled from 0.8rem.", "sha256": "49b7fa97be62aa2fd7c3a2171905f79b6b8bc334a32cc1bdab946554267453cc", "bytes": 10639}, + "seb": {"name": "SEB", "category": "Design Systems", "description": "SEB (Skandinaviska Enskilda Banken) group website built on SEB's Green Design System: the proprietary SEB SansSerif at weight 450, a near-black #0a0b0b ink on white, a single deep forest green #003824 for the primary pill button and hero panel, warm-grey #f7f8f7 cards with 12px radius, a #1a1a1a footer, and semantic red, green, blue and amber for market and status data.", "sha256": "fadfb54672146791c805783999be4854061a4d77b22cc7cc7b8a411b5b777961", "bytes": 16883}, + "seek": {"name": "SEEK", "category": "Design Systems", "description": "SEEK's Australian job-search site (seek.com.au) is built on the Braid design system's seekJobs theme: SeekSans (weights 400, 600, 700), slate ink #2e3849 and #5a6881 on white, a hot SEEK pink #e60278 for the search button, deep navy #051a49 for the search band, 8px-radius controls with 2px inset outlines, 16px and 24px rounded surfaces, and a 4px spacing grid.", "sha256": "43ab302e5260f449d9d721865c08df6f8b2e3b2025cc070da2d0d30d7c1da97b", "bytes": 13438}, + "sega": {"name": "SEGA", "category": "Gaming", "description": "SEGA home page: black #000000 and navy #0d1126 bands with electric blue #0057ff primary, Inter Tight 800 uppercase headings at 108px, Poppins 16px body, 48px-radius tag buttons, skewed clip-path action buttons, 8px card radius and large soft shadows.", "sha256": "83d21f9006b939fee9ecadbb75aa0697f4b1569dbc0c808db2cb6cee2c402084", "bytes": 10298}, + "semantic-ui": {"name": "Semantic UI", "category": "Frontend Frameworks", "description": "Semantic UI, a CSS and jQuery component framework whose site and docs are set in Lato 14px/16px on white, with the framework's #2185d0 primary blue, #1b1c1d black, #e0e1e2 default grey buttons, rgba(34,36,38,0.15) hairlines, 4px button radii and a dark-to-warm gradient hero carrying white outlined buttons.", "sha256": "16dcf0be446039e57cf62114080cece8bff07a50b0adc9601d7c7cf268f2cbf9", "bytes": 14878}, + "semrush": {"name": "Semrush", "category": "Design Systems", "description": "Semrush marketing homepage as captured in October 2026: tight, heavily tracked Lazzer headlines (84px/600, -3.36px) in off-black #181e15 on white and pale mint #dceeeb, a lavender #c190ff pill CTA with 100px radius, an off-black #181e15 secondary pill, lime #89ff75 and aqua #18f0bf accents, and frosted-glass search and card shells with a 0 2px 12px 5% shadow.", "sha256": "e02fd5695ef69a335479c7ffb47f78a5c1a3138bcaf51b991fb2e2f5168ae849", "bytes": 15051}, + "sena": {"name": "Sena Development", "category": "Thai Brands", "description": "Sena Development (sena.co.th) Thai homes and condos site in db_heavent 300 to 600 with teal #32bcad actions, 8px button radius, 10px card radius, 50px outlined chips on a white #ffffff canvas with an orange #e1762d tag color.", "sha256": "115c4d10efe977bf1a358bb568ba115e651adae3770275dfdd9924101a45587a", "bytes": 10519}, + "sennheiser": {"name": "Sennheiser", "category": "Music & Audio", "description": "Sennheiser storefront home page: sennheiserFont 400/500 type, black #000000 pill buttons at 54px, ink #303030 on white #ffffff, grey #f4f4f6 product tiles, blue #037cc2 active category row, teal #003746 footer, 8px card radius.", "sha256": "b31d148d334fad41058d8e69b65b47299d5f85336f1f87e63b16b25d1c6edeb9", "bytes": 10627}, + "sentry": {"name": "Sentry", "category": "Backend, Database & DevOps", "description": "Sentry's homepage as measured on the live site — a #1f1633 'rich black' purple canvas over a #150f23 base, white Dammit Sans display type at 88px/700 with Rubik text and Monaco code, uppercase 14px/700 buttons with 8px radius, a hot pink #fd44b0 highlight word in headlines, blurple #6a5fc1 pills, and violet-framed product cards.", "sha256": "412edb733a6b1b8f4c3b2c1e33ea32737bbbd838e91350ccdd849fd9e7acb57c", "bytes": 14188}, + "sephora": {"name": "Sephora", "category": "Beauty & Personal Care", "description": "Sephora's US storefront: a white #ffffff product-grid canvas under a black #000000 category band, set entirely in \"helvetica neue\" (14px/400 body, 20px/700 section heads), black #000000 ink with #666666 secondary text and #136bea links, a single red #cf112c (hover #e2030f) for the filled pill CTA and sale prices, 2px black outlined pills (9999px) for most actions and 4px-radius cards edged by a 1px #eeeeee inset shadow.", "sha256": "b169851da470a5d130ef4f48a59a64c3e2bab7490ba6f100205bf8b76e39ecb2", "bytes": 27555}, + "serpentine": {"name": "Serpentine", "category": "Culture & Events", "description": "Serpentine (serpentinegalleries.org): white and #f2f2f2 pages with a teal #00cbab visit band, giant condensed Platanus headlines (125.356px hero), Tstar Pro 700 uppercase labels, Noe Text serif body at 16.15px, white buttons and image cards with a single rounded bottom-left corner (10px / 20px).", "sha256": "f6c7f2ea28869a4a2c9e703f18250239488d588a1e5d5dd9627567b4ef395667", "bytes": 11027}, + "serve-robotics": {"name": "Serve Robotics", "category": "Tech & AI", "description": "Serve Robotics home page: Roobert type with 107.461px display and -2.4px tracking, midnight green #083031 ink and primary, deep green #0f4233 bands, pale green #cee8e1 cards, mustard #ffc942 and mint #61e5c0 accents, 8px card radius.", "sha256": "2e727719b8d6ba48887c7909a90930f6d7522dc08b9e02bb6b217ddaa2a38a3c", "bytes": 10594}, + "servicenow-g": {"name": "ServiceNow", "category": "Product & SaaS", "description": "ServiceNow's marketing site pairs a deep Infinite Blue (#032d42) chrome with Wasabi Green (#62d84e / #63df4e) capsule CTAs, set in the proprietary ServiceNow Sans family (Light for body, Bold 48px for the hero h1). Radii are capsule 500px buttons, 24px and 32px cards, 8px inputs; focus is a 2px #3eaa2b outline.", "sha256": "15eccc52743b7ba697860edb82acaa6a135ebc3749b7906cc5a88580353d0b4f", "bytes": 14023}, + "servicetitan": {"name": "ServiceTitan", "category": "Design Systems", "description": "ServiceTitan's marketing site sets Sofia Pro headlines (44px/700, -2.2px tracking) and Nunito Sans body text on a white canvas with a #22252a charcoal hero card, a coral-red #e24f4f call to action with 8px corners, a #0265dc blue secondary, and documents its product system, Anvil2, with the same two typefaces.", "sha256": "aec0a3d1db01f8b811a3d71bc0a412b327e90313310b3ca6dcb9771efc75d344", "bytes": 11622}, + "set-exchange": {"name": "The Stock Exchange of Thailand (SET)", "category": "Thai Brands", "description": "SET home page: market-data portal with amber #fbb034 primary buttons and tabs, charcoal #1e1e21 and #2a2e34 modules on white #ffffff, DB Helvethaica X headings with Sarabun 14px body, pill search field, 0px-radius primary button, red #ff3c3c declines.", "sha256": "4c80095e27e35bef2608f3a2fa1d49b59124419a2447863d2e7d98f3225e333d", "bytes": 10901}, + "settrade": {"name": "Settrade (SETTRADE.COM)", "category": "Thai Brands", "description": "SETTRADE.COM Thai home page: white and #f8f9fa canvas, blue #154e92 primary with navy #1d3352 footer, green #17af54 for gains and links, DB Helvethaica X for headings and Sarabun for navigation, dense market-data tables.", "sha256": "1c46b907fadb7527bf418d10ad45d8ef2cb42c57247e9bddee27654fd6651a89", "bytes": 14906}, + "seven-eleven-th": {"name": "7-Eleven Thailand", "category": "Thai Brands", "description": "7-Eleven Thailand (7eleven.co.th, operated by CP ALL) is a white-canvas promo catalogue set entirely in the Thai typeface DBHelvethaicaMonX (regular) and DBHelvethaicaMonXBd (bold cut, served at weight 400), with a 24px body size, deep 7-Eleven green #00693e for 36px section titles and the full-bleed footer, brighter green #00a550 for nav hover, grey #525252 body ink, square 0px image tiles on #f2f2f2, and 50% circular carousel controls.", "sha256": "8f3943022c6d5dbd94651b9337affafde51e5908e1e7f72c0dae046b024505f7", "bytes": 25267}, + "seventeen": {"name": "Seventeen", "category": "Culture & Events", "description": "Seventeen creative agency site: Webflow build in Bagosscondensed 400 with a 49.2727px headline on /about, slate #afaea7 and black #000000 bands on a white #ffffff canvas, white-highlight headline blocks, no shadows and no measured corner radius.", "sha256": "6264e9768f19820b1a2e1b5219399ab955ed98340493346c473535c715c5dd41", "bytes": 9474}, + "sf-cinema": {"name": "SF Cinema", "category": "Thai Brands", "description": "SF Cinema home page: Mantine-based site in Smarn Film type, SF blue #4285cf and #2062af gradient bands, dark footer #231f20, uppercase 12px nav, 8px-radius pill buttons at 30px, 24px rounded band corners, ink #3c3c3c on white #ffffff.", "sha256": "aec2ac4c108079848ae1b1069093edb15ed352e2270af734cb0443a59e80701c", "bytes": 9909}, + "sg-capital": {"name": "SG Capital", "category": "Thai Brands", "description": "SG Capital (sgcapital.co.th/en/home), a Thai non-banking financial services provider: FC Iconic typeface at 400 and 600, white canvas #ffffff, brand red #f5333f, brand blue #003da6, black pill buttons with 30px radius and 16px-radius cards with a soft blue shadow.", "sha256": "b124ddbf7314366d4e15c998e2955c69b3a414a9f21631a4e92f49c351bc536a", "bytes": 10409}, + "shadcn": {"name": "shadcn/ui", "category": "Headless UI", "description": "shadcn/ui as measured on ui.shadcn.com and its button docs — Geist at 14px/500 buttons and a 48px/600 headline with -2.4px tracking, neutral greys (#000000 primary, #fafafa on-primary, #737373 muted, #e5e5e5 border), a 10px base radius scale with 26px pill hero buttons, and hairline card shadows.", "sha256": "915364cfd9377cf6eec8268e9aaf8f6278e96410f12ab50fbd861afa59a63a94", "bytes": 14417}, + "shader-development-studio": {"name": "Shader Development Studio", "category": "Portfolio", "description": "Shader (shader.se), a Norrköping creative development studio for WebGL, 3D and AI experiences. Pure black canvas #000000, a single warm off-white #fcf9f3 for all text, one typeface (STIX Two Text serif, 16px/24px, weight 400), and square corners everywhere: no rendered border radius.", "sha256": "41ca356cca4e0f3d4431c0aa797d914860cd96b96e551ea93e3cb20c267a4c50", "bytes": 9198}, + "shake-shack": {"name": "Shake Shack", "category": "Food & Beverage", "description": "Shake Shack's US home page shakeshack.com measured live — white #ffffff header, black #000000 footer, Shack green #418613 pill 'Order Now' button (40px radius) that inverts to white on hover, white 'ORDER NOW' pills (30px) on 80%-black #000000cc hero panels, and Jost throughout: 60px/700 headlines, 17px/700 capitalised buttons, a bold 32px Roboto MENU label.", "sha256": "92bc857153ba8b73848ff22846d7131a422416a2d32db857adb28348ac10d367", "bytes": 12485}, + "shangri-la": {"name": "Shangri-La Hotels and Resorts", "category": "Travel & Hospitality", "description": "Shangri-La Hotels and Resorts (shangri-la.com): luxury hotel group site with PlayfairDisplay serif headings (36px/44px, weight 500) over Montserrat 14px/20px body, a gold #e0aa14 square-cornered Join Now button with #333333 text, white canvas #ffffff, pale grey #f4f5f6 sections and a deep teal #0b363c footer area.", "sha256": "9afca27fa967f8ef49b8aa955e2c3480bb65d6d965dfbe9aa062bdd6146f36aa", "bytes": 12090}, + "shark-energy": {"name": "SHARK Energy", "category": "Thai Brands", "description": "Brand site for SHARK Energy Drink (a drink from Osotspa) on a dark #252424 canvas with #929292 body text, #408bd1 blue buttons, #0f4693 deep-blue hero, a 189px uppercase 28Days watermark word, Source Sans Pro 300/900 and sparse 4px, 14px and 40px radii.", "sha256": "aed0b8085c7a77e26adbfe75bbed3d79d6a304cdeb4379a839d2579478a50463", "bytes": 10659}, + "sharplink": {"name": "Sharplink", "category": "Product & SaaS", "description": "Sharplink (sharplink.com), an institutional-grade Ethereum treasury company listed on Nasdaq: Archivo 88px/84.48px display headings with tight negative tracking, Archivo Narrow 13px uppercase button labels, warm off-white canvas #f7f7f5, #f3f3f3 square CTA with a brand-blue #0e76ff arrow tile, and 0px radius everywhere.", "sha256": "7c82983160d5f0fc3c3bc978efc73e1b390e386fd14e1eb6f802b8887c0a243a", "bytes": 11307}, + "shazam": {"name": "Shazam", "category": "Music & Audio", "description": "Shazam's web home is a white (#ffffff) Apple-style chart catalogue opened by a dark, blurred-artwork hero; NeueMontreal Bold headlines at 60px/700 with -0.6px tracking, #1c1c1e ink, Shazam blue #066bff for links and arrows, 16px-radius song cards and 50px pill buttons.", "sha256": "e04a11f67fd99677440bb6ceef55459d0c299de91396fc1bd7b986bdf6afbe6b", "bytes": 13790}, + "shed": {"name": "Shed", "category": "Architecture & Interiors", "description": "Shed (shed.design), a brand design and interior architecture agency: OwnersWeb 600 uppercase display at 205.6px/185.04px, SequelWeb sans for body (48px/48px weight 500 in the intro statement), RecklessWeb serif accents, white canvas #ffffff, ink #1c1c1c, light-blue #6ccaff link accent and 128px/50% rounds.", "sha256": "a3715a53f420d361fae66d681ff1ab601737dc88133fa9e2fd14ff4f455eccc8", "bytes": 9679}, + "shein": {"name": "SHEIN", "category": "E-commerce & Retail", "description": "SHEIN's Thailand storefront (th.shein.com), measured — black #000000 header, nav and square Subscribe buttons, light grey #f6f6f6 and white #ffffff surfaces, promo orange-red #f93a00 prices, trend purple #9462ff, Muli 13px nav, Jost 28px banner titles, system-ui 12–16px copy, 0px buttons with 6px cards.", "sha256": "1bf606fa066a1a4cc263d9663ec769b2081dc8cc26a1450bd99ce67b12e07b06", "bytes": 13182}, + "shell": {"name": "Shell Global", "category": "Energy & Climate", "description": "Shell Global (shell.com): white canvas #ffffff with grey ink #4a4a4a, Shell yellow #ffc800 buttons with 8px radius and 48px height, 16px-radius cards on #f5f5f5, a proprietary custom-font bold for headings (32px/48px, 28px/42px, 20px/30px) over an Arial stack at 14px/21px.", "sha256": "6956f292d7eaeffe93b06e35c2caf0862e343bc69c7d6fb19c93a6ba1f1ee319", "bytes": 10215}, + "shell-thailand": {"name": "Shell Thailand", "category": "Thai Brands", "description": "Shell Thailand customer site (shell.co.th/th_th/customer.html): white canvas #ffffff, grey #f5f5f5 cards, ink #4a4a4a, Shell yellow #ffc800 buttons that invert to ink on hover, custom-font headings over Arial, 6px and 8px button radii and 16px link tiles.", "sha256": "c79497c04efb7f815a4b22be96f97ec884d2380eadaaa4ac1fb1e2aed7c7be1f", "bytes": 10876}, + "shift-5": {"name": "Shift5", "category": "Tech & AI", "description": "Shift5 (shift5.io), operational intelligence software for defense and transportation fleets: signal-orange #ff5841 canvas, graphite #202020 ink, grey #b9b9b9 buttons with 24px radius, NonSans 177.778px/170.667px display with -3.55556px tracking, and AuxMono 12px uppercase monospace labels.", "sha256": "b9a556f2ec46b598127f76f15f3aa26d4a0762f9aa36491ef838aaccc4569bad", "bytes": 9805}, + "shippo": {"name": "Shippo", "category": "Logistics & Mobility", "description": "Shippo (goshippo.com), the multi-carrier shipping software and API, runs its marketing site on a saturated mint-green canvas (#25d695) with a deep teal action color (#00484e), black text, Rethink Sans 700 headlines (64px hero, 48px sections) over neue-haas-unica body copy (24px/32px lead, 600 buttons), 8px-radius buttons 56–60px tall, and flat green cards outlined with a 3px black border that echo its bold-outline illustration style.", "sha256": "844ef65e779a0fa93eae5f235752acab7a12fdc15f1a47cbc25e77b91279cf59", "bytes": 24598}, + "shiseido": {"name": "Shiseido", "category": "Beauty & Personal Care", "description": "Shiseido (shiseido.com, US store): white canvas #ffffff with black #000000 ink, square-ish black 12px uppercase ShiseidoGinzaExtBold buttons (5px radius, 40px tall), a red #d6001c promo bar and Get Help pill, ShiseidoGinzaExtRegular 36px/43.2px headings over ShiseidoGinzaRegular 14px/19.6px body.", "sha256": "bd7ecdc13d53689d06e13ff549c5e2a02d1307b7a63500bd7e3f6198ed877809", "bytes": 11407}, + "shoelace": {"name": "Shoelace", "category": "Design Systems", "description": "Documentation site of the Shoelace web components library: white canvas, #18181b text on the system UI font stack, sky-blue #0284c7 primary button with 4px radius and 40px height, danger #dc2626, soft cool-gray shadows; a Web Awesome sunset modal overlays it.", "sha256": "cd291e0e01916630ee3e34812eb6800e8b52769110c9bef06ed886df9a650a68", "bytes": 10402}, + "shopat24": {"name": "ALL Online", "category": "Thai Brands", "description": "7-Eleven's ALL Online store, measured on its ShopAt24 page: white canvas, #009f3c green navigation bar, #00c300 green links, #e62739 sale red, #455d70 slate text, DB Ozone X typeface at 22px, 17px radii on product cards.", "sha256": "5e18b97ae5f4ee4bb9d3cc2c07f3e957da50430e2a51ed5cef8aa37aa2091129", "bytes": 10422}, + "shopeepay-thailand": {"name": "ShopeePay Thailand", "category": "Thai Brands", "description": "ShopeePay Thailand (shopeepay.co.th): e-wallet marketing site in Shopee orange #ee4d2d on white #ffffff with charcoal ink #202325, Thai type in SukhumvitBold 32px and 22px headings over Thonburi 14px body, 8px-radius bordered feature cards, and a 36px-tall orange download button.", "sha256": "4e5b4038a85ba5968a7b4e1fdd4255bc77031928d23d2c83c83ce602ac86bbbd", "bytes": 10569}, + "shopify": {"name": "Shopify", "category": "E-commerce & Retail", "description": "Shopify's marketing homepage is a near-black, cinematic dark theme: a #02090a canvas with deep forest-green (#041e18) and midnight-navy (#000a1e) panels, white type in the variable Shopify-Inter family at light weights (300/330) with negative tracking up to -1.92px at 96px, and a single white pill CTA (9999px radius, 56px tall) that turns #d4d4d8 on hover.", "sha256": "25e6169e146c3fcd7dbca1d790d71fa59f691cbab182209a17466e30aea4116a", "bytes": 14375}, + "shopify-supply-performance-pack": {"name": "Shopify Supply (Performance Pack)", "category": "Retail & E-commerce", "description": "Shopify Supply, Performance Pack (shopify.supply): the Shopify merch store as a dark black #000000 storefront with bone-white #eeece2 text, an italic Condor 40px/40px uppercase headline, Fraktion monospace labels, Inter-Variable body at 16px/24px, a #6fc992 green accent and fully round (pill) controls.", "sha256": "dbc37e83b18aeafbca87d9f5bb41b7f7822a94d784b6681b6c69aed67ae5f8b6", "bytes": 10330}, + "siam-cement-chemicals": {"name": "SCG Chemicals", "category": "Thai Brands", "description": "SCG Chemicals (SCGC) corporate site, scgchemicals.com/en/home: white canvas, #333333 body text in Prompt 14.4px, teal #009989 headings in the custom scg typeface at 34.56px/600, pill-shaped 50px outlined buttons that fill #009989 on hover, and teal-to-indigo photographic bands.", "sha256": "392ebf1e82b1a1430219da4a71bd6f36a749a0ddd2f6ff2f76698290f1283051", "bytes": 11276}, + "siam-cement-group": {"name": "SCG (Siam Cement Group)", "category": "Thai Brands", "description": "SCG (Siam Cement Group, scg.com/en): Thai industrial conglomerate site in the custom SCG typeface (700 headings at 32px/43.2px), SCG red #da291c pill buttons 42px tall, near-white canvas #fcfcfd, navy-slate ink #101828, green #079455 stat cards with a 50px bottom-left radius, and a #252a36 footer.", "sha256": "3937734749aec4fb84e8d839d412569eb906b02558169e24920b7761400144b9", "bytes": 11231}, + "siam-center": {"name": "Siam Center", "category": "Thai Brands", "description": "Design language of the Siam Center website: a near-black canvas (#000000 with #050505, #0b0b0b and #111111 steps) carrying white Montserrat text, one electric yellow #ffec00 accent for navigation and buttons, square corners, and loud multicolour poster illustration inside white editorial cards.", "sha256": "086f212cf301f5fa10f5083b772ccf2acee58fa063f3e06591cff994e6c3f249", "bytes": 10213}, + "siam-city-cement": {"name": "INSEE Group (Siam City Cement group site)", "category": "Thai Brands", "description": "INSEE Group page of Siam City Cement (siamcitycement.com/en/home): white canvas with #f9f9f9 page body, INSEE red #e50019 blocks and buttons with square 0px corners, ink #4b4b4b, the custom insee typeface in uppercase (54px/54px weight 700 headings, 20px nav) and circular 50% country flags.", "sha256": "0aaf39c0abdfd18caf1f0693ee0d97765617989202e74f3f040dd7dc36ed896f", "bytes": 10512}, + "siam-discovery": {"name": "Siam Discovery", "category": "Thai Brands", "description": "Design language of the Siam Discovery retail site: Noto Sans Thai throughout with uppercase 600-weight navigation and 40px section titles, near-black #212529 ink and #838385 grey copy on white, cool-grey #dedede panels, black bands, and one indigo-blue #39489c action colour on square-cornered 40px buttons.", "sha256": "ecc07b9cfbf1766e030c85470195f6010460d51923fe233411ee24e28e710c67", "bytes": 9550}, + "siam-paragon": {"name": "Siam Paragon", "category": "Thai Brands", "description": "Siam Paragon (siamparagon.co.th), the Bangkok luxury shopping mall site: pale cool canvas #f2f5f5, near-black ink #030305, a gold #d0b857 nav hover accent, all-Roboto uppercase set at weight 400 with negative tracking (46px/48.3px display), square corners everywhere and no shadows.", "sha256": "17ac036e11d9285a3e4ceb397a853a0e0fd47c339889627188cbba9bf4bde2c7", "bytes": 9945}, + "siam-rath": {"name": "Siam Rath (สยามรัฐออนไลน์)", "category": "Thai Brands", "description": "Thai daily-news portal on a white #ffffff canvas with #f1f5f9 slate page tint, near-black #020618 ink, Google Sans/Prompt/Kanit display type and Sarabun body, a #059669 emerald link accent, translucent maroon #80032699 story cards and a 2px corner radius.", "sha256": "9e6077fefacd660d157c34c3ac566974029114a6018a08d1b894eec43141d69b", "bytes": 10686}, + "siam-sport-syndicate": {"name": "Siam Sport Syndicate (Siamsport Print)", "category": "Thai Brands", "description": "Corporate site of Siam Sport Syndicate PCL, a Thai commercial printing company: white canvas, hot pink #fa1e5a primary with white text, near-black #242424 footer, Kanit in weights 300 to 800, and a 3px button radius with a 50px-tall Contact us button.", "sha256": "a2dbe49ef07daff7dc44a25eaca44acdc1e6b5d2b67a2f5c568166fcab698bf9", "bytes": 9436}, + "siamgas": {"name": "Siam Gas", "category": "Thai Brands", "description": "Corporate site of Siamgas and Petrochemicals PCL. (shown as Siam Gas Group): a light-gray #eaeaea canvas, flat Siam-blue #0071bb label bars with white 16px bold Helvetica Neue caps, red #ff0000 accents, Arial 13.3333px body copy and square 0px corners.", "sha256": "7fc484e43753ae9bb50da3a7c6331686a2f00d0f50ec715f0b4d85a20f0a1931", "bytes": 13143}, + "siamsport": {"name": "Siamsport (สยามกีฬา)", "category": "Thai Brands", "description": "Thai sports news portal on a white canvas with hot pink #fa1e5a primary, black #000000 headlines, Kanit 400/500 display type with Sarabun 14px body, Bootstrap-based layout, 8px cards with a 16px-blur shadow, 12px pink pill-ish tags and a #282828 footer.", "sha256": "c7ab6d9187617c1e03f70a09aaa7f5f6892a390cb5aac6b5227ec8bb10bbda9f", "bytes": 10075}, + "sidewave": {"name": "Sidewave", "category": "Portfolio", "description": "Sidewave (sidewave.it), an Italian digital studio site: near-black #111111 canvas, white #ffffff text, Fraktion Mono 12.8px uppercase labels, Fraktion Sans body, Bigger Display 900 headlines, inverted white-on-black link chips and a single 5px radius over full-bleed violet WebGL/video imagery.", "sha256": "327864b23d77fd27b027d40279b11d55eae5ae4746f3254df3874023e4ae67a6", "bytes": 8594}, + "siemens-energy": {"name": "Siemens Energy", "category": "Energy & Climate", "description": "Siemens Energy global home page: dark purple #1b1534 ink and navigation, electric purple #8a00e5 pill buttons (30px radius, white 16px bold text), Siemens Sans 700 at 60px/70px headlines and 24px/32px body, a #410d71 deep-purple band and a white canvas.", "sha256": "2813cd93f2133441b97625b1cf8dcfcdfebfbd9b0c4b7bf04500746fde6d69f5", "bytes": 10245}, + "siemens-healthineers": {"name": "Siemens Healthineers", "category": "Healthcare & Wellness", "description": "Siemens Healthineers corporate home: a black #000000 editorial canvas with #e6e6e6 text, a white header, white pill buttons (100px radius, #1a1a1a 18px/600 text, 1px #4d4d4d border), SH Headline bold 30px headlines, Siemens Sans body and an orange #ec6602 hover accent.", "sha256": "8d6e791e48cf8fbe9ed57ef0a4bcaf32f07e10e233b0916063e0e89b080ebc09", "bytes": 10048}, + "siemens-ix": {"name": "Siemens", "category": "Design Systems", "description": "Siemens' corporate site (siemens.com) pairs the proprietary SiemensSans face with deep-blue ink #000028, sand surfaces #f3f3f0, a turquoise #00cccc primary button with black text that turns #00ffb9 on hover, square 0px corners at 56px height, and full-bleed industrial photography.", "sha256": "21799191836823c344897ce11407623dd0b6bec319166934bb782da5974f6007", "bytes": 12215}, + "siena-film-foundation": {"name": "Siena Film Foundation", "category": "Agencies & Studios", "description": "Siena Film Foundation (siena.film), a boutique film production house: pure black #000000 canvas, warm off-white #faf7ef ink, a #ffc700 gold accent, Neue Brucke uppercase titles at 48px with -1.44px tracking, NB International and P22 Parrish micro-labels, a 14px card radius and an ENTER splash gate.", "sha256": "cea882387b1fdffce5ce18e2000f3495aa936beabc8d29df1ba898cadd9ce89a", "bytes": 9181}, + "signal": {"name": "Signal", "category": "Media & Consumer Tech", "description": "Signal's site pairs a white canvas with a periwinkle #9dbbf8 hero, Signal blue #2c6bed text on white 8px-radius buttons, Inter ExtraBold 60px/800 headlines over Inter 20px/28px body text, 16px-radius white feature cards with soft shadows, pastel illustration panels and a #3c3744 footer.", "sha256": "fb9da1b81a0b33a1ffc7b088c7bea3e341231a137eff460a969be153278e8af8", "bytes": 11601}, + "sileent": {"name": "Sileent", "category": "Portfolio", "description": "Sileent, an AI content studio site (title: Sileent | AI content studio): pure black #000000 canvas with white #ffffff text, PPNeueMontrealTT 500 at 37.5px for titles, GTAmericaMono 500 numbered micro-labels, no borders, no shadows and no rounded corners over full-bleed grayscale film.", "sha256": "fbc329fdf0f935bc69748f3b2941dbd6132b0551f771e72195766341e4bdfc6d", "bytes": 8902}, + "silent-house": {"name": "Silent House", "category": "Portfolio", "description": "Silent House (silent-house.com), a live-experience studio group site: white #ffffff canvas, black #000000 ink, #999999 gray secondary text, aktiv_grotesk at weights 400/450/500 with strong negative tracking (54px headline at -2.16px, 160px section titles at -6.4px) and small 4.5px radii.", "sha256": "40a945891e1ab57b9daf9c50a12267383fd74b8b57cac9570310326e483f118c", "bytes": 9463}, + "silkspan": {"name": "Silkspan", "category": "Thai Brands", "description": "Thai insurance comparison and financial products site (SILKSPAN Financial Supercenter): blue #0050a0 and #00478e, white and #f9fafc canvas, #222222 text in system-ui with Kanit Medium accents, 6px radii, soft blue-tinted card shadow.", "sha256": "d8cfb8bb187dea4c880a71ff3a0f992ab327753c7164fafa2010abbc3b0b12c1", "bytes": 11074}, + "silpakorn": {"name": "Silpakorn University", "category": "Thai Brands", "description": "Silpakorn University (su.ac.th/en), Thailand's creative university: deep green #003f39 canvas and footer, SU green #008174 buttons, #f5f5f7 page tint, manop-variable body at weight 680 and the custom SILPAKORN70yr display face, with asymmetric 20px corner radii and 130 circular elements.", "sha256": "c84bf574506be73238a0c4af84119329c3681a84b4a2af9f09e98269a2245770", "bytes": 10447}, + "silver-pinewood-residences": {"name": "Silver Pinewood Residences", "category": "Architecture & Interiors", "description": "Silver Pinewood Residences (silver-pinewood.com), a premium residential complex site: warm beige #f0eae2 canvas, charcoal #282828 sections and ink, #ba8f71 and #998170 beige accents, TTFors 500 set entirely in uppercase with tight negative tracking (44px headline at -1.76px, 76px at -4.56px).", "sha256": "8c5793b9af625986b5d8cce77d46e96023650f31a7f259f3bd92a1124efe801f", "bytes": 9971}, + "simonholm-studio": {"name": "Simon Holm Larsen - Brand Designer (simonholm.studio)", "category": "Portfolio", "description": "Portfolio of brand designer Simon Holm Larsen: near-black #1a1a1a canvas, white #ffffff type, #a3a3a3 gray labels, a PP Neue Montreal style grotesk (Ppneuemontrealtt) at 128.592px for project titles with -4.167px tracking and 10.716px micro-labels, full-bleed project imagery.", "sha256": "1ee714b8ac9478b9588e83869e4997d7582adcb6852c4a5180107c48d5e64811", "bytes": 9439}, + "simple": {"name": "Simple", "category": "Modern & Minimal", "description": "Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.", "sha256": "20f4214be65d854fb71da9fabcb5256d3bbc8a1a4de8e4a32b7a03e70a450af7", "bytes": 3055}, + "simple-analytics": {"name": "Simple Analytics", "category": "Product & SaaS", "description": "Simple Analytics' site: a #fcfcfc canvas with teal-grey inks (#2a373a headings, #425659 body), Space Grotesk at 36px/700 for headlines and 16px/24px for copy, coral-red #ff4f64 pill CTAs with a tinted glow that darken to #de3243, 16–24px-radius white cards with #d0e1e3 borders, and hand-drawn line charts as section dividers.", "sha256": "4d698367052423ef2f8c6162536f378f4626c989b1e980ee8f493e5c7e5b2eb5", "bytes": 15775}, + "sing-sian-yer-pao-daily-news": {"name": "Sing Sian Yer Pao Daily News (星暹日报)", "category": "Thai Brands", "description": "Chinese-language Thai newspaper portal (singsiandailynews.com): white canvas #ffffff, text #333333 and #666666 in Microsoft YaHei at 16px, a newspaper red #cd131c for section accents and rules, 5px and 10px radii, and a dense headline-list layout with a 10px-radius search input.", "sha256": "7fa0af0ec0467c6d9624adf42c4b9d7c0682cbce0475564f1c9d340ff110b3cc", "bytes": 9803}, + "singapore-airlines": {"name": "Singapore Airlines", "category": "Airlines", "description": "Singapore Airlines' web system as measured on singaporeair.com — a deep navy primary \"#00266b\" (header gradient, SEARCH button, section headings) over a pale \"#fafafa\" canvas, gold \"#f99f1c\" hover accents in the header, and electric blue \"#0254ec\" links. Headlines are set in Arthur Baker's Sigvar Serial (served as sigvar / sigvar_serial-regular) at 26–32px, UI and body text in Mark Simonson's proxima-nova at 11–18px. Buttons are near-square (2px radius), 11px/600 uppercase with 1.5px tracking; destination cards are 4px-radius photo tiles with a soft 2px 4px 4px shadow that blooms on hover.", "sha256": "89891bdc540224aa63da4015d79cecffd7a2ba5e0f8c2a9ed7eeb368ec615935", "bytes": 24605}, + "singapore-gov": {"name": "Singapore Government (gov.sg)", "category": "Design Systems", "description": "The gov.sg portal pairs a single typeface, Inter at weights 400 to 600 with tight negative tracking on display sizes, with a flat Singapore red (#c30000) for its hero band and filled \"Find out more\" buttons, white and #f3f4f6 content bands, and a near-black #18181b footer. Buttons have 4px corners, cards 8px, and the page is photographic and editorial rather than form-driven.", "sha256": "50863edc1ba44e205c11e66858a165af2d687164325ca3c38b7ac025c257652b", "bytes": 15123}, + "singer-thailand": {"name": "Singer Thailand", "category": "Thai Brands", "description": "Thai appliance and phone e-commerce storefront set entirely in PSL Kanda: white #ffffff canvas, crimson #e50040 header strip and footer, #dd191d red nav tab with #ffeb3b yellow text, #282828 body ink, square 0px buttons, #e5e5e5 hairlines.", "sha256": "ab5d69f178b7d4b2b4be82b02dd349f9120e26f7656320abac9e6b431bb3674c", "bytes": 10611}, + "singha-estate": {"name": "Singha Estate", "category": "Thai Brands", "description": "Singha Estate (สิงห์ เอสเตท) corporate real-estate site: deep navy canvas #0f1f2e with a #153050 footer, white text, antique gold #be9a62 accent, the proprietary SinghaEstate typeface at 16px body and 30px uppercase headings with 0.5px tracking, and tiny 3px and 5px radii.", "sha256": "32223ef0914d02efff58e6dfeac771dd81e8999199c50afd94e6937a51b9558c", "bytes": 9678}, + "singtel": {"name": "Singtel", "category": "Telecom", "description": "Singtel's consumer telecom storefront for Singapore: white canvas (#ffffff) with ink #231f20, a single red action color #ed1a3d on pill-ish 20px buttons, Lato Regular/Bold set at 16px body and 48px section headings, pastel service tiles and a black device-showcase band.", "sha256": "99140694b6e20edac87dcd52cbda647107069b4c4f8ef36137c4e0860a7c04f0", "bytes": 10120}, + "sipgate": {"name": "sipgate", "category": "Design Systems", "description": "sipgate.de, the German cloud-telephony and AI-agent platform: PX Grotesk bold at 80px mixed with Tiempos Light serif in headlines, near-black #121212 pill buttons that flip to electric lime #deff00 on hover, white and #f8f8f8 canvas, soft cornflower #edf2ff and mint #ebf5eb section tints, and 24px-radius cards.", "sha256": "c1734d1c13f6aec7df59c802dc9b03b0c4923c1da12a994ae8195e992b753060", "bytes": 14201}, + "siripinyo-reit": {"name": "SIRIPINYO BUILDING", "category": "Thai Brands", "description": "Leasing site for the 17-storey Siripinyo office building near BTS Phaya Thai, set in Sofia Sans Condensed (62px display, 22px light body) on a deep blue #144b83 canvas with brighter #0055ac header, white ink, 20px-radius buttons and 10-30px rounded blocks.", "sha256": "b9cfe9d83bc83114a5f6c2da2a68a056b7b406a3a15b8f270967a7997c423e5a", "bytes": 11018}, + "six-senses": {"name": "Six Senses", "category": "Travel & Hospitality", "description": "Six Senses (sixsenses.com): a calm wellness-resort site in plum and parchment. Canto Roman 400 serif headlines at 50.4px with negative tracking, Avenir Next 14px/22.4px grey #666666 body, Avenir Next Condensed 500 uppercase labels, a #4d1443 plum 46px-radius Search pill, white pages and #f8f8f2 bands.", "sha256": "3b6d306ead31f33fe53aabb61db88b560d3f6c4e67a1e6f77928ae827847ea44", "bytes": 13673}, + "sizzler-thailand": {"name": "Sizzler Thailand", "category": "Thai Brands", "description": "Sizzler Thailand (ซิซซ์เล่อร์), the Minor Food Group steakhouse site: deep forest-green canvas #124f31 with #05351d and #064d2c bands, cream #feeed6 nav text, signal red #ec1425, the db_ozone Thai/Latin face at 16px body and 64.6px section titles, and a food-photo-led promo layout.", "sha256": "657b88ece393222876a047f9e0b4d2d810a10e5f10cfc5b3f4349cde64f11344", "bytes": 10426}, + "sk-telecom": {"name": "SK Telecom", "category": "Telecom", "description": "SK Telecom (SK텔레콤) corporate home: white canvas #ffffff with a #f6fafd tint, ink #1a2232, indigo #3a46cd accent, SKT Sans Text/Display with a 110px weight-800 display, 16px rounded tiles and a 100px pill outline button for the newsroom link.", "sha256": "d089dc0dfbfdb6bde1ae9181e1a87ded87cbd38b2fd831b9231f7a1a6f892d41", "bytes": 10633}, + "sketch": {"name": "Sketch", "category": "Design & Creative Tools", "description": "Sketch's home page pairs Reckless serif headlines (76px/500, -1.5px tracking) with InterVariable body copy (20px/500 in #5c5c5c) on a light grey #f5f5f5 and white canvas, near-black #151515 pill-like buttons with 24px radius and a carved inset shadow, 20px-radius feature cards in white and black, and soft pink-lilac gradient washes.", "sha256": "63961702522f76e280f11668af33a6b64ff9558c59aac3cc8176f8a307b5efa4", "bytes": 14274}, + "skeumorphism": {"name": "Skeumorphism", "category": "Morphism & Effects", "description": "Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.", "sha256": "258614e400520f95a4c1d722ad5633c4a2a10be52de8e326e68837260aabd3ff", "bytes": 3075}, + "skillshare": {"name": "Skillshare", "category": "Education", "description": "Skillshare's creative-learning marketing system, set entirely in Grilli Type's proprietary GT Walsheim Pro (served as \"GT Walsheim Pro\") at 700 for headlines and 400 for body text. Black (#000000) text on a white (#ffffff) hero and card surface, set between full-bleed black (#000000) canvas bands with white (#ffffff) body ink that cover most of the page. The only filled action is a mint-green #55da9b button with a 4px radius and black label (hover #50cf93). Accents are a #5620c1 violet text link, a #24c2f2 cyan active tab pill (100px radius) and #dcdee1 hairlines. Class cards use an 8px radius with a soft 0 2px 4px shadow, and the browse header and footer sit on near-black #0b1215.", "sha256": "b1a4ddf814e041f404f6663330deb0360b13c256e87e2ca803fab150050067df", "bytes": 34183}, + "skooldio": {"name": "Skooldio", "category": "Thai Brands", "description": "Skooldio (สคูลดิโอ) Thai upskilling platform: black hero and white course sections, signal amber #faa91a with white labels on 100px pill buttons, Rubik with IBM Plex Sans Thai at 16px body and a 60px weight-500 hero, 16px-radius gradient course cards and soft navy-tinted shadows.", "sha256": "b638c90658d8ab7c7d886e79eb58a8b7c0ad2292c19b371d0aca2b52c3a2ed6b", "bytes": 12931}, + "slack": {"name": "Slack", "category": "Productivity & SaaS", "description": "Slack's homepage pairs a white canvas and black Salesforce-Avant-Garde headlines (64px, weight 700) with a deep aubergine #481a54 band and a #730394 purple CTA: square 4px-radius, uppercase 14px/700 buttons that darken to #481a54 on hover, plus 16px-rounded product windows lifted by a soft 32px black-10% shadow.", "sha256": "3eea9348b1c6ab8d211d4f68d1aee4fd198557a6fcfc1b4501a6c285e3ea8e41", "bytes": 13823}, + "sleek": {"name": "Sleek", "category": "Modern & Minimal", "description": "Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.", "sha256": "cf29cb7c9e679f02c2311a664d95cffd64009b858b363fdd19b492ad1a98649f", "bytes": 3071}, + "slush": {"name": "Slush", "category": "Tech & AI", "description": "Slush (slush.app), the Sui crypto wallet: white and sky-blue #dceeff rounded containers on a black frame, black Aeonik Pro text at 56.9px display and 21.3px body with negative tracking, Lateral weight-800 poster headlines, flat sticker colors (#ffd731, #55db9c, #5c4ade, #fb4903) and 1px black outlined pill buttons.", "sha256": "692e5d80bdc5137ba10c9813769586f118b9e47c7a4bfb093374ae3c6478b7d3", "bytes": 11442}, + "smallroom": {"name": "Smallroom", "category": "Thai Brands", "description": "Smallroom (สมอลล์รูม), the Bangkok pop-music label site: light grey canvas #f2f3f4, ink #212529 and black, Helvethaica Thai-Latin type at 24px light body with 40px and 64px weight-900 uppercase titles, 24px-radius image tiles with soft 8px 16px shadows and a hand-drawn dog mascot logo.", "sha256": "10d91520c59c28d93aa2f22aa9e373ae18354aaf1759175b0a651f1a90a0fc17", "bytes": 9568}, + "smarthr": {"name": "SmartHR", "category": "Design Systems", "description": "SmartHR corporate site (smarthr.co.jp): white pages with near-black ink #1d1c1b and SmartHR Green #00c4cc, a giant Heebo weight-100 wordmark line at 113px, YakuHanJP/Noto Sans JP text with wide tracking, black arrow buttons, 1px black rules and ribbon-like turquoise imagery.", "sha256": "c2ab36e4528db69c7f8c5636fc47e245f769b29cc746cbd9b572be70a57db7c2", "bytes": 9746}, + "smeg": {"name": "Smeg", "category": "Home & Furniture", "description": "Smeg international home page (smeg.com), measured — near-black #020202 page with white #ffffff text and a white product section, Raleway 26.4px/400 headlines with 0.32px tracking, Mulish 10px/300 body, 8px/700 uppercase tracked text links with a rule, warm gold #baa483 accent text, 10px radius only.", "sha256": "fd598cbccdcd645cc90c0953ac384146e72fcc8421c07c0450fc4a9faa3d2fe2", "bytes": 11170}, + "smooothy": {"name": "Smooothy", "category": "Tech & AI", "description": "Smooothy (smooothy.federic.ooo), the open-source smooth slider library page: pure black canvas #000000 with white #ffffff text in Geist at 41.6px headings with -3.328px tracking and 14px semibold links, no rounded corners at all, no color accents, and hand-drawn white line icons beside large bubble lettering and 3D food slides.", "sha256": "76364ec1d5bde3ed41814dc6d1e394ac97324a48bb5e7f5593d2781eded086dd", "bytes": 8812}, + "snap": {"name": "Snap Inc.", "category": "Media & Consumer Tech", "description": "Snap Inc.'s corporate home (snap.com) is a near-monochrome editorial page: white (#ffffff) canvas, black (#000000) Inter 44px/400 mission statement, #757575 uppercase nav, three product tiles and a 25px-radius black-outlined language pill; Snap Yellow #fffc00 lives in the shipped CSS and in product imagery.", "sha256": "3de92784ac363a5e1920a8e19a2be8a7b5824e70f979f58cd0d7a30b22f7b00e", "bytes": 11443}, + "snickers": {"name": "Snickers", "category": "Food & Beverage", "description": "SNICKERS official site: white canvas #ffffff alternating with chocolate-brown #3c1400 bands, indigo #21008c pill buttons (30px radius, 61px high), campaign display type at 64px with 0.7px tracking, Drupal-hosted primary, secondary and headline typefaces, and product-photography-led sections.", "sha256": "80e7838ef8e62dc816145a87ca41298dd0db3c5bef65fa9950d80a4d8b2b9ab9", "bytes": 10979}, + "snowflake": {"name": "Snowflake", "category": "AI", "description": "Snowflake AI Data Cloud site: white canvas with pale blue and #f6f9fa surfaces, Snowflake blue #249edc pill buttons (45px radius, white uppercase Texta labels), Texta weight-900 uppercase display up to 120px, Lato 16px body, a #042130 navy footer and layered cool-grey shadows.", "sha256": "d4dbe4f68814b1ffcc3bf960b22b15e1228d1ebc7f61f6597f3ae3eedc9d5fc9", "bytes": 11099}, + "softbank": {"name": "SoftBank", "category": "Telecom", "description": "SoftBank Corp. global English home (softbank.jp/en): white canvas with #ecf0f4 news band, text #424242 in Helvetica at 16px, bright blue #357eec pill button (50px radius, 60px high) and a #3b87fb service nav band, 30px-radius tilted card carousel and photo news tiles.", "sha256": "067bdc69a27f49ecc5a65a96792bcda438514f56e69b81bbf89f5ca82589b1c4", "bytes": 9150}, + "sohub": {"name": "SOHub", "category": "Portfolio", "description": "SOHub is a digital agency site that sets Inter at 56px/600 with tight negative tracking on a cool off-white canvas (#f0f6f8), with near-black ink (#0c1016), pill-shaped uppercase buttons (9999px radius, 58px tall), 24px rounded project cards and a Tailwind plus HeroUI CSS stack.", "sha256": "2399b8e6d96443fa6cfbd6802811f1fba82b0cca14e9d87e9c42c11258c17b7c", "bytes": 11635}, + "soil": {"name": "SOIL", "category": "Culture & Events", "description": "SOIL is a Japanese performing-arts showcase site in black (#1c1d1e) on white (#ffffff): giant SeasonMix serif display caps at 48px/600 with -1.92px tracking, Akzidenz-Grotesk Next body at 17.7664px, thick dashed and solid rule lines, square 2 to 4px corners and no buttons.", "sha256": "03efd4f131ebe65666500e4588703677705bc858c2f23429faf17839bf024c8f", "bytes": 10414}, + "solartron": {"name": "Solartron", "category": "Thai Brands", "description": "Solartron (บริษัท โซลาร์ตรอน จำกัด (มหาชน)) language-gate landing page at solartron.co.th, measured as a full-bleed rooftop solar photograph with a light-weight Trirong serif headline (24px, weight 300) in #eeeeee, outlined 3px-radius enter buttons, and a #333333 footer.", "sha256": "32c4958c427f8a53201d8f9726998e2ccdfa0d9c8ce042f940eed461dc4ecf81", "bytes": 9458}, + "solidjs": {"name": "SolidJS", "category": "Frontend Frameworks", "description": "SolidJS (solidjs.com) pairs a white #ffffff canvas with a blue gradient hero built from the repo's own solid palette — light #4f88c6, medium #446b9e, default #2c4f7c, dark #07254A — set in Gordita (36px/600 hero headline, 16px/28px body), with 8px-radius 48px-tall blue buttons that hover to #414042 and 24px-radius light-grey #f3f5f7 panels.", "sha256": "ee157662d8b2e99ca2102f77acd2ff0febe35d9e98430b2d83fee5d7425e787b", "bytes": 13210}, + "solk": {"name": "SOLK", "category": "Fashion & Apparel", "description": "SOLK is a Swiss biocircular footwear shop that stays almost colorless: white canvas (#ffffff), black ink (#000000), SuisseIntl Regular at 14 to 20px with SuisseWorks serif accents, square 0px corners, 1px black outlined buttons and large editorial photography of shoes and people.", "sha256": "0592580122b1fb9b2fe475f6757ec13e0b03cd99ea5576c7a6a2bbe7a00a6f46", "bytes": 10622}, + "som": {"name": "SŌM", "category": "Food & Beverage", "description": "SOM (SŌM) is a Belgian functional-elixir brand whose site sets ABC Diatype and ABC Diatype Mono on white (#ffffff) and near-black (#0e0f11), with an orange-red accent (#ff3a1f), 4px-radius uppercase mono buttons, frosted translucent cards over blurred dark photography and a 14px mono UI scale.", "sha256": "eb58f9bcdeaacf74ce7b3e79ddeff718bf9e4a55e6992e8e4c9098db44a72d77", "bytes": 10824}, + "somboon-advance-technology": {"name": "Somboon Advance Technology (SAT)", "category": "Thai Brands", "description": "Somboon Advance Technology (SAT) is a Thai automotive and agricultural parts maker listed on the stock exchange; its measured home page is a corporate site in Roboto Condensed with a navy primary (#102241), white canvas (#ffffff), uppercase 14px square buttons with a hard 5px offset shadow and a stock ticker in the header.", "sha256": "dc1981ac10ad8bd450b5327f4a0096c7dbdbc524deaa967cbe1b996a520b14ac", "bytes": 10421}, + "somefolk-r": {"name": "Somefolk®", "category": "Fashion & Apparel", "description": "Somefolk® (SF.CO) is a London design-and-Webflow portfolio: Helvetica Now Display and Swizzy Mono in uppercase on a cinematic black-navy 3D hero, a huge \"SF'26\" wordmark, a cream (#f6f6eb) closing section with charcoal (#343434) text, 1.42px corners and tiny 9.96px mono labels.", "sha256": "1a80714b2b6dbedea47d2a86751ec59f05a8895f4761a03f8b0fb690e5d03402", "bytes": 10461}, + "son-daven": {"name": "Son Daven", "category": "Food & Beverage", "description": "Son Daven is a Ukrainian investment hotel project whose site uses a sand canvas (#a89474) with dark brown ink (#2c2824), KTF Metro Roman serif display in uppercase with -0.064em tracking, tiny 8.89px KTF Metro Blueline uppercase labels, square buttons and circular outlined call-outs over architectural renders.", "sha256": "61d3462e7914661f1b562430e37270296ba0a163277c1ae4492e1c21293ec086", "bytes": 11106}, + "sonos": {"name": "Sonos", "category": "Music & Audio", "description": "Sonos sets everything in aktiv-grotesk (Aktiv Grotesk) at 400 and 500 on a white #ffffff canvas with black #000000 ink, cinematic full-bleed lifestyle video, charcoal #2e2e2e promo bands and footer, light #f4f4f4 product panels, and 80px-radius pill buttons — filled black \"Add to cart\", black-outlined white \"Shop new arrivals\", light #f4f4f4 \"Subscribe\".", "sha256": "3084369fd4004ee15a13cd352506b0597c80dce41c72772d24c6a97fb873bb68", "bytes": 25985}, + "sony": {"name": "Sony", "category": "Consumer Electronics", "description": "Sony Electronics' US store (electronics.sony.com): a white #ffffff canvas framed by a pure #000000 header and footer, set in Sony's proprietary SST typeface by Monotype (served as SST, SST-Roman, SST-Heavy, SSTPro-Roman, SSTPro-Medium, SSTPro-Bold), SST-Heavy 40.0588px/43.0327px section headlines, #2f353d body copy, square 0px buttons — #2d75c7 outlined 'Shop now' CTAs and an amber #b65e0c 'Add to Cart' — a #2d74c7 promo strip, 4px inputs, 5px product tiles and 30px soft-shadow benefit cards.", "sha256": "072587c402d0234dc0fa3d5fd96cc385a018486cd010097ce51a64d8080abc4f", "bytes": 32339}, + "sothebys-realty": {"name": "Sotheby's International Realty", "category": "Real Estate & PropTech", "description": "Sotheby's International Realty's website is a luxury-property system in deep navy #002349 with a gold #c29b40 hairline accent, white pages, and a three-serif type stack: FreightBigBook for the 46px hero headline, MercuryDisplay-Roman for 28px section titles, and BentonSans-Book at 16px for body, with small 4px-radius outlined buttons.", "sha256": "c7a5f78e24ec2fe6942669ec251b4be1d211d536f8396b459dc584d843e5eb90", "bytes": 16671}, + "soulcycle": {"name": "SoulCycle", "category": "Sports & Fitness", "description": "SoulCycle's site pairs Helvetica Neue LT Std (Roman, Medium, Bold files) with SoulCycle yellow (#ffde00) on black (#000000) and white (#ffffff), 54px/64px display with -1px tracking, 14px bold buttons with square or 5px corners, and dark #111111 article cards under yellow tracked eyebrow labels.", "sha256": "2c2dbda18e7eab3d31596526fdfa9dd290828fd95b306be051c1e75c224ca34c", "bytes": 10823}, + "soundcloud": {"name": "SoundCloud", "category": "Music & Audio", "description": "SoundCloud (soundcloud.com): a near-black #121212 canvas with #ffffff text and #999999 secondary text, set entirely in Klim's Söhne. The landing page shouts in 65px/800 uppercase Söhne headlines and uses white #ffffff pill CTAs (9999px, 46px tall) with #121212 labels; the app uses 4px-radius 32px buttons on #303030. SoundCloud Orange #ff5500 is the brand accent; links are #699fff on dark, focus rings 2px #044dd2.", "sha256": "e913f3bd357f6f56273245b4475e741241201ae8b860bc86b4506ee0dabb14bc", "bytes": 22788}, + "south-china-morning-post": {"name": "South China Morning Post", "category": "News & Publishing", "description": "South China Morning Post's home page is a dense news front built on Source Serif 4 600 headlines at 23px/27.6px with -0.575px tracking, Roboto and Roboto Condensed UI text, a navy action color (#2c4692) on white (#ffffff), hairline #dfdfdf rules and 2px-radius uppercase buttons.", "sha256": "5d1522da339fec7216254157924a848214ee48bb358d1316df183d3154225d77", "bytes": 10900}, + "southwest-airlines": {"name": "Southwest Airlines", "category": "Airlines", "description": "Southwest Airlines' booking site uses Southwest Sans in bold 35.2px/52.8px headlines, a Southwest blue (#304cb2) and deep navy (#111b40), the signature yellow (#ffbf27) for every primary button, 2px-radius controls, light grey (#f4f4f4) page ground with white cards and a soft 0 5px 5px shadow.", "sha256": "9262001036b0e0c23189782b6561187abc33407b000734ad8bb6c4bfc8de8170", "bytes": 10890}, + "sowieso-wero": {"name": "Sowieso Wero", "category": "Retail & E-commerce", "description": "Sowieso Wero is the merchant-facing Wero landing page for the iDEAL-to-Wero transition: GT Walsheim Wero at 139.935px/800 on a butter-yellow canvas (#fff48d), near-black ink (#1d1c1c), white pill buttons with hard 0 6px 0 offset shadows, 1px ink outlines, tilted cards and pink-orange-purple gradients.", "sha256": "8722d19d4dcfe034fb9e23a73c8a92204363bad8b73b7027a51de2e8fdb6cfae", "bytes": 11533}, + "spacex": {"name": "SpaceX", "category": "Media & Consumer Tech", "description": "SpaceX's homepage is a pure #000000 stage for full-bleed photography, with uppercase D-DIN-Bold headlines at 60px/54px (-1px tracking), 16px D-DIN body in #f0f0fa, and ghost buttons: 50px tall, 4px radius, a 50% black fill and a 1px #f0f0fa59 outline that fills solid #f0f0fa on hover.", "sha256": "79c40043f10a31a543fd300f2605ac3c03683ef5be19c8f59df47623e3c56c56", "bytes": 10985}, + "spacious": {"name": "Spacious", "category": "Layout & Structure", "description": "Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.", "sha256": "6dc6e07b5890d214c171cc74c8a7491f3e26ab1294921fac0b089b29229f93a0", "bytes": 3052}, + "sparebank1": {"name": "SpareBank 1", "category": "Design Systems", "description": "SpareBank 1 is a Norwegian banking alliance whose site pairs a white canvas and near-black ink (#020a0a) with deep navy \"fjell\" (#002776), water blue (#005aa4) and a forest-green pill CTA (#00754e), set in the proprietary SpareBank1-regular, SpareBank1-medium and SpareBank1-title-medium typefaces with Arial fallbacks. Buttons are fully rounded pills, cards carry a 16px radius, and flat editorial illustration sits beside warm documentary photography.", "sha256": "4d625812fb78767830f09300a49400b44bc37b14b255adeb412b453fb7f58327", "bytes": 15119}, + "spcg": {"name": "SPCG", "category": "Thai Brands", "description": "Investor and corporate site of SPCG Public Company Limited, a Thai solar-power developer, set in Gotham (Book, Medium, Bold) with Prompt fallbacks, 38px uppercase display headings, navy #222d68 and red-orange #ff4c15 accents on white, 10px-radius photo cards and light grey #ebebeb bands.", "sha256": "09388279dddff1025b544c87a3f0fdccc7125f6d814da9e2b4e3ea08b2e66122", "bytes": 9437}, + "specialized": {"name": "Specialized", "category": "Sports & Fitness", "description": "Specialized's retail site uses DINPro bold 48px/60px headlines with -1px tracking on white (#ffffff) and charcoal ink (#252525), grey-white (#f8f8f8) 4px-radius buttons, 8px to 10px rounded product and campaign cards, a metal grey ramp and black footer with Specialized red (#da291c) in the stylesheet.", "sha256": "b5ccc9d40850b424f8b6841bb667110811756d847f277e93ad1203e3e8cdfa72", "bytes": 11541}, + "spectrum-design": {"name": "Adobe Spectrum", "category": "Design Systems", "description": "Adobe's Spectrum design-system site is a calm #f7f7f7 canvas with white cards, Adobe Clean type (64px/500 display, 16px/400 body in #717171), near-black #131313 pill buttons (48px at 24px radius, 32px at 16px radius) and a single blue, #3b63fb with hover #274dea, reserved for announcements.", "sha256": "00b951cc11b403b0fd97b5c287a8ccdaead34f62e7d4c1c8169fb65974d3377f", "bytes": 16050}, + "splice": {"name": "Splice", "category": "Music & Audio", "description": "Splice (splice.com): a near-black #121214 UI over full-bleed video and #000000 sections, with Söhne Breit (served as SoehneBreit, 400) for wide display headlines — 48px/60px hero, 36px section titles — and InterVariable for UI (16px/24px body). Primary actions are cobalt #1253ff pills (64px radius, 13.504px 32px, hover #0033ff); nav links are #a6a8ad turning white; links #528fff; accents come from a five-color tile palette (#f4d04e, #7cf727, #ff8aa6, #62daff, #b874ff).", "sha256": "15144e95609560152b08e5fc760faef4b5b9b241a4b1ab5725fd7f5a65026c57", "bytes": 20564}, + "spline": {"name": "Spline", "category": "Design & Creative Tools", "description": "Spline's home page is a pure-black #000000 product page set in Geist: 64px/450 headlines with tight -3.84px tracking in 90% white, #8a8a8a body copy at 18px/28px, light #eeeeee pill buttons with black labels that brighten to #ffffff on hover, ghost pills with #2e2e2e borders, translucent filter chips and #101010 cards with 16px corners framing the 3D editor.", "sha256": "52f9cc1ccadd35cc90f6a40116c9319ed30c86ad3cf26323bd2868fa3c4937fb", "bytes": 14639}, + "splunk": {"name": "Splunk", "category": "Design Systems", "description": "Splunk's homepage is a near-black stage (#000000 canvas, #ffffff text) in Inter 400-800, with an orange-to-magenta gradient on key headings, a magenta primary (#ce0070) on 24px-radius pill buttons 44px high, a white pill nav bar, and translucent white-10% cards with 24px corners over dark video and product imagery.", "sha256": "786a6b52a3bc54707fb6d9455fd97f3654f1be750f81cedd3d1a22db22e55158", "bytes": 12624}, + "spotify": {"name": "Spotify", "category": "Media & Consumer Tech", "description": "The Spotify web player home view is a dark, panelled app: #000000 frame, #121212 panels with 8px corners, white and #b3b3b3 text in SpotifyMixUI/SpotifyMixUITitle (24px bold section titles, 16px body), white pill buttons, and a Spotify Green (#1ed760) bright accent, with circular artist art and 6px-rounded album covers.", "sha256": "c9abd2f0aa16b603df7512b669d63933393b7d68e166d3157ca4860e9649a29a", "bytes": 14812}, + "spring-news": {"name": "Spring News", "category": "Thai Brands", "description": "Spring News (springnews.co.th), the Thai digital-news site of Nation Group: Prompt typeface at 14-32px with 0.2px tracking, a full-bleed #ffff00 yellow header and footer on a #ffffff canvas, near-black #000000f2 text, square corners and no button fills.", "sha256": "0e6f6472dbe96c21cc6bfd6301c53c1326c2e7e49725c4f6e9927b877a048220", "bytes": 11135}, + "springs": {"name": "Springs", "category": "Architecture & Interiors", "description": "Springs (springs.estate), a premium residential development site: Victor Serif display at 100px/120px with -2px tracking, TT Commons Pro 20px body and 10px uppercase nav, deep green #162d24 canvas, beige #e0d1b6 ink and a #f5e8d1 cream page body.", "sha256": "8a1ee37b1e38c65cce8d7d128cf1ae5c5d3b91c3fdec162fc2eff86e8b69e936", "bytes": 10835}, + "sproutsocial": {"name": "Sprout Social", "category": "Design Systems", "description": "Sprout Social's marketing site pairs a near-black #040404 canvas with white rounded content panels, Proxima Nova at 800 weight for 57px headlines, a Fern green #98e58e call to action with a Cactus #59cb59 hover, 6px button radii and 16px card radii, all built on the Seeds design system.", "sha256": "da2a5e064c3eb8246483b3d779e089db12cae9683e2511a36243ed856c19ddb6", "bytes": 16603}, + "square": {"name": "Square", "category": "Product & SaaS", "description": "Square (squareup.com/us/en), the payments and point-of-sale platform from Block, Inc.: Exact Block serif display at 81px with -2.916px tracking, Cash Sans 14px body, Square Sans Text 16px navigation, #006aff blue actions, black footer and #f7f6f5 product tiles.", "sha256": "bde3ff30218629437c4ee2430921e4aef7f386ea452001aff238a0ceb35a3278", "bytes": 11573}, + "square-enix": {"name": "Square Enix", "category": "Gaming", "description": "Square Enix games portal (square-enix-games.com/en_EU/home): light grey #f0f0f0 page of three-column article cards, generic sans-serif at 16px body and 28px/700 headlines, white READ MORE buttons with #c80000 red bold uppercase text, near-black header and square corners.", "sha256": "41f21fa376e11be2ff4380561d2a235e0fbae28fa00538912b61d1ed8c6fe03c", "bytes": 9591}, + "squarespace": {"name": "Squarespace", "category": "Product & SaaS", "description": "Squarespace's home page is a near-monochrome, photography-led page on black #000000 with white sections: Clarkson sans throughout (60px/300 display at -3.6px tracking, 15px/21px body), Clarkson Serif for 26px card titles, square-ish white 'GET STARTED →' buttons with 4px radius and uppercase 14px/500 labels that hover to #dddddd, and #2f2f2f product cards with 8px corners.", "sha256": "e6e2d4c6f10566c52dabaee1219291a283076cf28a168fde7ebcd91f11dd0ed2", "bytes": 13605}, + "squarespace-foundations": {"name": "Squarespace Foundations", "category": "Agencies & Studios", "description": "Squarespace Foundations (brand.squarespace.com), the brand-guidelines microsite for Squarespace: Clarkson at 71.11px with -2.84px tracking and 21.33px body, a #111111 dark theme with white text, a white logo slide, no radii, no shadows and no buttons.", "sha256": "3ac2be2018c0bb4ea6de60c7b7437eeff29c0f4b5e2a326fb87ea8c4dfa5a610", "bytes": 9166}, + "squid-brand": {"name": "Squid Brand", "category": "Thai Brands", "description": "Squid Brand (น้ำปลาตราปลาหมึก), Thai fish sauce: full-bleed food photography heroes, flat leaf-green #76bc21 square buttons, deep indigo #313283 headlines, a light #f5f5f5 values panel, the Line typeface and a #242729 footer.", "sha256": "94de5051ffeb596369e4859bb799101c00a67ea0406e4ac413d1f180f163e6cb", "bytes": 10536}, + "sri-panwa": {"name": "Sri Panwa", "category": "Thai Brands", "description": "Sri Panwa Phuket (sripanwa.com), a luxury pool-villa hotel and private-residence site: CoreRhino 13px body with 15.6px and 26px uppercase orange #ed591b headings, Gotham Medium 12px navigation, a #1c1c1c header, black panels over full-bleed photography and square corners.", "sha256": "e7ce313f7fb07da33a37e3ec8f944ea1b1f23eccc438c465b2484488c4a2a4f3", "bytes": 10276}, + "srt-electrified-train-airport-rail-link": {"name": "SRT Electrified Train Co., Ltd. (SRTET)", "category": "Thai Brands", "description": "SRTET (srtet.co.th), operator site for the SRT Red Line commuter trains and the Airport Rail Link: psl_kittithada Thai type at 21.6px body and 36px/700 titles, a #bc1320 red nav bar and accents on a white canvas, a station-line route map, #333333 ink and mostly square corners.", "sha256": "467b00c06717784006cc5c4670b3064690e33f9038fadb6294237ee13c261f15", "bytes": 9806}, + "ssense": {"name": "SSENSE", "category": "Retail & E-commerce", "description": "SSENSE (ssense.com/en-us), the luxury-fashion retailer's editorial-led home page: Favorit SSENSE Inter uppercase headlines at 49.875px with -2px tracking, JHA Times Now serif body at 20px light, #333333 ink on white, 10px outlined pill buttons with a #979797 hairline and 11px uppercase navigation.", "sha256": "6b730b75e0713229b82151249313a5fdf8f31df4099c055e87661e1e38b89a61", "bytes": 9858}, + "sstr-friction-reduction": {"name": "SSTR Friction Reduction Systems", "category": "Tech & AI", "description": "SSTR (sstr.tech/en), a drilling-engineering company's site: ABC Monument Grotesk uppercase headlines at 42.67px with -1.49px tracking, a #18191b and #eff0f1 dark/light section rhythm, a single #e75326 orange with #0c0c0c text on 55px-tall angular buttons and a three-tier brand/alias/mapped CSS token system.", "sha256": "8b816f1b0017822a7edb1452ec72a211bc172e0a99ff88dc11f7d14cb575aed6", "bytes": 11134}, + "stability-ai": {"name": "Stability AI", "category": "AI", "description": "Stability AI (stability.ai), the generative-media company's marketing site: Archivo 18px body and 61px/700 hero headline with -0.61px tracking, Figtree 600 buttons, a #1e1e1e charcoal canvas, #a381ff violet pill buttons with 300px radius and 1px bordered 8px-radius content cards.", "sha256": "7c3aa05ade70cbbd76ad7efdd30922c9e6650d725830d92231088c7493f0d7f5", "bytes": 11007}, + "stackblitz": {"name": "StackBlitz", "category": "Developer Tools & IDEs", "description": "StackBlitz's home page is dark slate #1c1f25 with Manrope 600 headlines (94px/94px, -2px), Inter 16px/32px body in white at 80% (#ffffffcc), a #1574ef 'Try Bolt.new' button with 10px radius and inset white ring, cyan #4cedff highlights, and a pale #fbfeff testimonial band with a 6px-radius white card.", "sha256": "b3dafaf0a889e4872ba85f5895912d24593d522bf956637eaffc119db54a4854", "bytes": 13169}, + "standard-chartered-thailand": {"name": "Standard Chartered Thailand", "category": "Thai Brands", "description": "Standard Chartered Bank (Thai) country site on sc.com/th: SC Prosper Sans in Regular, Medium and Bold at 16px body and 56px display with 1px letter-spacing, brand blue #0473ea, indigo #020b43 toolbar and footer, green #38d200 accent, pill buttons with a 25px radius and 50px height.", "sha256": "f5444331eaff3762503eb4981578ab7c6129b983ba31a3efd6e74fb47b198678", "bytes": 10483}, + "stanford-university": {"name": "Stanford University", "category": "Education", "description": "Stanford University (stanford.edu), the university home page: Cardinal Red #8c1515 header on a white canvas, edict serif display at 64px/440 and Source Sans 3 body at 20px/28px, #111111 ink, red pill buttons, 12px-radius dark stat cards and 12px-rounded photographs.", "sha256": "6fb3d72396738f6f14d338bf7f205a3157aa296df4d8ccf5a3cdee555df829d4", "bytes": 11424}, + "starbucks": {"name": "Starbucks", "category": "E-commerce & Retail", "description": "Starbucks' homepage alternates full-width #006242 green promo bands with warm food and drink photography on a white canvas, set in SoDoSans (24px/600 headlines, 16px body) with fully rounded 50px pill buttons: a black 33px 'Join now', an outlined 'Sign in', and white-outlined pills on green that brighten to #00754a on hover.", "sha256": "5170350663f2e27d70ed0b573ca795270637d8115c91c5a169b22f026067f5c4", "bytes": 13408}, + "starbucks-reserve": {"name": "Starbucks Reserve", "category": "Food & Beverage", "description": "Starbucks Reserve's site starbucksreserve.com measured live — a white #ffffff gallery page with black #000000 type, a single copper-gold accent #976d3f for hovers and highlights, a warm near-black #231f20 footer, widely tracked uppercase Trade Gothic Bold Condensed headlines (102.4px hero, +12.5px tracking) over Avenir LT Std body copy at 14px with a 33.6px line height, and square photo collages.", "sha256": "98fec1d32d26b4d13cc38d0f4cc471d21ad9319d46536177fe373977711cacbd", "bytes": 14054}, + "starling": {"name": "Starling Bank", "category": "Banking & Insurance", "description": "Starling's 2025 \"Good with money\" web system — aubergine #321e37 ink and footer, electric-teal #50ffeb buttons with 4px corners (hover #29e6d1, active #24d2be), a warm #f8f5f0 page canvas with white 24px-radius cards, Avantt (variable, weights 450/550/600, negative tracking, 48px/54px hero) for text and CoFo Sans Semi-Mono 550 for every button, label and nav item.", "sha256": "3c2f18784ca6c83f0613918da5eb341cefe6b61580fe35c814928c519a81aa4b", "bytes": 27955}, + "starmark": {"name": "STARMARK", "category": "Thai Brands", "description": "STARMARK is a Thai kitchen and wardrobe furniture manufacturer whose Wix-built site is a quiet white gallery. It uses a #ffffff canvas, mid-grey #606060 body ink, near-black #242323 accents, a #282828 hairline, square corners with no rounding, and a mix of Avenir LT Light 14px body, DIN Neuzeit Grotesk 22px and a Thai display face at 35px.", "sha256": "6b9ea7308c5cb16deff622d98e1414d24ff0a2ed8193a7fbfd7a43542a6d8f62", "bytes": 9061}, + "stars-microelectronics": {"name": "Stars Microelectronics", "category": "Thai Brands", "description": "Stars Microelectronics (Thailand) PCL (starsmicro.com), an EMS, OSAT and photonics manufacturer: Gotham at 80px/500 for the hero and 20px/32px body, #00896b green from the site's own --primary-color, a blue-to-green gradient banner, white and #1e1e1e text, small 4-10px radii and a slanted white logo tab.", "sha256": "142a44f68322b891c7467dce21d79bd924491d5b9960a181a706b5f8e8c39b35", "bytes": 9824}, + "steam": {"name": "Steam", "category": "Gaming", "description": "Valve's Steam store (store.steampowered.com): a dark slate UI — #0f1924 homepage body, #1b2838 product pages, #171d25 global header — set in Motiva Sans with #c6d4df soft text and #66c0f4/#67c1f5 links. Actions are Steam blue #1a9fff (current nav item, search submit) and the green Add to Cart gradient (#75b022 to #588a1b, 2px radius, 15px/30px label); discounts are lime #a1cd44 or #4c6b22/#beee11 blocks. Corners are tiny (1–4px), density is high, 12px is the dominant text size.", "sha256": "1988a881e6d268407f5e8c9880b9cb253e9604f3b925f7204b46c95e6f372ced", "bytes": 23760}, + "stefan-vitasovic-portfolio25": {"name": "Stefan Vitasović | Creative Developer", "category": "Business & Corporate", "description": "Single-screen portfolio of a creative developer in Stockholm: warm paper canvas #f1efeb, charcoal ink #252526, one blue accent #066bbd, set entirely in HelveticaNowDisplay Medium and Bold with an 80px lowercase display, zero border radius and no shadows.", "sha256": "24fc6d3d2ed7fac0902c73039813cfb38c21c51dadbd43deb375102015bf9709", "bytes": 9394}, + "steven-com": {"name": "Steven.com", "category": "Tech & AI", "description": "Dark single-screen site for Steven.com, the creator-economy company: #121212 canvas, white #ffffff type and #a0a0a0 secondary text, Field Gothic Trimmed uppercase 48px headline with Host Grotesk 13.2px labels, 16px and pill radii, centered rotating ecosystem dial.", "sha256": "ac8cc1fb55b1f899a359a3fb98c38a1cd46c47578e34c2cbefc6c48f0d554d93", "bytes": 9415}, + "stitches": {"name": "Stitches", "category": "CSS-in-JS", "description": "Marketing site of Stitches, the CSS-in-JS library, now marked as no longer maintained. White canvas (#ffffff), near-black ink (#11181c), a pale lavender pill button (#ede9fe with #5746af text), tight negative tracking on a 59px Untitled Sans headline, dark code panels (#1a1523) and 8px radii.", "sha256": "4f0c15d1edda1cfe69727873ac7d0035c4036f96db8ccfee93c60ca35805e310", "bytes": 14836}, + "storybook": {"name": "Storybook", "category": "Developer Tools & IDEs", "description": "Storybook's storybook.js.org site: deep navy #0d1026 canvas under a pink-orange-blue aurora hero, white #ffffff Nunito Sans text (56px/700 headlines), white pill CTAs with black labels, ocean-blue #029cfd links, and the Storybook design-system palette led by coral #ff4785 and ocean #029cfd; inputs and chips use 4–6px radii.", "sha256": "f6d0caf893d6d67656a703b7d693b20df332d6cdb836f1d51c92ccf187170e4d", "bytes": 12521}, + "storytelling": {"name": "Storytelling", "category": "Creative & Artistic", "description": "Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.", "sha256": "79089b7ba5171656f2576e39425b9557afe392af4167395192527a8f338af1bc", "bytes": 3086}, + "strapi": {"name": "Strapi", "category": "Design Systems", "description": "Strapi's marketing site and Design System — a dark #030712 hero over white sections, Poppins throughout (43px semibold display, 15px body), indigo-violet #4945ff action buttons with 8px radius on the site and 4px radius, 36px tall buttons in the system-font Design System, deep-indigo ink #292875 and a lavender #f6f6ff surface.", "sha256": "5179f656c720b649f9af5fa0bf0e6b9ef093d9b51bfdb28ac9a2c8d5319e40aa", "bytes": 16961}, + "strava": {"name": "Strava", "category": "Sports & Fitness", "description": "Strava's web design language as measured on strava.com — a white canvas with a sand footer (#f9f8f5), a single signal orange (#fc5200) for every primary action, warm near-black inks (#43423f body, #21211f UI, #000000 headings), the in-house-served Boathouse sans (400/600) for UI and BoathouseExtended 600 for big marketing display (72px/60px/48px), 4px-radius rectangular buttons and a 56px pill CTA on mobile.", "sha256": "054b5cae348b362ec3b6cb94a64e81089f53e5ae28dd9e0bee69db06202d8252", "bytes": 36698}, + "stringtune": {"name": "StringTune", "category": "Tech & AI", "description": "Marketing site for StringTune, Fiddle.Digital's CSS-first, JS-light scroll-animation library: #101214 near-black canvas, #e6dfe4 warm grey display text, #ff4f36 red accent, KHTeka and KHTekaMono type, 84.17px display, glass pill buttons with 20px radius.", "sha256": "77204d565947b71c3d7a0f9c39a443a4f94aebe9d95ed6530e9e50f6e21f4961", "bytes": 11267}, + "stripe": {"name": "Stripe", "category": "Fintech & Crypto", "description": "Stripe's marketing homepage: a white canvas, deep navy ink (#061b31) with slate body text (#50617a), an indigo primary (#533afd) on 4px-radius buttons, and the variable font sohne-var set at light weight 300 with negative tracking, over soft pastel gradient product cards.", "sha256": "4afc5d00f8197e3091a2869f5244d62213660b604c5918aefca2591ef13fc4bd", "bytes": 13550}, + "studio-alphonse": {"name": "Studio Alphonse", "category": "Culture & Events", "description": "French production studio site: #e5e2d6 warm canvas, #292f33 blue-black ink, #c29230 dark yellow, #4f52be purple and #ba4f5e red accents, set in Transducer Vf variable (400 to 900) with a 44.8px uppercase hero and 6px card radius.", "sha256": "0ce7b64d83111d63c0f116d4850994b5949195133529ac0cb282e58f70c2b0c6", "bytes": 10160}, + "studio-dado": {"name": "Studio DADO", "category": "Architecture & Interiors", "description": "Hospitality interior design studio site in Coral Gables: #ffffff canvas, #000000 ink, #5d5346 warm brown footer, uppercase high-contrast serif display at 138.24px with -2.7648px tracking and a 17.0667px sans text face, every corner 0px radius, WordPress-built.", "sha256": "cbecd415084c10dea36403e3cb943886c6a60fc84d9cf6c648818b6e7c99561f", "bytes": 10116}, + "studio-freight": {"name": "Studio Freight", "category": "Agencies & Studios", "description": "Studio Freight's home page is a single warm off-white #fefdfc screen scattered with project thumbnails around a centred 'Moving Missions Forward' in Jannon (jjannon-regular) at 40.5px, with all chrome in Publico Text Mono at 14px/15.68px (+0.14px) rendered black through mix-blend-mode: difference, a 12px layout margin, 8px column gap, square 0px corners and a declared #00ff6a green and #457db6 blue.", "sha256": "a00a36899c918a8af7703fa69c8ed94c6768c4a4c6c3afab1af498b82cd198f9", "bytes": 10496}, + "studio-k95-3": {"name": "Studio K95", "category": "Portfolio", "description": "Italian graphic and brand studio from Catania: full-viewport interactive 3D gallery on electric blue #1500e1 with white #ffffff type in one variable font \"adaptive\" at 16px and 14px with 0.5px tracking, a 999px pill switch and no shadows.", "sha256": "f4f54ce383d831e11696b5b5c423e74d99d564cbc5a60885bafd6c9b5ef623fc", "bytes": 9034}, + "studio-namma": {"name": "Studio Namma", "category": "Portfolio", "description": "Creative studio site: #e4e4e4 canvas with #111111 ink, a 208px uppercase Mixtape Extra Condensed 800 hero tracked at -9.6px, Gt Pressura Mono 14.4px labels at 1.95px tracking, 4.8px to 100px radii, Webflow theme variables and a light/dark pair.", "sha256": "feb1f862935dc3dac549fcd54c363797ad1d1faf1924458caeef965b081dab93", "bytes": 9866}, + "studio-nuts-r": {"name": "StudioNuts®", "category": "Agencies & Studios", "description": "Campaign and visual studio site: white #ffffff canvas, #101010 ink, pink #c31d9f logo accent, 76.8px uppercase Acumin Pro Extra Condensed headline with -1.92px tracking, OpenSauceOne 11.52px labels, no shadows and imagery-led project strips.", "sha256": "c395477c5d3d9dca0d15544537f3d25571079cf674156f099f2d5535cc708474", "bytes": 9393}, + "studio-tyrsa": {"name": "Studio Tyrsa", "category": "Portfolio", "description": "Paris creative studio portfolio: white #ffffff canvas, #000000 ink with 30%, 40% and 10% black steps, a single Untitled Sans family at 10.9714px captions and 32.9143px headings tracked tightly, edge-to-edge project tiles and a 999px pill radius for chips.", "sha256": "ea6166275a4e95a68fec2cde60973a61b9eb741e72db98ce552ee27a2df3c8d6", "bytes": 10019}, + "studio-x": {"name": "Studio X", "category": "Architecture & Interiors", "description": "Commercial interior design studio (Hong Kong, Singapore, Macao): warm cream #f2f0e6 canvas, #1d1d1d ink, orange #ff4101 pill buttons, light-weight Serrif Compressed display at 67.4423px with Saans 15.8606px text, frosted pill dock with inset glass shadows.", "sha256": "fdbc431ad898b459e26efad1ace4e033bc291804cf073849f13acaa36e5706e0", "bytes": 9979}, + "studio375-2": {"name": "Studio375", "category": "Portfolio", "description": "Italian communications and web agency: gradient photographic hero with white text, white #ffffff body, #808080 grey labels, thin hatton serif at weight 200 for statements (64px) with neue sans 20px for navigation, 2px white outlined pill buttons with 29px radius.", "sha256": "eeb51766e33850bbd194edd36b462b1ba33a20d8ad65d83a4e6234f2397494f6", "bytes": 10190}, + "styled-components": {"name": "styled-components", "category": "CSS-in-JS", "description": "Documentation-first homepage of styled-components, the React CSS-in-JS library. Off-white canvas (#fcfcfc) over a #f5f5f5 panel, ink #14161b, a periwinkle-blue primary (#628eff) on 3px-radius buttons, Figtree 700 display at 40px, Inter body at 16px and Google Sans Code at 14px for code.", "sha256": "614f27424577fb221dcb400ce6fdfc7e965e521ee3d06335d9678cd6878cd520", "bytes": 14060}, + "stytch": {"name": "Stytch", "category": "Developer Tools & IDEs", "description": "Stytch's site alternates a warm off-white #fbfaf9 page with near-black #1d1d1d bands, sets headlines in Booton Bold (76.8px hero at -2px, 40px section titles) and buttons in Chivo Mono 13px, uses a pale-blue #b2d6de primary button and #1d1d1d dark buttons at 4px radius, and a lime #e6fd13 highlight for nav hovers and announcements.", "sha256": "50a5026750432c86da38a5c96775ac4bc3aa07eac5dc072f7a3c24e4ed0cbfa2", "bytes": 11813}, + "subaru": {"name": "Subaru of America", "category": "Automotive", "description": "Subaru of America home page measured live: a white and cool-grey (#f7f8f9) retail shell with a near-black blue hero band (#1d252c), one Subaru blue (#1971d4) action color, HelveticaNeueLTW05 Roman, Medium and Bold at 17px body, and 5px corners on buttons and vehicle tiles.", "sha256": "0f9a6cb56f3359889c76a3632d3e47aa2561557a3ef70ee0efb9e26561d9ac53", "bytes": 10126}, + "substack": {"name": "Substack", "category": "News & Publishing", "description": "Substack's logged-out home feed (substack.com): a white #ffffff reading canvas with #363737 system-ui text at 15px/21px, #777777 meta, Cahuenga 500 serif display lines (32px/39.68px on the green #2f6d5d hero), SF Pro Display 800 titles, Substack orange #ff6719 8px-radius buttons that darken to #d74d00, #eeeeee secondary buttons, 12px-radius cards with 1px #0000001a hairlines and #0083d5 mention links.", "sha256": "5cdea536249ee979b05ca8a266a1cd330c0698904a45761bcad76a9363203c6a", "bytes": 17090}, + "sui": {"name": "Sui", "category": "Architecture & Interiors", "description": "Sui blockchain home page measured live: a black hero with a blue-and-white radial light-streak image, white and #f4f5f7 content bands, TWK Everett at 80px with -5.85px tracking, TWK Everett Mono labels, square-cornered #298dff buttons, and slate greys #6c7584 and #4b515b.", "sha256": "21d5668358508ba5386339811cd9ffc4d0a91d436c9c675ea1d3ff2527467026", "bytes": 10320}, + "sunday": {"name": "Sunday Robotics", "category": "Tech & AI", "description": "Sunday Robotics home page (sunday.ai) measured live: a white editorial page with off-black #1a1a1a text, #f7e731 yellow accent, a 120px headline in a custom sans plus a mono face for 14px labels, soft 4 to 24px radii, and full-bleed lifestyle photography of the Memo home robot.", "sha256": "f575fd71889cb5faba815e8ed76c3cfb832f1afe886f5f8e80ee3542f17088cb", "bytes": 11037}, + "sunday-insurance": {"name": "Sunday Insurance", "category": "Thai Brands", "description": "Sunday Insurance Thai homepage: warm orange (#fa4616) brand on a #f7f7f7 and white page, charcoal ink (#2a2c2e) with gray running text (#76777a), a custom Thai-capable sans in 60px bold hero headings, 16px-radius cards with #e8e8e6 hairlines, pill controls at 100px radius and a sunset family-photo hero.", "sha256": "c397c1f159b86b7c34f5424d828f9cd2c24773bb58c2be3d8762ab6c41b6eea1", "bytes": 10585}, + "sunrun": {"name": "Sunrun", "category": "Energy & Climate", "description": "Sunrun's site: warm cream #fffbf0 / #fffcf5 pages alternating with near-black #070911 and #000000 bands, navy #1f2647 pill buttons (800px radius, hover #49517d) and white pills on photography (hover #d4d5da), the commercial Roobert typeface at 500 for headlines (56px h1, -1.12px) and 400 for body, pale-blue #c3dbff text on dark, 16px and 24px rounded cards.", "sha256": "d86328634188bf3372bd34d4d49ee903807bad51af10497d32a5cb4d38bd19dd", "bytes": 19259}, + "supabase": {"name": "Supabase", "category": "Backend, Database & DevOps", "description": "Supabase's homepage: a near-white canvas (#fdfdfd) with white cards, near-black headings (#030303) over grey body copy (#696969), a single deep brand green (#0e7e4e) on 9.29px-radius buttons, Manrope headlines at 46px weight 500 and Inter text at 15px.", "sha256": "8ae6d9d17889f59c2b560f9ad5fcb62d33ec1eed751a5d7ed9258bc6a169e4f9", "bytes": 14431}, + "supalai": {"name": "Supalai", "category": "Thai Brands", "description": "Supalai (ศุภาลัย) Thai property developer home page measured live: a white page with the Prompt typeface at weights 300 to 500, a gold #c2883e call-to-action, charcoal #333132 and dark-brown #3c2415 panels, #f1f2f2 grey bands, square buttons, 6px and 18px corner radii, and soft 2px shadows.", "sha256": "e9585b9631503707091b099697ea4234fc6d0e39ebdee236271135c0f5c6dde1", "bytes": 9971}, + "supercell": {"name": "Supercell", "category": "Gaming", "description": "Supercell's corporate site supercell.com/en measured live — a white #ffffff news wall framed by a black #000000 header and footer, accessible blue #0f62d6 buttons (120px pill, 8px rectangle) darkening to #0a4fb0, pink #fb4a9d category tags, and the custom Supercell type family: SupercellHeadline-Heavy uppercase at 56px for the wordmark-style h1, SupercellText at 17–18px for copy.", "sha256": "b4f5f59547982b7d0a23d4a47d82c81ed660d8166ca4b13629cb56e9cf41e88a", "bytes": 13228}, + "superhuman": {"name": "Superhuman", "category": "Developer Tools & IDEs", "description": "Superhuman's homepage (Go, Mail, Docs): a warm off-white canvas (#f7f5f2) broken by maroon, plum and teal cards, warm near-black ink (#292827), a purple primary (#714cb6, lavender #d4c7ff on dark), the variable font Super Sans VF at weights 460 to 600, and 8px and 12px radii.", "sha256": "00020222e6f50ee46feb901a87ab1c8b8c6e9d8deebf7fefd0b3063a827b2102", "bytes": 15737}, + "superlocal-design-festival-25": {"name": "Superlocal", "category": "Culture & Events", "description": "Superlocal design festival site (superlocaldesign.com, Spanish, 2026 edition) measured live: a silver #bcbcbc canvas fading to copper #ff661a, off-black #1a1302 ink, a dotted display face at 72px and 56px, fontSans in 600 and 700 with tight tracking, and white pill buttons with 999px radius.", "sha256": "8b1cda0fa3f5083b5266244931f1e58dc24e7aea2724da48169e9354769e7e38", "bytes": 10714}, + "supersports": {"name": "Supersports", "category": "Thai Brands", "description": "Supersports Thailand online sports retailer (supersports.co.th) measured live: a navy #001a2d header, a lime #55ff06 announcement bar, NotoSansThai in weights 400 to 900, white and #f5f5f5 grounds, square SHOP NOW buttons, sale red #d01345, and 8px 24px asymmetric corners on category and product tiles.", "sha256": "af6249694ac8a857f9c693e68c4d61aaa817d79cf6c9bbc564d7708ea25f5eb5", "bytes": 10774}, + "surveymonkey": {"name": "SurveyMonkey", "category": "Product & SaaS", "description": "SurveyMonkey's home page sets bold National 2 headlines (92px/700, -1.84px tracking) in forest #0f2e21 on a warm off-white #fefdfb canvas, with slate #333e48 body copy, pill-shaped green #08794a 'Get started free' buttons (hover #089b5e), a mustard #e2bf36 'Sign up free' pill, deep-forest #00301f feature bands and mint #d6f5de cards with 28px corners.", "sha256": "51e05d74ccaed97da4aadee825df3b27b69cbc1e631d7f6c391e5999510bcd8f", "bytes": 16614}, + "susco": {"name": "SUSCO", "category": "Thai Brands", "description": "SUSCO Public Company Limited (susco.co.th), a Thai fuel-station operator on Bootstrap 5: psl_display_pro Thai display type at 77px and 28.8px body, yellow #ffdc00 and blue #0079c2 brand colors, translucent charcoal #3d4049 price-board card with 15px radius.", "sha256": "69cb59700fb65048a1eb6f1991375b9ca7cce6830115d3327404c99411b5c4e8", "bytes": 10099}, + "sutera": {"name": "Sutéra", "category": "Tech & AI", "description": "Sutéra, the portfolio of designer Stella Mühlhaus (sutera.ch), measured live: a white page with pure black text, a 59.136px uppercase NeueHaas headline, PPNeueMontreal at 10.368px for tiny outlined labels, grey #9e9e9e and sky #b5e9ff accents, 1px black outlines, and 10px radius tag pills that invert on hover.", "sha256": "025fdd42233ab98615665dca482602babef45948200d29e2a0875ee5c55de544", "bytes": 9416}, + "suvarnabhumi-airport": {"name": "Suvarnabhumi Airport", "category": "Thai Brands", "description": "Suvarnabhumi Airport official site (suvarnabhumi.airportthai.co.th, Airports of Thailand) measured live: a sky-blue #03a9f4 navigation bar, Kanit at 12px body and 17px semibold headings, white and #f1f1f1 bands, #4b4b4b text, #00aff4 accent, 7px card corners with soft grey 8px shadows, and a circular icon list.", "sha256": "7fc8fc1e9c027f378fc9aeb0c0ddd1cad1dc8fccc28aa2188375d14b5b485b70", "bytes": 9569}, + "suzuki-motor-thailand": {"name": "Suzuki Motor (Thailand)", "category": "Thai Brands", "description": "Suzuki Motor (Thailand) Co., Ltd. home page (suzuki.co.th) measured live: a white and #f5f5f5 Thai-language car catalogue with a #202020 menu bar, Suzuki blue #00368f square buttons, red #de0009 price and underline accents, Sukhumvit Set Medium and SemiBold at 16px with 0.3px tracking, and 30px to 50px rounded details.", "sha256": "b78ac1dbdc7091186fb420fc660940a471c9cb2f6bc5ef2414c4e0e08df9678b", "bytes": 10523}, + "sweden-gov": {"name": "Government Offices of Sweden", "category": "Design Systems", "description": "government.se, the English-language site of the Swedish Government Offices: white canvas, near-black text #0c0c0c, link and button blue #145ea5, a dark navy #00406a header nav and Search button, Open Sans-named Light, Regular and Semibold webfonts at 36px, 18px and 14px, light gray #f0f0f0 side boxes, and 4px radii on buttons.", "sha256": "9ef42483a4a72aa5ac54cc3434621b7adf0f5289eeb8e6bb0453a24ac90c76eb", "bytes": 10684}, + "sweetgreen": {"name": "sweetgreen", "category": "Food & Beverage", "description": "sweetgreen's web system is a warm cream canvas (#f4f3e7) with near-black ink (#0e150e), deep forest green (#00473c) and an electric lime (#e6ff55) for pill-shaped calls to action (1000px radius). Type is the custom SweetSans / SweetSansText family by MCKL Type at a single 400 weight, with 80px SweetSans display headlines on 68px leading, uppercase 24px card titles tracked 0.72px, and Grenette (weight 200, -2.25px tracking) for 48px category tabs. Full-bleed food photography, sage (#d8e5d6) and tan (#e8dcc6) section bands, and 20px-rounded product images.", "sha256": "0564299dc66e38891ffbde8b091c5ab4854679bf1853d5c10a7f5e75732c0ebf", "bytes": 28283}, + "swiss": {"name": "Swiss Post", "category": "Design Systems", "description": "Swiss Post (post.ch) pairs a signature postal yellow (#ffcc00) with white canvas, black ink and warm grey card surfaces (#f4f3f1), set in the proprietary Swiss Post Sans at light 300 for body and bold 700 for headings. Controls are nearly square (3px and 4px radii) with one circular back-to-top button, and photography of staff and stamps carries the warmth.", "sha256": "3cc2c732f77bdb4c6bf0ec5bc01516471bacdb83ceeb8d30acc03fb9db283832", "bytes": 13193}, + "swiss-re": {"name": "Swiss Re", "category": "Banking & Insurance", "description": "Swiss Re Group home page (swissre.com) measured live: a white corporate page with slate #3c4150 text in Swiss Re Sans at weight 200 and 22px, a single teal #006e73 accent on outlined capsule buttons, a black and steel-blue lattice hero, and wide soft shadows (0 10px 60px at 20% black) under overlapping white cards.", "sha256": "18b6eddc36574481c6d9de8186892e164a74b89bac8df96669afad4375ba642c", "bytes": 10408}, + "sxsw": {"name": "SXSW", "category": "Culture & Events", "description": "SXSW (sxsw.com) is a white #ffffff WordPress site set entirely in Founders Grotesk, Founders Grotesk Text and Founders Grotesk Mono, with black #000000 25px-radius pill CTAs, a #ffc107 SXSW-yellow 'Buy' pill, an orange #f59830 hero gradient, #f4f4f4 8px-radius stat cards and a #0f1012 footer.", "sha256": "4bf30ce7d7c5a3660a2aff9be1081f75453bd6559effda5507339141bfc4efcf", "bytes": 17281}, + "symphony-communication": {"name": "Symphony Communication", "category": "Thai Brands", "description": "Symphony Communication PLC home page (symphony.net.th) measured live: a black page with white IBM Plex Sans text, #e63e26 red-orange pill buttons (50px radius, 56px tall), red-to-navy gradient headings, a white #231f20 header, angled red and purple gradient tiles, and a world-map footprint panel.", "sha256": "2f181e0924c7ef9909c097e57b1db669ae2e45a8b46681c64bd52451a4a5c103", "bytes": 10680}, + "synthesia": {"name": "Synthesia", "category": "AI", "description": "Synthesia, the AI video and avatar platform for business: white #ffffff and #f7f7f7 canvases, near-black navy #090b22 buttons and headlines, indigo #3e57da accents, Basiersquare at 72px/-4.68px display down to 16px/22px body, 10px button radius, 16px glass code cards and a #0d0f2c footer.", "sha256": "0c407fd0ceb0f7fc2b3a9f3a0f5c62727699d5eeae5ffaa78cd87af294a81fa9", "bytes": 14793}, + "t-mobile": {"name": "T-Mobile", "category": "Telecom", "description": "T-Mobile USA home page design system: TeleNeo 800 headlines (48px/24px), system-ui body, magenta #e20074 actions with #770141 hover, white and #f5f5f5 surfaces, 8px card radius, square 0px primary button, #333333 footer.", "sha256": "fb25d5cbfa02529b456bd34ca719ef035cf2f3cc256e66076c862939cd4776ec", "bytes": 10785}, + "tabnine": {"name": "Tricentis", "category": "Developer Tools & IDEs", "description": "Tricentis (tricentis.com, where tabnine.com now redirects after Tricentis acquired Tabnine) sets Open Sans 800 headlines (68px/72px, -0.68px) in white on deep navy #001b41 and in charcoal #343941 on white, with an amber #ffb400 'Get a demo' button (6px radius, #343941 bold text), cyan #59c8e6 eyebrows, #004c97 stat cards with 12px radius and an orange #ff6c0e header action.", "sha256": "12fa86b0ef1d4162db4d8407af288d3597730a7808fc6b231a75b524a7e93060", "bytes": 12717}, + "tailwindcss": {"name": "Tailwind CSS", "category": "Frontend Frameworks", "description": "Tailwind CSS homepage and docs: a white canvas with near-black gray-950 ink (#030712), slate-gray body text (#4a5565), a black 32px-radius pill button, 96px Inter display type at -4.8px tracking, mono code (loaded as plexMono), sky-blue (#74d4ff) code accents and hairline grid decoration.", "sha256": "700e78cc3fafb9c8ddc2857f9c4d2847ea2e3001eab2277d86f7b48987b7376c", "bytes": 14135}, + "take-two": {"name": "Take-Two Interactive", "category": "Gaming", "description": "Take-Two Interactive corporate home page: Gotham 600 titles at 24px, 700 uppercase 16px buttons, yellow #fcea17 and red #e60012 slide CTAs, #d7d7d7 and white surfaces, 4px button radius, 8px card radius, translucent #ebebebcc nav.", "sha256": "e17ee13d305bee05e5672f55be47e2c37aaf96f9d55ecb43a0f945a51a28b37a", "bytes": 9926}, + "takeda": {"name": "Takeda", "category": "Pharma", "description": "Takeda global home page: Gotham at 700 42px display and 400 16px body, brand red #bd120a, white canvas with #edf2f4 story bands, 30px card and photo radius, 9999px pill secondary buttons, square 56px primary button, charcoal #333333 footer.", "sha256": "e6aa87f93e294753255f758f59f5bd2fd34e090e4a5153f8fa893c3840d6c82f", "bytes": 11476}, + "talend": {"name": "Qlik Talend", "category": "Design Systems", "description": "The Talend homepage now ships as Qlik Talend: a white canvas with Inter (600 headlines at 42px, 18px body), navy #19426c headings, a Qlik green #008936 primary with 30px-radius pill buttons, a floating white header pill with a 40px radius, and isometric green and teal data illustrations.", "sha256": "45d08f9979bfa4c084e4bffa5230287d76ab08822e9f2d51a779966e26ade811", "bytes": 12252}, + "tana": {"name": "Tana", "category": "Productivity & SaaS", "description": "Tana's home page pairs Source Serif 4 at weight 500 with tight tracking (48px/52.8px at -2.16px; 32px section heads) and Inter 15px/22.5px body in #6a6a6a on an off-white #fbfbfb canvas, with a warm near-black #0c0805 'Download for Mac' button (14px radius, 54px tall), pastel gradient product panels and 20px-radius photo cards.", "sha256": "60052cd3b32300038ab3b0060c347b1fafbac66cb9c844533c5acb816288cc25", "bytes": 13846}, + "tao-kae-noi": {"name": "Tao Kae Noi", "category": "Thai Brands", "description": "Tao Kae Noi global site: a loud seaweed-snack brand page built on flat red (#ea212c) bands with scalloped white wave dividers, a yellow (#fdc53e) pill CTA, black Montserrat 900 uppercase headings at 48px, and product-pack photography.", "sha256": "9ad29c1ee799e86a45fc68b94402330b0543dc3699864effabb0be8637ba1536", "bytes": 9880}, + "tarad": {"name": "Tarad.com", "category": "Thai Brands", "description": "Thai e-commerce service provider (TARAD.com) on Bootstrap 4: blue #0039c4 and #0066b2 bands, orange #f24a0b service buttons, Kanit at 16px and Sukhumvit Set for buttons, 4px radii, white and #eeeeee canvas.", "sha256": "0f59ba13c2c60dbc8586007f1e97160d22f9d2948bfb79df121536d543b337e0", "bytes": 10689}, + "target": {"name": "Target", "category": "Retail & E-commerce", "description": "Target Corporation retail home page: Helvetica for Target bold 38px display and 16px body, bullseye red #cc0000 pill buttons, white canvas with cream #faf0e6 and #f1e0cb deal bands, 12px card radius, soft four-layer card shadow.", "sha256": "c172f6a81a5fb05f91d080276b410f42568e9fb58d35e7c6214fb968034140bb", "bytes": 11481}, + "tata-motors-thailand": {"name": "Tata Motors Thailand", "category": "Thai Brands", "description": "Tata Motors Thailand English home page: Calibre Black, Light and Regular type, navy #0a0a5f bands, bright blue #2f7fe2 uppercase square 64px buttons, white canvas, 10px value-tile radius and soft 5px glow shadows.", "sha256": "7567bd3523b53097dc4d6844a43165e7f69862c061bb5606e6584051f0adb845", "bytes": 10936}, + "tate": {"name": "Tate", "category": "Culture & Events", "description": "Tate (tate.org.uk): a white #ffffff gallery site set entirely in Tate New Pro ('Tate regular') at weight 400, with widely tracked uppercase headings (58px, 6.38px tracking), grey #767676 body copy, square-cornered #1a1a1a buttons with white labels, an aqua #85dee7 membership accent and #0072ce blue link hovers.", "sha256": "0332fb20a914c4503dd1d9fde74bafbd26aa00ed0a7bb7933803a20a9b314d1e", "bytes": 12384}, + "tcdc": {"name": "TCDC (Thailand Creative & Design Center)", "category": "Thai Brands", "description": "TCDC Thai-language All Program page: Poppins with Kanit and Sarabun, single green #2e8037 accent on white with a black top bar, 28px pill buttons, circular icon controls and a two-column poster card grid with thin green rules.", "sha256": "f9137ed7ca892e7b1aa06fb81a532ae3eb2231cfa5e4c30f3a2b6a34496da622", "bytes": 9325}, + "td-bank": {"name": "TD Canada Trust", "category": "Banking & Insurance", "description": "TD Canada Trust personal-banking home page: TD Graphik Medium and SemiLight, TD green #008a00 square 42px buttons with #0d7c16 hover, deep green #1a5336 headings, white canvas with pale green bands, no rounded corners and circular line icons.", "sha256": "3a4f692b9cfe8e8756d5a474b0f8866d83b566b836b1563ff3a3568555601c9c", "bytes": 11252}, + "tdesign": {"name": "Tencent", "category": "Design Systems", "description": "Tencent corporate home page (tencent.com): a white canvas (#ffffff) with black ink (#000000), Tencent blue (#0052d9) used for the logo, active language and links, an 85px italic-style display face \"Tencent W7\" over a full-bleed hero photograph, Haas Grot Disp Web at 500 and 600 weights for text, 10px-radius news thumbnails and a full-width black \"For consumers\" band.", "sha256": "8700935c7dbf875a751805ba51b5c9d5e5290978581c1c644179904e4f197959", "bytes": 11075}, + "teambition": {"name": "DingTalk Teambition", "category": "Design Systems", "description": "DingTalk Teambition's marketing site is a light, airy project-management pitch in the system font stack (-apple-system with PingFang SC for Chinese), 60px bold display headlines in #212121, a charcoal #353535 solid CTA with 8px radius, a blue-to-violet gradient download button, #0089ff blue eyebrow labels and generous 30px-radius pale cards on a white canvas.", "sha256": "e1c7725452ef6c14e66e98b61fcdd165a7ea22200112e1d4f0e36635c15c81ef", "bytes": 11910}, + "ted": {"name": "TED", "category": "Culture & Events", "description": "TED (ted.com) is a white #ffffff editorial video site set entirely in Inter with tight negative tracking, near-black #121212 text, TED red #eb0028 uppercase topic labels, a #d91e18 4px-radius MEMBERSHIP button, a black topic bar, a #262626 newsletter band and a #121212 footer.", "sha256": "f40cedf96e5ab179a87271fe9480e13df5a2f848230e10c1f68976abf6f6309a", "bytes": 14901}, + "teenage-engineering": {"name": "teenage engineering", "category": "Music & Audio", "description": "teenage engineering's site is a scaling, 980px-based layout set in its own te-20 / te-40 faces at weights 100 and 300 (plus TechnoType on product pages) — near-black #0f0e12 lowercase text on white #ffffff, full-bleed black product photography, light-grey #f6f8f7 product tiles, link blue #0071bb, and tiny dark 3.91837px-radius \"add to bag\" pills.", "sha256": "a3caa107b57a723f53588a5d0721b4a8a4d7cdf1947cc290ec176f0cf2e2a350", "bytes": 24489}, + "telefonica": {"name": "Telefónica", "category": "Design Systems", "description": "Telefónica's corporate site (telefonica.com/es) pairs a vivid electric blue #0066ff with deep navy ink #031a34 on white, using the Telefonica Sans family in light, regular, medium and demibold cuts, 20px to 40px rounded cards on pale #f2f4ff tint, 100px pill outline buttons with 0.55px-tracked 11px uppercase labels, and full-bleed blue photographic heroes.", "sha256": "0193594bac56ae17283862874b1b237ef5fea6c07311d9d2151f3205330ef414", "bytes": 13045}, + "telegram": {"name": "Telegram", "category": "Media & Consumer Tech", "description": "Telegram's site (telegram.org) is a light, document-like page: white #ffffff canvas, #333333 system-font text at 15px, Telegram blue #0088cc for links, tabs and the 26px/600 feature titles, a #318fd3 999px-radius pill on mobile, 4px radii elsewhere, and duck sticker illustrations.", "sha256": "2d2a6197df157e1be27da8e359e5bbefcef674fb3cb1d0e54cb4a491fe934bff", "bytes": 11627}, + "telekom": {"name": "Deutsche Telekom", "category": "Design Systems", "description": "Deutsche Telekom corporate home page (telekom.com): a black canvas (#000000) with white text and a #202020 pill navigation bar, magenta (#e20074) as the brand action color, white 64px pill buttons with black bold labels, TeleNeo Var type (56px/500 hero, 48px/700 headings, 24px body) and very round 24 to 42px section containers over sunset photography and pastel blue and violet panels.", "sha256": "7e503b9997e5ad6cf177c1eb7fc76cf0ae8e85b74d248489d072bd1c2311634c", "bytes": 12340}, + "telenor": {"name": "Telenor Group", "category": "Telecom", "description": "Telenor Group corporate home page: Telenor proprietary family with Telenor Bold 24px headings and 16px body, indigo #2d28cd links, deep navy #000f3c header and footer, white canvas, square corners, no shadows and photo-led three-column cards.", "sha256": "48abedd92b9ee7422bb1090a5137db28b45b08e5c36251b6e5dc113c97f1d710", "bytes": 9413}, + "telescope": {"name": "Telescope", "category": "Tech & AI", "description": "Telescope recommendations site: Beausite 57px light headline with -0.38px tracking, DM Mono 12.35px uppercase labels, warm paper canvas #f4f3f0, near-black #1a1915 text, pale lime #e3f794 sign-up pill, 2px photo radius and no shadows.", "sha256": "93d20f299442c8461a310536985be1935ad06095b4a5304a03482fbabb3b5b8d", "bytes": 9528}, + "telha-clarke": {"name": "Telha Clarke", "category": "Architecture & Interiors", "description": "Telha Clarke architecture studio home page: Europa-Grotesk at weight 400 with a 14px to 89px fluid scale, pure black on white with pale #cacfcb footer text, 0px radius everywhere, no shadows and unframed architectural imagery.", "sha256": "c8cb764cbcaff6f24f906e4664182ba999b44fb6346e610768f565e95c4d87d8", "bytes": 9723}, + "telkom-ot": {"name": "Telkom-OT", "category": "Tech & AI", "description": "Telkom-OT aluminium injection-molding tools site: Aeonik Pro 125px headline with Sfmono uppercase 14px labels, flat grey #d9d9d9 canvas, near-black #1e1e1e text, coral #ff5948 buttons with #ff6e5f hover, 4px and 6px radii and a hard dark halo shadow.", "sha256": "0553f41e5c5057b153e5ad1e6cc54cbcd19d17858b5733da6366cd65fae9e5ea", "bytes": 11099}, + "telstra": {"name": "Telstra", "category": "Telecom", "description": "Telstra Personal home page: Telstra Display 700 56px headlines and Telstra Text Variable 16px body, navy #131a35 ink and 36px-radius 48px buttons, interactive blue #0d54ff, 16px bordered cards, cream #fbf8f3 panels and #f2f2f7 footer.", "sha256": "5fd6d067a23634ba9f877345859c23233848ded43e496f1968de6ec989bc953a", "bytes": 10627}, + "temporal": {"name": "Temporal", "category": "Backend, Database & DevOps", "description": "Temporal's durable-execution site: Space Black #141414 canvas, Off White #f8fafc headlines in light Aeonik 68px/300 tracked -2px, lavender #cacbf9 body text, UV #444ce7 brand blue with a violet-to-UV gradient square CTA in Noto Sans Mono 16px/500, pill demo controls and mono uppercase micro-labels.", "sha256": "decce4e0d1b2710d726d8e2c3b6d05fff516d0d3fc402a67d3cfe2e8846e812d", "bytes": 12576}, + "temu-g": {"name": "Temu", "category": "E-commerce & Retail", "description": "Temu's Thai storefront measured at temu.com — white #ffffff canvas, Temu orange #fb7701 primary with white text, blue #1d86e6 header band, green #0a8800 trust and \"local\" badges, grey #555555 product copy, near-black #1e1e1e footer, miui/system-ui sans stack at 13–14px, 4px and 3px small radii plus 9999px pills.", "sha256": "321d48c2b20c57c51e9fd880acc85836237397dc9cb4cd9ca8dccb59eb1d97c2", "bytes": 15641}, + "ten-years-away": {"name": "Ten Years Away", "category": "Culture & Events", "description": "Interactive graphic novel by Studio375 set in PP Valve (weights 200, 500, 800), uppercase 14-15px interface text, a storm navy #0d1429 ground with pale ice blue #cce8eb type, a 3px outlined entry button and no shadows.", "sha256": "af43e53f4e4b74893654ff10041767d49eb1ee9f2434f644db8b86c01e1f1968", "bytes": 9222}, + "tengile-malamala-collection": {"name": "Tengile MalaMala Collection", "category": "Food & Beverage", "description": "Luxury safari collection in Greater Kruger and Sabi Sand: warm bone canvas #f5eee9, deep olive ink #373f1d, moss green #5c6e21 footer, PP Fragment light display at 106.667px/220 over Inter 14-16px, square corners with 2px and 4px radii, no shadows.", "sha256": "da66a30ed46ceeb731a35ae031d1d00466336e9329e21ca0e67805b14a7e2ad9", "bytes": 9934}, + "terminal-industries": {"name": "Terminal Industries", "category": "Tech & AI", "description": "Terminal Yard Operating System site: white canvas, deep green ink #052424, lime #abff02 action fill, SuisseIntl for headings and body with Geist Mono 11px caps buttons, 8px button radius, 24px cards in #f0f0f0 and a full-bleed dusk truck hero.", "sha256": "ac5a520948eeb059b9cfee1084cec02768a8974a54741290272d9cced4759a78", "bytes": 11232}, + "terminal21": {"name": "Terminal21", "category": "Thai Brands", "description": "Terminal21 group landing page (terminal21.co.th) that routes to four malls, Asok, Korat, Pattaya and Rama 3: white canvas, navy ink #152266, slate #455660, a five-color stripe, DB-Helvethaica-X Thai type at 20px, 5px input radius and a travel-landmark skyline footer.", "sha256": "a6428554424cd4f11e150566ee4702063e54be344179558a53c3de7ada3b51b8", "bytes": 9016}, + "tero-entertainment": {"name": "Tero Entertainment", "category": "Thai Brands", "description": "Tero Entertainment (TeroAsia) corporate and ticketing site in Thai and English: Kanit throughout (16-44px, weights 400-700), warm cream #fbf9f4 sections, brand red #ab0f15 action buttons with 8px radius, near-black #1a1719 ink and a dark live-concert video hero.", "sha256": "17612bd02385209c26242a2ac34ce3799380db27b79e099ce660b60c5fef7d11", "bytes": 9929}, + "tesla": {"name": "Tesla", "category": "Automotive", "description": "Tesla's tesla.com is a photo-first showroom: Universal Sans Display 48px/500 headlines in white over full-bleed vehicle imagery, Universal Sans Text 12–14px for UI, a single #3e6ae1 blue 'Order Now' button (hover #3457b1) with 4px radius, #f4f4f4 cards at 8px radius, and #171a20/#393c41/#5c5e62 greys on a #ffffff canvas.", "sha256": "a472445e899b23c66081884e7d43538aed0d443eedd59e5d177a51e8697f7d66", "bytes": 15305}, + "tesoro-1": {"name": "Tesoro", "category": "Tech & AI", "description": "Tesoro rewards platform for the gaming economy: charcoal canvas #222222, cream ink #fdf8f3, five saturated swatches (coral #ff6b4a, gold #ffb627, green #3ace67, teal #00b8a9, fuchsia #d464dc), Polymath Display 700 headlines over Systemia, chamfered translucent buttons.", "sha256": "3e24a096647f27b78a3bd8d08b5f5b61e78119f667418c898fba2675fa5f6d04", "bytes": 10919}, + "tetris": {"name": "Tetris", "category": "Themed & Unique", "description": "Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.", "sha256": "1df18ad978601796a78740a7705a41b7793fc8ad65041e46218d406b09c5dec8", "bytes": 3079}, + "thachang-green": {"name": "Thachang Green Energy", "category": "Thai Brands", "description": "Thachang Green Energy (tge.co.th), a Thai renewable-power company, uses a white canvas #ffffff, navy ink #383c55, cyan #39c1d9 accent and blue #2561ad footer in Helvetica 60px/700 headings; its entry gateway adds PSL Kanda Modern Extra Pro 54px and brown #5d3900 text.", "sha256": "7a46146c3b3880985c2c5eaeb98d1cd770179a6abfa41c128dc4d901b223b5b6", "bytes": 10720}, + "thai-airasia": {"name": "AirAsia MOVE", "category": "Thai Brands", "description": "AirAsia MOVE (airasia.com/en/gb), the AirAsia group's flights, hotels and travel super-app site measured for the Thai AirAsia queue entry: white canvas, charcoal ink #2c2b2f, signal green #0ce865 search action, DM Sans 12-16px, 16px card radius, no shadows.", "sha256": "4bb08275c451aafaeab6f139aaba73c9b0b9e76a43e8366b33756081cf4e320b", "bytes": 9133}, + "thai-credit-bank": {"name": "Thai Credit Bank", "category": "Thai Brands", "description": "Thai Credit Bank (ธนาคารไทยเครดิต) homepage: a white Bootstrap 5 page set in the self-hosted db_helvethaica Thai face at 24px body, charcoal #333333 text, deep navy #021a45 headline accents, 4px-radius promo cards with a faint 0 2px 6px shadow, and a charcoal footer.", "sha256": "92025fff764aeb6037093421ea1ea54db53cfb6e02d6de91f123305c54002cc4", "bytes": 10045}, + "thai-denmark": {"name": "Thai-Denmark Milk Shop", "category": "Thai Brands", "description": "Thai-Denmark Milk Shop (thaidenmark.com), the online shop for Thai-Denmark dairy products: white canvas, milk-carton red #ef1c23 pill CTAs at 35px radius, Noto Serif Thai body text, blue-tinted product tiles with 10px radius and WoodMart store patterns.", "sha256": "1777988fd50e4b6455dfcca5ff8b7d15471e0318df50dcaf76df15a5f4d8a741", "bytes": 10968}, + "thai-enquirer": {"name": "Thai Enquirer", "category": "Thai Brands", "description": "Thai Enquirer English-language news site on the tagDiv Newspaper theme: white canvas, near-black #111111 headlines in Roboto 21px, Poppins 40px section titles, Open Sans 15px bold navigation, red #dd3333 section markers, black feature band and square corners.", "sha256": "2af8b1d6739e632fa5c90e516e366c9cb1a657cb3dc0c3da8158ff4ebbc2f234", "bytes": 9698}, + "thai-global-network": {"name": "ททบ. 5 TV5HD (Royal Thai Army Radio and Television)", "category": "Thai Brands", "description": "Thai Army Channel 5 (TV5HD) news portal at tv5.co.th, the operator site measured for the Thai Global Network queue entry: Sarabun and Kanit Thai type at 13-20px, brand green #50ae64 headers on a #f5f5f5 canvas, white cards, a #1a1a1a nav bar and 3-6px radii.", "sha256": "a71ca569117a98c266509e67965c7df999c5b9f7610e49021dcdb85fb2cf943a", "bytes": 10313}, + "thai-health-insurance": {"name": "Thai Health Insurance PLC (ไทยประกันสุขภาพ)", "category": "Thai Brands", "description": "Thai Health Insurance PLC English homepage: white canvas, Prompt typeface, cyan #00aeef top bar and underlines, #2575fc 5px-radius Learn-more buttons, #545454 body ink and navy #123075 product tiles with a soft 10px-radius shadow.", "sha256": "0a7dd939df9930047da22b548d88524599b518084427d16f01b5d7161d74f2c6", "bytes": 12946}, + "thai-life": {"name": "Thai Life Insurance (ไทยประกันชีวิต)", "category": "Thai Brands", "description": "Thai Life Insurance corporate site in Thai: white canvas, brand blue #007ac2 headings and links, gray #666666 body, a gray #797979 product menu bar, Conv_Ozone and Conv_OzoneMed type at 20-52px, life-stage pictogram sections, 2px and 15px radii.", "sha256": "24616b28bccc3dbb2ae2b329a61a55b7428348fdd5a397e478dcf32301ba0e42", "bytes": 10252}, + "thai-name-server": {"name": "Thai Name Server", "category": "Thai Brands", "description": "Thai Name Server Co., Ltd. (ThaiNS), the .th and .ไทย registry operator: white canvas with a #98afc7 steel-blue frame, #001b46 navy header band, #2b2977 indigo logo and nav text, #333333 body in the system UI font at 16px, a Bootstrap 5 layout with 4-5px radii.", "sha256": "6e5da462e67bdb340d40fbf5c9c2638ea5db179453001d118ba66caa1055bbc8", "bytes": 9204}, + "thai-namthip": {"name": "ThaiNamthip Coca-Cola", "category": "Thai Brands", "description": "ThaiNamthip Coca-Cola's corporate site is Thai-first with Poppins and Prompt headings at weight 700, a Coca-Cola red action color #ec1c24, full-bleed #e41e2b product bands, and heavily rounded 24px panels and 48px media frames with faint red-tinted glow shadows.", "sha256": "a9a4148050572ea60476c5a94bbcfc265456e8ea611797f0ea507fc54f65503d", "bytes": 10951}, + "thai-news-agency": {"name": "Thai News Agency (สำนักข่าวไทย อสมท)", "category": "Thai Brands", "description": "Thai News Agency (TNA) of MCOT at tna.mcot.net: Kanit throughout (16px weight 300 body, 600 headings), navy #003183 pill navigation, red #be0217 section bars on royal-blue #2a3a90 bands, white cards with 16px radius, hard navy offset shadows and a black footer.", "sha256": "85ef1b7feeb791ddc42a699123281af30495e1d891ae1d038db94c5827de0b91", "bytes": 10026}, + "thai-oil": {"name": "Thai Oil", "category": "Thai Brands", "description": "Thaioil Group corporate site (thaioilgroup.com): white canvas, DB Heavent Thai type at 72/48/24px, heading blue #1d4f86, cyan #4ccaf4 links with 2px radius, cyan glow card shadows and 8-10px photo-card corners over industrial photography.", "sha256": "6bdea29b00350fe1296a411d1783d5dab9e4a60bbbded93267462671904f1e29", "bytes": 10451}, + "thai-paiboon": {"name": "Thai Paiboon Insurance (ไทยไพบูลย์ประกันภัย)", "category": "Thai Brands", "description": "Thai Paiboon Insurance site: white canvas, deep-blue ink #084e79 with a gold #de9b3a action colour, Prompt typeface at 700 weight for headings, uppercase 14px buttons and pill radii of 24px and 28px.", "sha256": "85d7236bb8937249810aa46f171940d5d529a832362793d1e9c43e5d23a2505f", "bytes": 13400}, + "thai-parliament-television": {"name": "Thai Parliament Television (TPCHANNEL)", "category": "Thai Brands", "description": "TPCHANNEL (tpchannel.org), Thai Parliament Television's news and video portal: Prompt Thai type at 14px body, black header with gold #ffd684 nav, #f1f1f1 page gray, gold-tint #ffd68426 pill buttons with #b8800f text at 50px radius and 8px thumbnails.", "sha256": "dbbf655f1d37e4457213a73a6ed6c6386e4910794ef2298ef99f8bc4eb860a5f", "bytes": 10391}, + "thai-post": {"name": "Thai Post", "category": "Thai Brands", "description": "Thai Post newspaper site (thaipost.net): white canvas, navy #003254 headlines in Prompt with Sarabun 18px body, red #e11612 accents, charcoal #363636 bands, flat rule-divided layout and #ededed pill buttons at 64px radius with #b82e24 hover.", "sha256": "6fc1ec118a5ca94b0414b9a3d5d384ab85c7f6f73925cd1bbffeddea196094f0", "bytes": 10750}, + "thai-rath": {"name": "Thairath (ไทยรัฐออนไลน์)", "category": "Thai Brands", "description": "Thairath Online (thairath.co.th): white canvas, green #00b400 actions with a 20px-radius follow button and pill tabs, Kondolar Thai and KaLaTeXa Display type at 14-16px with 0.2px spacing, #505050 body, #f1f2f3 panels and timestamped headline cards.", "sha256": "a5c30866466b42bcd36d44afbc1f8517d1e57ea2aa64e28158d56e8749b945ce", "bytes": 10064}, + "thai-rung-ruang": {"name": "TRR Group", "category": "Thai Brands", "description": "Corporate site of TRR Group (Thai Roong Ruang Sugar Group, maker of the Lin sugar brand), set in Kanit 300-500 with 35px section headings, deep sugar-cane brown #502c1e ink on white, blush surfaces #e8e0dd and #dfdfdf, a soft #cbbab3 secondary text, and photographic full-bleed bands.", "sha256": "6ae7da0af0161651559942e77dd16916adc947a28f06e7d9e52e05b1898c0194", "bytes": 11135}, + "thai-rung-union-car": {"name": "Thai Rung Union Car", "category": "Thai Brands", "description": "Thai Rung Union Car corporate site (thairung.co.th/en): white canvas with #e8e8e8 grays, brand blue #1a4a99 on a #ecf6ff active-nav tint, Sukhumvit 16px body and 32px bold display, square 0px corners, one 12px header shadow and a Bootstrap 4 slider layout.", "sha256": "bd02e22eb7cc9d9e9d46974ac4a1bfca19de1ef6b48bd1306b802b3cef06918d", "bytes": 9916}, + "thai-setakij": {"name": "Thai Setakij Insurance (TSI Insurance)", "category": "Thai Brands", "description": "TSI Insurance (ไทยเศรษฐกิจประกันภัย) site: off-white canvas #f8fafc, Sukhumvit typeface, bright blue #007eff outline buttons, a #ffcd00 yellow navigation bar over a #0a2544 navy footer and 10px button radius.", "sha256": "7c8840f0bd693045d3a3f7641b58a1b030f505c07b7ba400d11ce177136b9625", "bytes": 11906}, + "thai-smile-bus": {"name": "Thai Smile Group (Thai Smile Bus)", "category": "Thai Brands", "description": "Thai Smile Group site (thaismilegroup.com), operator of Thai Smile Bus: full-bleed hero photography, navy #203556 Prompt text on white, charcoal #1b1b1b search band, giant outlined Bebas Neue numerals, 10px fields and soft shadows.", "sha256": "a5f3334c644bf0e862f3922bf03dd07c720f771976e0c8fffc92bd03b8a846d9", "bytes": 9643}, + "thai-union": {"name": "Thai Union Group", "category": "Thai Brands", "description": "Thai Union Group corporate site (thaiunion.com): pale blue canvas #e8f1f8 with white and navy #002654 rounded panels, Gotham 400 at 14px/28px with -0.4px tracking, brand blue #21409a, sky blue #4aabe0 and outlined uppercase buttons with 6.4px radius.", "sha256": "4ed8d35824902800c5494fbb6a18e7f69dd3fc960104d16ca49c744a61258d35", "bytes": 10536}, + "thai-wah": {"name": "Thai Wah", "category": "Thai Brands", "description": "Thai Wah Public Company (TWPC) corporate site: a white page with full-bleed agricultural photography, 50%-black text panels, navy #0e1149 headings, sky-blue #00a1ed navigation, Poppins/Prompt type with a 42px weight-500 display style, and flat 4px-corner controls.", "sha256": "da8bf329d3ea61e8e2d66d71df8d4132c2c4bbdfc8bbcd5d811b6c3478495dee", "bytes": 10169}, + "thai-watsadu": {"name": "Thai Watsadu (ไทวัสดุ)", "category": "Thai Brands", "description": "Thai Watsadu online store (thaiwatsadu.com): #f1f1f1 canvas with white bands, brand red #b8292f buttons at 4px radius, custom kittithada Thai type at 21-24px, 6px cards, a Material-style header shadow and a red service band.", "sha256": "d7ce7d21b7b4e4e920f4850168dfd15593669189c1b8d259c9641940f818a599", "bytes": 9808}, + "thaibma": {"name": "The Thai Bond Market Association (ThaiBMA)", "category": "Thai Brands", "description": "ThaiBMA homepage: warm off-white canvas #f9f7f7, orange #f37021 navigation bar and brand colour, peach #ffe9d9 quick-link tiles, dark #33302b footer, SF UI Text with Inter and Noto Sans Thai, data-dense cards with 16px radius.", "sha256": "3299377fa186d5195c6b035ed8b2e99b4909d368e60141453d6fbc9af0305c05", "bytes": 13775}, + "thaibulksms": {"name": "Thaibulksms", "category": "Thai Brands", "description": "Thaibulksms marketing site (thaibulksms.com): white canvas, ink #1d1d1f pill buttons, brand blue #006bff and cyan #00c7ff on sky-blue photographic hero, one custom Thai font at 14/16/32/55px, 20px cards with Tailwind large shadows.", "sha256": "40cef4aaad44183721fc8cd71af8a390f0f6fac18d642373ca2d67327d3fbff7", "bytes": 10384}, + "thaijob": {"name": "ThaiJob", "category": "Thai Brands", "description": "Thai job board (ThaiJob.com): blue #1d65bf hero band with a red search action, white and #f6f6f6 canvas, #222e39 slate footer, Prompt typeface at 14-36px, 4px radii and bordered job-row lists.", "sha256": "bfc788655814a7a5b518b5ac22fe13f550e3f0bdd29bb8286b088532f7be2bd5", "bytes": 10916}, + "thailand-board-of-investment": {"name": "Thailand Board of Investment (BOI)", "category": "Thai Brands", "description": "Thailand Board of Investment English site (boi.go.th/en): white canvas with navy #003471 utility bar and footer, PT Sans 16px body and uppercase 18px navigation, blue #0b5aa2 tile strips, 3-10px radii and Material-style card shadows.", "sha256": "a55ef643a9c9da298b1dfb5135e25766b6ab0bcffecbc396e1e94c29e667af39", "bytes": 9301}, + "thailand-education-and-research-network-thairen": {"name": "ThaiREN (Thailand Education and Research Network Association)", "category": "Thai Brands", "description": "ThaiREN association site (thairen.net.th): white page with navy #000033 Tahoma text at 14px, orange #ff6600 title and #e98236 links, gray #cccccc rules, square corners and a single narrow centered column in a legacy 2000s style.", "sha256": "c60eed20f23a1d24ee542bce4657029a4d080a6da7d11a653bd3da159ed2c228", "bytes": 9135}, + "thailand-internet-exchange-th-ix": {"name": "Thailand Internet Exchange (TH-IX)", "category": "Thai Brands", "description": "Neutral internet exchange of Thailand: NT type at weights 400 and 700, white canvas #ffffff, gray ink #4f4f4f, slate #52595f buttons, yellow-orange accents (#ffa800, #ffd100), 15px button radius and 40-50px card corners.", "sha256": "cea7d6ff876267c14558d40323ae757d8dc7622651cffad640f20afcb0899f4c", "bytes": 10576}, + "thailand-post": {"name": "Thailand Post", "category": "Thai Brands", "description": "National postal operator portal (ไปรษณีย์ไทย): tahoma, arial at 14px weight 400, white canvas #ffffff, ink #333333, signal red #ff3333 navigation, buttons and footer, 0px button radius with 10px panels, dense Bootstrap-style service layout.", "sha256": "17c1dd8ea93197fb423c0c89802ebf21d7b83572525e8669b0b08c7d0f6379a0", "bytes": 10527}, + "thailand-property": {"name": "Thailand-Property", "category": "Thai Brands", "description": "English-language property portal Thailand-Property (thailand-property.com) for buying and renting in Thailand. Helvetica Neue at weights 300 to 500, vermilion #d6410f search button, green #4fb84f menu bar, deep-blue #004375 promo bands, #527bc0 footer, light #ecf0f1 page tint and mostly 4px corners.", "sha256": "5a53ffb34fecc4afa79bf7186f3639398b327fa42f7ee27bfa84c41220247e2d", "bytes": 10632}, + "thailandpost-mart": {"name": "Thailand Post Mart", "category": "Thai Brands", "description": "Thailand Post Mart is the Thai-language e-commerce storefront of Thailand Post, built on a white page with a signature postal red #e00700, Noto Sans Thai type at 16px body and 80px red display headings, stamp-edged coloured badges, 25px pill category chips and dark charcoal header.", "sha256": "4657ce5b037210bfc93011f08e1423d209c4fcec5efa30ffa07adc7dbbc46ff6", "bytes": 11032}, + "thaipat-insurance": {"name": "Thaipat Insurance (ไทยพัฒนาประกันภัย)", "category": "Thai Brands", "description": "Thaipat Insurance Thai homepage: white and #eeeeee canvas, navy #1a4a88 navigation bar, cyan #28a9e2 tiles, red #dc4637 read-more accent, THSarabunNew headings at 50px and Lato body text.", "sha256": "6b8e5e6f0a17963f0915d03f57463e77a381a8f941840e98a25f41bb1f81206f", "bytes": 12558}, + "thaipbs": {"name": "Thai PBS", "category": "Thai Brands", "description": "Thailand's public broadcaster news portal: DB Helvethaica X and thongterm at weight 500, #fefefe canvas, burnt orange #cc3802 primary, rust #a12c0b links, 3px chips, 100px utility pills and dark flood-coverage bands.", "sha256": "daeff8b4bec47e26fcd58282407e3cffa32e4e1371e0786fb8855cf8d3925512", "bytes": 12042}, + "thaire": {"name": "Thai Reinsurance", "category": "Thai Brands", "description": "Thai Reinsurance (THRE) English homepage: white canvas with gray Arial body text (#6b6b6b), near-black Prompt headings (#1a1110), Red Hat Display hero type at 50px, a yellow (#ffd400) READ MORE button with navy text (#00005a) at 3px radius, dark navy footer (#191d2d) and moody photographic panels.", "sha256": "2ddf50841ea7b108412cdc6d93e5cf651b064df446b1c050946b18d929309674", "bytes": 10494}, + "thaivivat": {"name": "Thaivivat Insurance", "category": "Thai Brands", "description": "Thai insurer (ประกันภัยไทยวิวัฒน์) home page: PSL Kanda headlines and Prompt body at 20px, brand green #00a350, gray text ladder #666666, light band #f1f2f2, 4px and 8px radii, dark #323232 footer.", "sha256": "605a24433a282b3382c7cd89e89d5565311514fc24c29cb6297dcc76459aaffe", "bytes": 9687}, + "thaiware": {"name": "Thaiware", "category": "Thai Brands", "description": "Thai free-software download and IT news site (Thaiware.com): blue #0c78a6 navigation and headings, deep #005377 buttons, white and #f7f7f7 canvas with pale teal #eef5f7 and #edf5f4 cards, Kanit light 15px text, 8px radii.", "sha256": "6791c5f6d7beb12f609abf50f307e58893d36c5fcfd30af45ae8655ff8314506", "bytes": 10102}, + "thammasat": {"name": "Thammasat University", "category": "Thai Brands", "description": "Thai public university home page: Anantasorn Reno, Thammasat and Kanit type, crimson #c11b32 pill button with gold #fad157 text, #f9fafb canvas, #63666a ink, deep maroon #48000a footer, 2px chips and 5px cards.", "sha256": "4f840aff505beadedd4ee729b27a5fa68c73becfe8b15f0edea10033074be5e1", "bytes": 10758}, + "thanachart-capital": {"name": "Thanachart Capital", "category": "Thai Brands", "description": "Thai holding-company investor site in PSL KandaModern and PSL Text Pro: warm near-black #231f20 on white, saturated orange #f27021 rounded panels, peach #fef1e9 sections, #e3e3e3 footer with 48px rounded top, outlined 4px-radius buttons.", "sha256": "2dbe9a08a58791237d929cd52207a805afd9a22968c3daa069cf080eb98119c1", "bytes": 9694}, + "thansettakij": {"name": "Thansettakij", "category": "Thai Brands", "description": "Thai business news publisher (ฐานเศรษฐกิจ): Prompt at weight 700, 34px headlines on white #ffffff, black ink #000000, orange accent #ff8500, rust #dd5521, gray #e2e2e2 category bar and square-cornered image cards.", "sha256": "b5d662d62d445b8d2af9f31a130abd69301b65d4a7f59b4ee00f284ea6cdd697", "bytes": 9581}, + "thappline": {"name": "Thai Petroleum Pipeline Company Limited (Thappline)", "category": "Thai Brands", "description": "Corporate site of Thai Petroleum Pipeline Co., Ltd. (บริษัท ท่อส่งปิโตรเลียมไทย จำกัด) in Prompt only, with a 120px display headline, 18px body, blue #0092df and #2992df on white, footer #1c6ba3, 24px-radius stat cards with #d6d6d6 borders and a soft 9.899px offset shadow.", "sha256": "9a8c95c8e265f13d40a87ef3692e3c252eb485a60fa9582ee367df60b73be7d7", "bytes": 10499}, + "the-atlantic": {"name": "The Atlantic", "category": "News & Publishing", "description": "The Atlantic's site is black #000000 type on a white #ffffff page: AGaramondPro 400 headlines (38px/44px lead, 46px/52px article h1) and 22px/33px article body, uppercase Atlantic Serif section titles (32px, 1px tracking), a Logic Monospace metadata layer for bylines and kickers, Graphik 14px nav, one red #e7131a Subscribe button with 4px radius, 12px-radius colored game cards and a black footer.", "sha256": "9d194e15d5c70222688f78f14f1360090c4b24ee27699e50b928d1c67c9b1683", "bytes": 24055}, + "the-best-you-by-klook": {"name": "The Best You by Klook", "category": "Culture & Events", "description": "Klook campaign quiz microsite: poppins 400/600 and cubano, white canvas #ffffff, off-black #222222 text, embossed pill buttons with 33.33px radius, 8px polaroid cards, over a blue-violet-orange gradient and a 3D boarding-pass ticket.", "sha256": "121cf232da51478963bd259c36dd701e8c188d92b1ea6798bde48ee44e564d35", "bytes": 9003}, + "the-coffee-club-thailand": {"name": "The Coffee Club", "category": "Thai Brands", "description": "The Coffee Club Thailand site - a light-grey (#f3f4f6) and white page with slate (#364153) body and near-black (#101828) Arial headings at 36px bold, orange (#f54a00) hover and divider accent, sand (#f0e6d2) footer, 8px-radius photo cards with a soft drop shadow.", "sha256": "04ca2bf127d99f8d08b873d0eb6094ee2c127fb4278fb7486d6e8f19d31f91b6", "bytes": 9912}, + "the-creative-website-manualtm": {"name": "The Creative Website Manual™", "category": "Business & Corporate", "description": "Editorial web-craft microsite by Huy and Ivor: PPNeueMontreal display with negative tracking, Rand Mono uppercase labels, near-black #070707 stage, #eaeaea ink, amber #ffb700 accent, square panels and pill controls, flat with no shadows.", "sha256": "6037d696898fea095481f428bce0b492b22a7c9343ea729ac872f795474f2394", "bytes": 9929}, + "the-drake-hotel": {"name": "The Drake Hotel", "category": "Food & Beverage", "description": "Toronto boutique hotel and arts venue: Sequel Sans headlines with negative tracking, Maison Mono uppercase copy at 10px, charcoal #222223 canvas, white buttons with 2px radius, boxed outlined headings, wine #672b3c and cream #f0eeeb panels.", "sha256": "c3eead581836565d47a7e76abb6e5f48efc3a6f47c5d77fa738be84750c24bae", "bytes": 10995}, + "the-guardian": {"name": "The Guardian", "category": "News & Publishing", "description": "The Guardian's news front built on its open-source Source Design System: a white (#ffffff) page under a Guardian blue (#052962) masthead, GH Guardian Headline serif at 500/700 (28px/32.2px section and lead headlines, 34px article headlines), GuardianTextEgyptian 17px/23.8px body, GuardianTextSans UI, pillar colours (news #c70000, opinion #c74600, lifestyle #bb3b80), yellow #ffe500 nav hover and pill buttons with radius equal to height (44px / 36px).", "sha256": "2ef55806e3ff6c2f2e49a76748bbc01f95f87c4c480abd5e3be4231ed8cc73a3", "bytes": 26860}, + "the-house-of-wonders": {"name": "The House of Wonders (Audemars Piguet 150 years)", "category": "Business & Corporate", "description": "Audemars Piguet 150th-anniversary interactive microsite: black #000000 canvas, white Helvetica Neue at weights 100 and 300, Times Now italic accents, outlined 9999px pills, 8px cream #fefdf5 panel and five dark room tints.", "sha256": "7f06ed3127a357ccc3f84194e4dbbda75c5523c24123aced485f4a3d7d7bdb0d", "bytes": 9007}, + "the-lookback": {"name": "The Lookback", "category": "Agencies & Studios", "description": "Better Off studio year-in-review microsite entry screen: huge uppercase heavy sans headline at 89.856px with tight 76.3776px line height, mono uppercase index at 11.9467px, black #000000 on white #ffffff, 2.56px to 4.27px radii, no shadows.", "sha256": "b3e09d940fbde86c769d2559f590357ecf82b5ca0b49661558777f3da4c126f5", "bytes": 9304}, + "the-mall-group": {"name": "The Mall Group", "category": "Thai Brands", "description": "Thai retail group corporate site: db_airystd uppercase captions with 6px tracking, SamsungSharpSans-Regular navigation, white #ffffff canvas, #171717 ink, black serif wordmark, hairline #c0c0c0, square content corners, hero photography carrying color.", "sha256": "acd54da784358fcea7274a3d8815fb8eb9209c28a5ec0c3630f3da1803c0568d", "bytes": 8890}, + "the-mall-lifestore": {"name": "The Mall Lifestore", "category": "Thai Brands", "description": "The Mall Lifestore (themalllifestore.com), the Bangkae, Bangkapi, Ngamwongwan, Korat and Thapra mall site — a black canvas (#000000) with white text, pure red (#ff0000) for giant DBAiry_Std display headlines up to 160px, GTFlexa_Ext for body, white 5px-radius buttons, and full-bleed night photography of the malls and their promotions.", "sha256": "f0d2c1bc728925ff5167cd9fd1cc4e958b1b5cd9061b0d8dae4b94b72b615b49", "bytes": 13869}, + "the-matter": {"name": "The Matter", "category": "Thai Brands", "description": "Thai independent news and culture site (thematter.co, tagline 'Make News Relevant'). White canvas with black feature bands, coral-red #ff463d editor's-pick pills and pill buttons (25px radius), headlines in the custom 'The Matter' face at 600 weight (36px hero, 26px card), Poppins uppercase 11px/2px tracking labels.", "sha256": "b4f93998ee2f38fcf3c14a7494665ffc8d51482337afc8e848f2851ede11b004", "bytes": 9739}, + "the-met": {"name": "The Metropolitan Museum of Art", "category": "Culture & Events", "description": "The Met (metmuseum.org): white #ffffff pages with #222222 headings and #6d6d6d text, a serif Austin display headline (66.7981px at 1280px) over Inter UI type on a fluid clamp() scale, Met red #e4002b buttons with 4px corners that darken to #a6192e, #f4f4f4 cards and a deep green #004032 Cloisters panel.", "sha256": "3fe50ba44a25180e9448f061fe731598dbaef207b495e909c1b9d5829f361857", "bytes": 15324}, + "the-momentum": {"name": "The Momentum", "category": "Thai Brands", "description": "Thai long-form magazine (themomentum.co). White canvas, black ink and one pure-blue #0000ff kicker accent; wide-tracked uppercase Wolpe Pegasus labels (24px, 2px tracking), Martini Thai Neue Slab Black story titles (30px), Thongterm body, 9999px circular controls and almost no shadows.", "sha256": "109ae698d10f278f056e65325e5802cef50cddc3ccdf6951b05f451aabd3f284", "bytes": 9667}, + "the-monolith-project": {"name": "The Monolith Project", "category": "Culture & Events", "description": "Scroll-driven WebGL storytelling site, measured on its entry screen: grey #cfcfcf canvas with black #000000 prompt text, beige credit text #ffebbc and #fff6df, red #ff002f variable, BRCobane uppercase 20px display type, square corners and no measured radius.", "sha256": "974dbd6519e7d66988bf78ed9f6064b50bccb7d51b05be3e0ba2b49f6aae81e1", "bytes": 10113}, + "the-nation-thailand": {"name": "The Nation Thailand", "category": "Thai Brands", "description": "English-language Thai news site (nationthailand.com): white canvas with navy #17205c trending and hero bands, royal-blue #1f299a links and borders, Poppins in 300/400/600 plus Buenard serif, 64px capitalised hero headlines, 6px thumbnail radius, round 100% social icons, and a Bootstrap-derived stylesheet.", "sha256": "b4d85eb8b002277a7b4e20ca483e8b2e83486d3f261526320f6ba805f114f2e8", "bytes": 9925}, + "the-new-york-times": {"name": "The New York Times", "category": "News & Publishing", "description": "The New York Times home page (nytimes.com): white #ffffff page, #121212 ink, #5a5a5a summaries, #dfdfdf hairline rules and #ebebeb/#f8f8f8 grey wells; a slate-blue #567b95 square subscribe button and #326891/#346eb7 accents. nyt-cheltenham headlines (24px/300 feature, 20px/700 news), nyt-imperial 14px summaries, nyt-franklin 11px uppercase labels; 3px button shape.", "sha256": "a1ba8577231d8758b748398e0fcb7419c2fd4086cfbe426eca5cf55c670504a0", "bytes": 11825}, + "the-new-yorker": {"name": "The New Yorker", "category": "News & Publishing", "description": "The New Yorker's site is a white #ffffff page with #333333 / #000000 text: IrvinHeadingPro 400 display headlines (36px/40px homepage hero, 42px article h1), TNYAdobeCaslonPro 400 body and promo headlines (21px/31.5px, 22px/28px, 17px/24px summaries), NeutrafaceNewYorker bylines, Graphik 12–13px interface type, a small #0879bf Subscribe button that hovers to #07588b, #db3334 rubrics, 48px pill Listen buttons and black #000000 full-width feature units.", "sha256": "238b89cd977870d9cd095c0e456cfde104f12bd64d362de06d291ba5901d011f", "bytes": 24325}, + "the-obsidian-assembly": {"name": "The Obsidian Assembly", "category": "Business & Corporate", "description": "Private-assembly brand site (obsidianassembly.com): off-black #151415 and warm cream #f1eade surfaces, a white 8px-radius SEEK ADMISSION button, OTJubilee-Platinum display serif with Switzer UI type, translucent white pill tabs and scroll-driven cinematic sections.", "sha256": "2fc8b40798e6a3143bc7f01b526bb91040162d3c512242f6a3c8e68561c65e41", "bytes": 10797}, + "the-one-enterprise": {"name": "The One Enterprise", "category": "Thai Brands", "description": "ONEE, Thai media and entertainment group (theoneenterprise.com/en): white page, black ink and a square-cornered black READ MORE button, db-heavent in weights 100, 300 and 500 with 72px headings, dark #25262a showcase panels, and channel artwork supplying all color.", "sha256": "45ef74b8c1be74784a3b6300382bae94f0f2360ef03ec7c49df844524b7c8166", "bytes": 9674}, + "the-ordinary": {"name": "The Ordinary", "category": "Beauty & Personal Care", "description": "The Ordinary (DECIEM) runs a clinical, near-monochrome Salesforce Commerce Cloud storefront: white #ffffff canvas, #333333 body ink, Raleway at 16px/24px for copy and 36px/700 for section headlines, Geologica 12px/700 uppercase for button labels, square 0px buttons (black #000000 48px modal CTA, #e1ded9-outlined 44px Add To Cart) beside 110px pill outlines, #f8f8f8 product tiles, a black promo bar and a DECIEM brand-switcher strip above the header.", "sha256": "1e2dfe491cfbb771b870b678091eae0f8fab98a830fcf87fb4a8efb4cd525cdb", "bytes": 26027}, + "the-pendragon-cycle": {"name": "The Pendragon Cycle", "category": "Culture & Events", "description": "Promotional site for The Pendragon Cycle: Rise of the Merlin (pendragoncycle.com), a dark #1a1a1a immersive page with warm parchment tan #9c8e7d and cream #fff5eb type in the serif faces LTC Goudy Oldstyle Pro, Gryphius MVB and Antiquarian Scribe, driven by a full-screen sound-enable gate.", "sha256": "48a2ed4aaaedcae2bc93bae0eb25788997fcf3e636a9a1f3ebd777574bf7b449", "bytes": 9126}, + "the-peninsula-bangkok": {"name": "The Peninsula Bangkok", "category": "Thai Brands", "description": "Peninsula Hotels riverside flagship in Bangkok (peninsula.com): white canvas, bronze #867050 square-cornered RESERVE buttons, Minion Pro 44px display serif with Futura Book at 18px, soft #f9f9f9 booking panels and warm heritage photography.", "sha256": "aa0304340c5e9531f0f70ab4ef8bff1d4c646ceecd918893cb0bcd8bbef88d43", "bytes": 10339}, + "the-pizza-company": {"name": "The Pizza Company", "category": "Thai Brands", "description": "The Pizza Company 1112, Thai pizza ordering site (1112.com/th): white and #f2f4f7 surfaces, brand green #00794e buttons with 16px and 12px radii, red #e70000 deal flags, FC-Iconic Thai display type in five weights and soft 4px card shadows.", "sha256": "c10b3526cf52864c403f18bf2bded0a07961b4a261353dde9feac379ece51cfd", "bytes": 11007}, + "the-power-of-storytelling": {"name": "The Power of Storytelling", "category": "Agencies & Studios", "description": "Noomo agency microsite The Power of Digital Storytelling (storytelling.noomoagency.com): periwinkle #c4c5f1 canvas, navy #29345a ink, a 249.6px TheSeasons italic title and TTNeoris sans at 66px with tight negative tracking, pill radii and translucent white overlays.", "sha256": "3a8104c4bd2db7468193e52bcf837ef8256d493aa851f0eb55e19cd9b38c3cc8", "bytes": 9821}, + "the-standard": {"name": "THE STANDARD", "category": "Thai Brands", "description": "THE STANDARD Thai news and business media (thestandard.co/homepage): white canvas, black ink, pure red #ff0000 MORE buttons with 3px radius, Kanit 700 headlines at 26px and 22px, Helvetica Neue 14px navigation, black feature bands and 4-up card rails.", "sha256": "f9bf4b894fbdf67cbd010247043ab8c288004a5e7d7eefe4c4e909f4e2ab60e7", "bytes": 9490}, + "the-state-of-the-gallery": {"name": "The state of the gallery", "category": "Tech & AI", "description": "mesh3d microsite The state of the gallery (mesh3d.gallery): blue-black #08090d canvas, pale #cfdee5 text, a single neon #ecff3e Browse the gallery button with 19px radius and glow, 200px overusedGrotesk counter numerals and Geist 600 labels.", "sha256": "6c589cc47edbd157029a65168f0b527c08e1aae80652ea615479c08f2911bf65", "bytes": 8839}, + "the-symphony-of-vines": {"name": "The Symphony of Vines", "category": "Business & Corporate", "description": "Cinematic, sepia-toned wine storytelling site for Chateau Oublié: PalaceItalic display at 105px with -4.5px tracking, Bellefair serif body at 24px, parchment canvas #f4f0ec, dark olive ink #332f22 and an aged-gold accent #9c6e49, with zero-radius surfaces.", "sha256": "677e2270988d1228b2629a7107ea979aa0eb27f44df7deaf78470b5df608d1c8", "bytes": 9211}, + "the-washington-post": {"name": "The Washington Post", "category": "News & Publishing", "description": "The Washington Post home page (washingtonpost.com), built on the Washington Post Design System (WPDS): white #ffffff page, #2a2a2a ink, #595959 summaries, #111111 strong text, a blue #166dfc pill Subscribe CTA (hover #1366b3) and #e7f0fe CTA container. Postoni 700 headlines at 26px, ITC Franklin 300/700 for summaries and UI; 9999px pills, 0.1-alpha outlines.", "sha256": "87c2623bbb5cc33b7717ecef4051c64a69e9f6b7432a11b761d4e58b61fd17a1", "bytes": 11644}, + "the-watch": {"name": "FS 60P by 60fps", "category": "Business & Corporate", "description": "Monochrome single-product site for the FS 60P automatic watch by 60fps: Nekst uppercase display at 311px, Inter micro body at 10.67px, canvas #ebebeb fading to black #0a0a0a, near-zero chrome and radii of 4px, 5px and a full circle.", "sha256": "dce0d898de02e64a6ca5675cdf731962974162aa1b3f8f2494bbf5138581d36e", "bytes": 9427}, + "the1": {"name": "The 1", "category": "Thai Brands", "description": "The 1 (the1.co.th), Thailand's loyalty-points app site — near-black canvas (#0a0a0a) with off-white text (#f5f5f5), a single signal red (#dd1a22) on 3.56px-radius download buttons, the proprietary the_one_official family in Light, Regular and Bold, and phone-mockup storytelling in a Thai-first, app-download-led layout.", "sha256": "97f9a4dd540abae1e3ba7b4a3d8d742df07ade86d91fb7ba8249bdf39d0dff66", "bytes": 13524}, + "thelinestudio-com": {"name": "THE LINE Studio", "category": "Tech & AI", "description": "Animation studio in London with a loud, oversized-type look: DenimWeb in weights 300 to 500 from 8.9px captions to 155.6px headings with negative tracking, off-white #f8f8f8 and #dddee2 canvas, near-black #0b0b0b ink, signal red #ff391e and zero radii.", "sha256": "918c305effe7bcaf614200571b8bb97005cdd26c46d238656acdc6eb04d5abe0", "bytes": 10442}, + "theme-ui": {"name": "Theme UI", "category": "Design Systems", "description": "Theme UI documentation home: white canvas, black ink, primary #3333ee, secondary #111199 and accent #660099, system-ui headings at weight 800 (32px sections), black 56px buttons with 6px radius, flat #f6f6f6 code panels and a node-graph illustration.", "sha256": "30d4d407a288ac0dd6ccd080aba2951c16e2c8f74260962c9b6b1ec7919acc8a", "bytes": 10882}, + "thermo-fisher": {"name": "Thermo Fisher Scientific", "category": "Healthcare & Wellness", "description": "Thailand storefront of Thermo Fisher Scientific: Helvetica Neue at light 100 weight 50px hero and 16px body, white canvas, charcoal ink #222222, brand red #e71316 for primary buttons, link blue #0071d0, 3 to 4px radii and a single soft card shadow.", "sha256": "8e793f07d6cc352aaf28e6b7be1d973f59bb76272bbb7d3318fdea9be2df523a", "bytes": 11501}, + "theverge": {"name": "The Verge", "category": "Media & Consumer Tech", "description": "The Verge's homepage is a tech-news magazine in a white canvas with near-black #131313 headlines, grey #4a4a4a serif body copy, one electric violet #5200ff for actions and bylines, and a 90px Manuka condensed 900 headline set against FK Roman and PolySans.", "sha256": "73d38a3940beaac4f2bd4e5701cb4c0998cbe88c72d5fd39de671a53f32a1ec5", "bytes": 12292}, + "things": {"name": "Things", "category": "Productivity & SaaS", "description": "Cultured Code's Things site sets everything in the system UI font (ui-sans-serif, 20.25px/26.325px body, 36px/700 section titles) in #303336 and #44474b on a cool #f2f5f7 page with #ffffff panels, #5c9cf5 blue text links that gain a 20% blue fill on hover, 18px-radius platform cards and soft two-layer shadows.", "sha256": "8ebac92d24f607d27edf4839d24da27440778dc91596e88877c0bb2e4562925f", "bytes": 12869}, + "thitikorn": {"name": "Thitikorn", "category": "Thai Brands", "description": "Thai consumer-finance site in Prompt: white #ffffff page, #6e6e6e body copy, lime #5dc100 navigation and headings, #008452 green footer with #ffffffcc text, #025454 deep teal accent, circular badges only and no shadows.", "sha256": "de3939dc8d59f24a6bea6daa56b57e1b67922c431afaf5b6bc9fcbfce67c4b94", "bytes": 10071}, + "thoresen-thai-agencies-public-company-limited": {"name": "Thoresen Thai Agencies (TTA)", "category": "Thai Brands", "description": "Investor-facing home page of Thoresen Thai Agencies (TTA Group), Thailand: Manrope with Kanit fallback at 16px weight 500 body, 32px uppercase hero, white canvas, grey ink #464646, corporate blue #125bb2 with a green gradient brand field, 16px card radius and soft deep shadows.", "sha256": "cae4f62d86c5645d7d76f91591a92252663841212001d8d1137339b21fdab3b3", "bytes": 10924}, + "thorgal": {"name": "Thorgal", "category": "Culture & Events", "description": "Official French-language site of the Thorgal comic saga: Artifex Hand CF uppercase display at 75.2px and Mulish navigation at 10.5px, page-body canvas #efeeed, near-black ink #22201d, sand gold #b8a88a, a 3.5px-radius dark Découvrir button and a #1a1a1a menu panel.", "sha256": "7f8b3392c29547373d2b2e2aabb62763b06777cb9a9df5cf002890bd5f44d854", "bytes": 10741}, + "thumbtack": {"name": "Thumbtack", "category": "Design Systems", "description": "Thumbtack's home-services marketplace homepage pairs the Rise typeface (weights 400 and 700, variable up to 900) with a deep navy pill CTA (#07344a), a measured cyan accent (#009fd9), white and #fafafa surfaces, 16px-radius photo cards and a 48px display headline at -0.96px tracking, all on the Thumbprint design system's --tp- CSS variables.", "sha256": "f3a566ce79ddcc370793cb80af59310f039b9675cdd659380461aeabf46a0e1c", "bytes": 13090}, + "tiffany-and-co": {"name": "Tiffany & Co.", "category": "Luxury", "description": "Tiffany & Co. (tiffany.com, US storefront): white #ffffff canvas with black #000000 ink, a Tiffany Blue #81d8d0 announcement band, a light-champagne #fbf9f7 footer and champagne #f4f0ea square (0px) uppercase buttons. Sterling SSM serif headings (28px/500 hero, 32px/325 section) over Santral Book sans body at 13–16px; focus and hover use the accessible teal #009cad.", "sha256": "fd015b54207e4b603b7df8bca2805bbcd393c6c0dc969031fcc2de6828110d7e", "bytes": 14438}, + "tiktok": {"name": "TikTok", "category": "Product & SaaS", "description": "TikTok logged-out feed: a white #ffffff shell around a portrait video, TikTokFont type at 12-17px (15px/500 labels, 14px body), black #000000 navigation and one hot pink-red #fe2c55 pill button 32px tall with a #ea284e hover.", "sha256": "cd4de89cd2090bd1efcc703c122f9c2baa0311f4537819ba0125fb1979890225", "bytes": 9925}, + "tilda": {"name": "Tilda", "category": "Design & Creative Tools", "description": "Tilda's site uses its own open-licensed variable Tilda Sans at weight 300 for most text (16px/24.8px body, 72–78px light headlines) and 600 for the 46px hero, black #000000 ink on white with #efefef illustration panels, square 0px-radius #fa8669 coral buttons (hover #ff7a5a), and line-art illustrations in coral #ffa282.", "sha256": "f6796d60316f13176dc0b1fad7beb6ba4017c8c27cec3a842b62912f43eb03fc", "bytes": 12554}, + "tinybird": {"name": "Tinybird", "category": "Backend, Database & DevOps", "description": "Tinybird's site is a terminal-styled dark page: #0a0a0a canvas, white Roboto 64px/72px headlines at -1.28px, Roboto Mono for buttons and labels, a square-cornered (0px) neon-green #27f795 CTA with #0a0a0a text that hovers to #008060 with white text, and #151515 cards outlined in 1px #353535 at 4px radius.", "sha256": "779fa320aafd60a4d06219ecf746811e6cb75d4cb95983c20116aa07d03cfa42", "bytes": 11673}, + "tiparos": {"name": "ทิพรส (Tiparos)", "category": "Thai Brands", "description": "Tiparos fish-sauce brand site by Tang Sang Hah Co., Ltd. - a white page under a solid red (#e22626) header band, navy (#1e3d7c) headings, yellow (#ffdd00) accent, set entirely in the Kanit family (SemiBold 28px h1, Regular 18px body) with 5px/10px/pill radii.", "sha256": "7ee7c1a494b28ca5d928fbe43c2fd70b909f6c446cbeed24f8cf524d70205be2", "bytes": 9650}, + "tisco": {"name": "TISCO Bank", "category": "Thai Brands", "description": "Thai bank TISCO's English home page: TISCO_AD typeface at 16px body and 26px headings, brand blue #1369b0 used for ink, headings and the 36px-high e-Service button (6px radius), white and #fafafa canvas, charcoal footer #212121 and hairline #dee2e6 table rules.", "sha256": "69052c89df25f47c51354bcbcf2083fd8de2f65a4fe7aa16c247b4ddf81726ff", "bytes": 9256}, + "titangate-equity": {"name": "TitanGate Equity", "category": "Tech & AI", "description": "Dark, invitation-only private-markets site: black canvas with white Fellix display at 87.04px and 32px body, PP Supply Sans mono-style uppercase labels at 12px with 3.2px tracking, a translucent white button (#ffffff1a, 2.4px radius) and ghosted greys #606060 and #202020.", "sha256": "944cff774b39f6194999722e200353b84bc0a64273978fc9b4d179240e54371d", "bytes": 10522}, + "tldraw": {"name": "tldraw", "category": "Design & Creative Tools", "description": "tldraw (tldraw.com), \"very good free whiteboard\": an app-first page on a #f9fafb canvas with #fcfcfc floating panels, Inter 500–700 UI labels at 12px/19.2px in #1c1c1c, a #3182ed selection blue for the Sign in to share button and active tool, 9px–11px panel radii, layered tl-shadow-2 panel shadows and a 12-colour shape palette.", "sha256": "4e81b7761ed9b716c1e382a8b6acbcee8953cf451686a4d1b059e22ddc690695", "bytes": 12284}, + "tnn": {"name": "TNN Thailand", "category": "Thai Brands", "description": "Thai news channel TNN's home page: True family Thai typefaces (Bold, Medium) at 21 to 22px body and 40px headings, white canvas, charcoal ink #333333, TNN orange #ec5f27, ticker and card surfaces in #f5f5f5, with pill 100px and 8px radii and a black mourning band.", "sha256": "278a715bd9b9c0623541949c5c7dd4c9bc3d07120c6aa1d9cf0530719f721889", "bytes": 12804}, + "todoist": {"name": "Todoist", "category": "Productivity & SaaS", "description": "Todoist's marketing home: warm near-white #fefdfc canvas with peach #fff6f0 panels, Todoist red #e34432 Start for free buttons (hover #cf3520) with 15px and 8px corners, warm-black #25221e text at 66% alpha for body, Graphik 600 headlines at 55px over Inter 500 body at 20.5px, soft #25221e-tinted shadows.", "sha256": "ab070aaa799daf2b047585a5f90a03c5b9d3d8d6e75bef42f9d427de487f71e7", "bytes": 14652}, + "together-ai": {"name": "Together AI", "category": "AI & LLM Platforms", "description": "Together AI's marketing site sets \"The Future\" (a Futura-inspired geometric sans) at 56.8889px/500 on a pale-blue-to-white canvas, with black #000000 uppercase mono buttons, a deep navy #010120 research band, and lilac, cyan and magenta accents lifted from its own CSS variables.", "sha256": "8421445b6229ba45fad9078f842f7b66bf9c4df74f2217c6d1123ac8dccba144", "bytes": 12296}, + "tohome": {"name": "Tohome.com", "category": "Thai Brands", "description": "Thai online IT and gadget retailer (tohome.com): indigo #241f61 and #282467 header and buttons, white and #f8fafc canvas, red #dc2626 flash-sale and #e11d48 price accents, Anuphan typeface up to weight 900, 16px cards and pill inputs.", "sha256": "21a007fd76cffc43fb482435d712aab21f0b08ea4e69dd86d2852edeed9bd6b0", "bytes": 11340}, + "tokio-marine-thailand": {"name": "Tokio Marine Thailand", "category": "Thai Brands", "description": "Thailand English page of Tokio Marine insurance: Lato (Regular, Medium, Semibold) at 16px body and 48px hero, white canvas, deep teal ink #022b39, primary button #00546c and secondary #33abba as 1000px pills, 16px cards with a 0.1 alpha shadow and pastel category chips.", "sha256": "4c68e1bad9f66c8c0f9f5fe6fbe5970b31d573fa2240f67af81d7085fb3986c1", "bytes": 10923}, + "tonson": {"name": "Tonson Group", "category": "Thai Brands", "description": "Monochrome Bangkok investment-company site in Nord and Questrial: black #000000 header, charcoal #111111 sections, white #ffffff content, #b3b3b3 grey accent, 93px uppercase headlines, 60px-radius pill buttons and photography-led color.", "sha256": "2b3134dc47c5098901da8e9b665b42ec1ab4d85eacbccdba1da3a464e7cc1434", "bytes": 9885}, + "top-news": {"name": "TOP NEWS", "category": "Thai Brands", "description": "Thai online news outlet TOP NEWS: Kanit headings at 32px weight 500 and Sarabun body at 14px, white canvas with near-black ink #1b1b1b, a saturated blue headline band #1068b2, grey top bar, black footer and rounded 5px, 25px and 50px chips for LIVE and read-all links.", "sha256": "d4ab20af9481eba80b3247733bf34788f03fee6c3010a0ef9465f50316f081af", "bytes": 11249}, + "tops": {"name": "Tops Online", "category": "Thai Brands", "description": "Thai grocery delivery storefront Tops Online (English): IBM Plex-style ibmregular and ibmsemibold at 16px body and 28px headings, white canvas on a #e3e4e3 page, ink #121212, Tops red-orange #ff3d1c buttons and a #f70405 header strip, 6px to 12px radii, gold Tops Prime Plus card.", "sha256": "48d8348f35fa24ddfd6913e862acf0768a00fdf314a464d160f4d5715a53b2ff", "bytes": 11750}, + "totalenergies": {"name": "TotalEnergies", "category": "Energy & Climate", "description": "TotalEnergies corporate site: white and pale blue-grey canvas, slate ink #374649, signature red #e70000 on outlined pill buttons (80px radius), Nunito headlines over Roboto body, 20px-radius photo cards and a Bootstrap-derived CSS base.", "sha256": "d8ba639b2fbc84cf4d628a183460fe58ff35ee54e33ca9b5b6609910cf23d5f5", "bytes": 10917}, + "toyota": {"name": "Toyota", "category": "Automotive", "description": "Toyota USA homepage system: white #ffffff canvas with #000000 text, the brand red #e10a1d (measured link colour, matching the logo in the capture), tcomMed 48px display headlines, white pill buttons over full-bleed vehicle photography, and muted olive-grey #969688 vehicle cards with 8px to 50px radii.", "sha256": "4c2dc3b2d64ad6e1b879ee1dfd78ac569f3a7fddc11de96b77d779400fbeb1f6", "bytes": 9842}, + "tpc-power": {"name": "TPC Power Holding", "category": "Thai Brands", "description": "TPC Power Holding (tpcpower.co.th), a Thai holding company for biomass and other renewable power plants, uses a white canvas #ffffff, gold #c39831 and #bb8e25 headings and pills, lime #a3b808 secondary buttons, grey #666666 body text and a #313131 footer, all in Prompt with 30px/500 headings and 30px-radius pills.", "sha256": "be13965cc14fd131315ac2cd1df234c0cf655f29d7fec3ef53c70cdf55412667", "bytes": 10610}, + "tpi-polene-power": {"name": "TPI Polene Power", "category": "Thai Brands", "description": "TPI Polene Power Public Company Limited Thai homepage (tpipolenepower.co.th/index.php/th/): Athiti typeface at weight 300 and 16px body, 46px/600 centered hero title in slate #2f3f54, #f7f7f7 canvas, ink #090e1d, navy #19283f footer, amber #f6bf1f link hover, a saturated blue header band and square corners throughout.", "sha256": "54ba13e2a312102d36e242f92f5f3938baaf735c1d5b8c0a5155a2ebf977a862", "bytes": 9502}, + "trainline": {"name": "Trainline", "category": "Logistics & Mobility", "description": "Trainline (US English site): Trainline green #00a88f with deep navy #160078 headlines, charcoal ink #192325, TLCircular 700 display type, 4px-radius buttons, an 8px-radius floating search card with a 16px shadow and a partner-brand navy band.", "sha256": "0829edcf7e239050be19942a7e01ed599ab8334bcea3977b1f0ac3ab2251c917", "bytes": 13259}, + "traveloka-thailand": {"name": "Traveloka Thailand", "category": "Thai Brands", "description": "Traveloka Thailand (en-th) travel marketplace: white canvas, charcoal ink #434343, Traveloka blue #0a9af2 buttons, orange #f96d01 prices, Godwit typeface at 600 weight, 10px-radius deal cards with a soft 4px 10px shadow and 999px pill filter chips.", "sha256": "6f90aebfd8a00c06c81025506829a66a612a3ea8cd7822ad0c47ad30584c8dfe", "bytes": 10560}, + "trawelt": {"name": "Trawelt", "category": "Architecture & Interiors", "description": "Trawelt, a Salesforce consultancy for travel and hospitality: black canvas with white text, mint #d3ffc3 navigation and CTA, forest green #2d9b4c ticket cards and footer, Labour Grotesk 400 with Reckless Neue 250 serif accents and 10px/15px radii.", "sha256": "88864125fe6aa5d74f1df19bc9fcfb00006045a4ad9b1805900af3aee5209e6e", "bytes": 10642}, + "trek-bicycles": {"name": "Trek Bicycles", "category": "Sports & Fitness", "description": "Trek Bikes US storefront: photo-led hero and category grid on white, black #000000 text, white 8px-radius uppercase Roboto 500 buttons over imagery, #1a1a1a header and #2b2b2b footer, Avalon-Bold headlines at 34.29px and 10px-radius image tiles.", "sha256": "7677837673690296d84921009c17388fb076d69fdfc95433f492eef4e940ad0d", "bytes": 10680}, + "trello": {"name": "Trello", "category": "Productivity & SaaS", "description": "Trello's marketing home (an Atlassian product): white #ffffff and #f4f5f7 grey bands, Atlassian blue #0065ff buttons (#0747a6 hover) and a full-width blue section, #091e42 navy text, #172b4d navy footer, Charlie Display 500 headlines at 48px/60px over Charlie Text 20px/30px body, square 0px header CTA and 4.8px form corners.", "sha256": "13b5b9ad5623c6238ba629ace64aa85523d696f78e2e975a082491a2304fb2a1", "bytes": 13740}, + "tremor": {"name": "Tremor", "category": "Atomic CSS & Utilities", "description": "Tremor is an open-source React and Tailwind CSS kit for charts and dashboards; its site and components use Geist Sans, a white canvas, near-black #101828 headlines, a #2b7fff blue primary, 6px-radius controls with #d1d5dc borders, and soft layered card shadows.", "sha256": "fe99b2370dd53fa0ed324044c79e14dbc2da0f27db7cdbc453b4308d9a80f8e4", "bytes": 13539}, + "tresmares-capital": {"name": "Tresmares Capital", "category": "Tech & AI", "description": "Tresmares Capital, a pan-European private equity and financing firm: white canvas, charcoal ink #2b2b2b, PP Neue Montreal 500 with a 149.34px tightly tracked hero, red #e41613 PP Fragment Serif statistics, square corners, hairline #d5d5d5 boxes and no shadows.", "sha256": "a796c48f616315324b170e937d5c0e5c1aec158dcd8cca38a41d7f3e92b03e68", "bytes": 10264}, + "trevor-noah": {"name": "Trevor Noah", "category": "Culture & Events", "description": "Trevor Noah official site: deep navy #1d2440 canvas, cream #f9fcf4 text and Get Tickets pill, pink #ff9bb4 accent, Die Grotesk C/D at 89.74px headlines, clip-path pill buttons and fluid clamp() type.", "sha256": "f07019f739434e63d645691bb830963ffd8b936867660a5181b85c232febc81a", "bytes": 11093}, + "triggerdev": {"name": "Trigger.dev", "category": "Developer Tools & IDEs", "description": "Trigger.dev's site is a dark developer page on charcoal #121317 with dimmed #878c99 body text, Satoshi-Variable 60px/600 headlines, Geist UI text and Geist Mono code, a square-cornered apple-green #a8ff53 CTA with #121317 label, 4px controls, 6px cards and #1c1e21 hairline borders.", "sha256": "a84a3363631957bd489372e21552ad8e967592706a2634a41d0fb4dce4821911", "bytes": 13054}, + "trionn-2": {"name": "TRIONN", "category": "Portfolio", "description": "TRIONN, an independent digital studio: near-black #0c0c0c canvas with #d8d8d8 text, familjen display at 80px with -4.8px tracking, neueHaas body, martianMono uppercase links, a white pill LET'S TALK button and 6.4px-radius dark cards with no shadows.", "sha256": "663a91402c408ebfcecc1784fc1394547fa61f7a019657e7329ebaef17efcd00", "bytes": 10925}, + "tripcom": {"name": "Trip.com", "category": "Travel & Hospitality", "description": "Trip.com US home page: Trip Geom 400/500/700 throughout, 40px bold white hero headline, #121826 ink on #ffffff with #f5f7fa footer, Trip blue #2c61fe buttons with 4px corners (hover #2953d6), 48px search button, 8px-radius cards with soft navy shadows, #fcc8d0 coupon borders, #2346ff app-promo band and #c74401 badges.", "sha256": "c5fdf84ec50880ec15c885e290d830af9fe6edcb17fc7ec5631f6ab1e387d6b1", "bytes": 12569}, + "truckn-roll-r": {"name": "Truck'N Roll", "category": "Product & SaaS", "description": "Truck'N Roll entertainment logistics: #131313 near-black canvas with #fefefe text, electric violet #4e37ff accent, National 2 Condensed 900 uppercase headlines at 200px, Helvetica Now Display body and a 12-column grid with 8px and 14px radii.", "sha256": "41a43b186ef3454b320ce6d9e7d628e9af05a553557c56fc803f5ad25d858653", "bytes": 10390}, + "true-corporation": {"name": "True Corporation (True-dtac)", "category": "Telecom", "description": "True Corporation Thai home page (true.th, True-dtac): white and #f9f9fc canvas, True red #e00000 pill buttons with 100px radius, slate ink #303c46, BetterTogether typeface, 24px-radius cards with a soft blue-grey shadow and a 60px-radius search field.", "sha256": "be3c42b1b7caa1d8a46c34bb32b66373212a02697bf86eb0afc128d07a22c250", "bytes": 10569}, + "true-digital": {"name": "True Digital Group", "category": "Thai Brands", "description": "True Digital Group (English site): white canvas, gray #6b7280 body text, True red #ca0008 for emphasis words and numerals, Satoshi with IBM Plex Sans Thai fallback, white pill LEARN MORE buttons with a blue and pink glow shadow and 8px-radius bordered cards.", "sha256": "a306f660c05f35254d0310bd37a7ae732e8098baa90bc2ee95c5299fd05cc50d", "bytes": 11430}, + "true-spark": {"name": "TrueVisions NOW", "category": "Thai Brands", "description": "TrueVisions NOW (truevisions.co.th, operator site measured for True Spark): near-black #0f0f0f pages with white text, magenta #e31d93 header and #f341b4 pill CTAs, Better Together typeface, 20px-radius poster tiles and 12px-radius white buttons.", "sha256": "46cce7427e3fd0fdc9a0db2be9553c55613fba6d46bc2eb90fdb3b1eb964bdc8", "bytes": 11472}, + "truemoney": {"name": "TrueMoney (ทรูมันนี่)", "category": "Thai Brands", "description": "TrueMoney Thailand home page: white canvas (#ffffff) with navy ink (#0e162c), a single orange accent (#ff5a00) used for pill-shaped outlined buttons (9999px radius, 48px high), peach cards (#ffede2, 24px radius) and the graphikth Thai/Latin typeface at 400 and 600 weights.", "sha256": "33d6731f35ec681b143897843599a7cbb49abf1b69954d44ad480e2301eef25d", "bytes": 14701}, + "truus": {"name": "Truus", "category": "Portfolio", "description": "Truus, an Amsterdam advertising agency: warm off-white canvas (#f0ebe6) against pure black, lowercase Epilogue 900 headlines with tight negative tracking (-2.56px at 85.33px), DM Sans 400 body at 17.78px, Lora italic accents, and bright pops of blue #4b69f0, berry #a0325a, lilac #f0befa and orange #f5693c.", "sha256": "2550a0bba51a6e721eac12a3b81a07b8241bd260f17b349363c4bc67bad77c0c", "bytes": 11407}, + "tsmc": {"name": "TSMC", "category": "Consumer Electronics", "description": "Taiwan Semiconductor Manufacturing Company home page: Roboto in 400 and 500 on white (#ffffff) and light grey (#f2f2f2), charcoal text (#333333), a slate band (#3c4854), and a single crimson accent (#b32a2a) for the job-search button and LEARN MORE links, with 100px pill outlines and 5px radii.", "sha256": "98bf0bef8ebeeff196532233ead40aab7397c3ca2c52f3cb2798cf6a6d75b38f", "bytes": 10572}, + "ttb": {"name": "ttb bank (TMBThanachart Bank)", "category": "Thai Brands", "description": "TMBThanachart Bank (ttb) English home page: navy #002d63 and #0d2d5e chrome, a full-bleed orange hero (#f68b1f, the stylesheet's --btn-primary), white pill-shaped search buttons, the proprietary ttb display face at 68.864px weight 600 and Ekachon for text, with 24px card radii.", "sha256": "b78660bfb17ce3efee1fcae00d91e234821f16ea03703d498542cc71d54cc5e7", "bytes": 11218}, + "tukcom": {"name": "Tukcom", "category": "Thai Brands", "description": "Tukcom is the Thai IT and family shopping-mall brand; its site pairs a full-bleed aerial mall photograph with Montserrat 800 white 40px headlines, Open Sans 14px body, a white header with #2ea3f2 navigation, a 79px-radius outlined More Info button and black and #222222 footer fields.", "sha256": "845b061996143e4cf95a3afdda6fe90314a4914597b0514a41740d2556119ea4", "bytes": 10516}, + "tumblr": {"name": "Tumblr", "category": "Media & Consumer Tech", "description": "Tumblr's logged-out explore dashboard — a navy #001935 chrome around white #ffffff post cards, Favorit / Favorit Modern type at 16px/24px, a #00b8ff pill Sign up button with black text, a black #000000 pill on the #7c5cff sign-up banner, 8px card corners and 9999px pills.", "sha256": "3b8601e62fb51178ea0b2061e1dfe7d446b9d4f916ece76c0dfb9a57b993e0f0", "bytes": 16023}, + "tune-protect": {"name": "Tune Protect Thailand", "category": "Thai Brands", "description": "Tune Protect Thailand (ทูน ประกันภัย) Thai homepage: Noto Sans Thai at 16px weight 500 with slate ink (#495057), pure red (#ff0000) accents and a red announcement banner, six outline-icon product tiles at 6px radius with layered Material-style shadows, and promotion cards with text-only action rows.", "sha256": "2666a23446d8825a5415a1e1bae11bf84fa52cc89bc32091eadf40d5d7852e77", "bytes": 10351}, + "turborepo": {"name": "Turborepo", "category": "Developer Tools & IDEs", "description": "Turborepo (turborepo.dev) is a Vercel Geist-system page: off-white #fafafa canvas, GeistSans 64px/450 headline tracked to -3.84px, #4d4d4d 14px body, a near-black #171717 pill 'Get started' button with a white pill 'Read the docs' partner, white 8px-radius cards with #e6e6e6 hairlines, GeistMono terminal snippets and a red-to-blue gradient speedometer.", "sha256": "f42fc13558cfbf729a3f9c014e7bb938e098de3943c2650f7c9e500a329c922a", "bytes": 13259}, + "turkish-airlines": {"name": "Turkish Airlines", "category": "Airlines", "description": "Turkish Airlines' Thailand-English home page: white #ffffff canvas, deep navy #101a2a footer and #232b38 dark bands, signature red #e81932 'Search flights' button (hover #ff3545) with 4px corners, #f4f5f8 grey booking fields 66px tall, and every word in museoSans from 38px/500 headlines down to 11px/700 header links.", "sha256": "ee68ae392159927d5423d468994fa5d55669c4a15cc35574016da5b0334fb942", "bytes": 12908}, + "turn-io": {"name": "Turn.io", "category": "Business & Corporate", "description": "Turn.io home page: a deep forest-green hero (#0a3922) with mint headline (#d2f2e3), a white canvas with pastel feature cards (#e0f6fb, #e4f7ee, 16px radius), a coral pill button (#ff643b, 50px radius, white DM Sans 600 at 18px) and DM Sans throughout, from 80px display to 16px body.", "sha256": "3623ab378744720e33ebc23eb4a7c5836390f4458c7d7d1317f843d1d729cbbd", "bytes": 10826}, + "turso": {"name": "Turso", "category": "Backend, Database & DevOps", "description": "Turso (turso.tech) is a dark Bunker #0d1318 / #0f1317 page with a single accent, Turso Aqua #4ff8d2: aqua pill CTAs (9999px, 12px 24px, 44px) with black labels hovering to #88ffe4, Inter 60px/800 headlines at -1.5px tracking, 50%-white #ffffff80 body text, #283945 hairlines and 12–16px-radius code and diagram cards.", "sha256": "53a49b453a238d68ca5ebff9d6a43a4f94573bc7b81a6651f6c3c6685d691bc6", "bytes": 12326}, + "tv-thunder": {"name": "TV Thunder", "category": "Thai Brands", "description": "TV Thunder (บริษัท ทีวี ธันเดอร์ จำกัด (มหาชน)) home page: white canvas with charcoal text (#333333), a green footer (#126a3c) and green nav hover (#2fc142), uppercase Mitr section titles at 32px and DBHeavent body at 22px, with every element rendering square (0px radius).", "sha256": "da4c66f3ba611b6ba8a8488a84eaef43d4c12d3f89839dc0e9eddc17915df31a", "bytes": 10000}, + "twenty": {"name": "Twenty", "category": "Product & SaaS", "description": "Twenty.com home: light grey #f4f4f4 and white #ffffff grounds with #1c1c1c ink and dark #1c1c1c panels, Aleo 300 serif headlines (60px/66px, -1.2px) mixed with Host Grotesk, Azeret Mono 12px uppercase labels and buttons, square #1c1c1c 'GET STARTED' buttons, 4px-radius cards and an indigo #4a38f5 hover accent.", "sha256": "6ca749aac4d73f0bffa64c942c3975f73dabd9bea4fbcf965ceb7394fa726376", "bytes": 11676}, + "twilio": {"name": "Twilio", "category": "Product & SaaS", "description": "Twilio home page (twilio.com/en-us): a deep navy canvas (#000d25, cards #191f36), white Whitney SSm headlines at 56px weight 700 with -1.68px tracking, an electric blue pill button (#1866ee, 50px radius, hover #0e3e92) and a signature red (#ef223a), with a white header and 20px card radii.", "sha256": "be76898cbcb9cce0a60636849f0225f86d70a4db01ca8ca346317f5db75054f4", "bytes": 10828}, + "twitch": {"name": "Twitch", "category": "Media & Consumer Tech", "description": "Twitch.tv logged-out browse page: light #efeff1 / #f7f7f8 canvas, #0e0e10 ink, Twitch Purple #9147ff pill Sign Up button (hover #772ce8), #5c16c5 link purple, Roobert 18px/500 headings over Inter 14px body, 4px-radius thumbnails, translucent grey #adadb838 tag pills and a #451093 join banner.", "sha256": "2d872532a9e3a6b7377434619733f72463de746c821189e3d97290a13808a9d3", "bytes": 11180}, + "twks-1": {"name": "twks", "category": "Portfolio", "description": "twks, an independent creative agency in Geneva: a stark black-on-white page (#ffffff, #000000, grey #8c8c8c) set entirely in GT Standard, with a 52.8px weight-600 statement headline at -0.528px tracking, 20px body, hairline rules, and every element rendering with square corners (0px).", "sha256": "81329a3ee283e5ccc1ea3877c4de721bbb5f702831cf403f68637e147ebdf249", "bytes": 9232}, + "typeform": {"name": "Typeform", "category": "Product & SaaS", "description": "Typeform's home page is a dark aubergine #2a222b canvas with off-white #faf9fb text, a 64px Tobias serif display headline at -1px tracking, Twklausanne sans for body (20px/24px) and UI, light #faf9fb buttons with #2a222b labels and 12px radius, lilac purple accents (#a25fba, #eccffa) with soft purple glows, and 24px-radius cards on a pale #faf9fb section.", "sha256": "efcbf3dd302db2afe5e5a63272e4f685342615c0fa793363c0803568a63abb00", "bytes": 15893}, + "tyson-foods": {"name": "Tyson Foods", "category": "Food & Beverage", "description": "Tyson Foods corporate home page: warm off-white sections (#fbf9f4, #f3ede0) with slate-grey text (#4a5157), a burgundy primary (#7f091c) on square 3px-bordered uppercase buttons, Sentinel serif headlines at 40px weight 300, Proxima Nova body at 16px, and a brand red (#c8102e) for links and hover.", "sha256": "a72c9529a19a713f0e70bb73bebe7a6d7f6a4a764eddfac8af5aa36d9054af64", "bytes": 10214}, + "u-tapao-international-airport": {"name": "U-Tapao Rayong-Pattaya International Airport", "category": "Thai Brands", "description": "U-Tapao Rayong-Pattaya International Airport website: white canvas (#ffffff) with charcoal text (#222222), deep navy chrome (#010c44 and #000c46), a sky-blue accent (#38a2d2) for heading underlines, Prompt in 300 to 600 weights, and radii from 4px to 30px.", "sha256": "e589b97faec3f08c81364e05ad9696788f3b78449962348fa8c81c1cc32a021a", "bytes": 9462}, + "u-x-machina": {"name": "U x Machina", "category": "Agencies & Studios", "description": "U x Machina, a digital experience studio: a warm cream canvas (#fbf3eb) with dark brown ink (#2e2626), white type over a red-to-orange gradient hero, PP Neue Montreal at 400 and 500 (64.08px display, 24px body, 12px uppercase labels) with Instrument Serif italic accents, and 6px and pill radii.", "sha256": "d332a94e41e917053c75a697879d535142a6fe096fdced4d9084df5711294c85", "bytes": 9181}, + "uber": {"name": "Uber", "category": "Media & Consumer Tech", "description": "Uber's consumer site is a black-canvas (#000000) page with white (#ffffff) Uber Move type, a 52px/700 headline, white 8px-radius primary buttons, light-grey pill secondary buttons (#efefef) and #292929 cards, built on the Base design system's custom-property tokens.", "sha256": "45b55dd55161b5e7e97f2c323b212aae00da921edec075d60c793e84da1d090b", "bytes": 11569}, + "uber-eats": {"name": "Uber Eats", "category": "Logistics & Mobility", "description": "Uber Eats home page measured live: a pure white canvas (#ffffff) with black (#000000) text and black buttons, set in Uber's proprietary UberMove (700, 52px h1) and UberMoveText (500, 16px body), with an 8px-radius search button, 9999px pill header buttons and a warm photographic hero.", "sha256": "259a224d33969dd2c449e20562fbeaba66a8a38d4a073b4037b0e5e3c21f83d9", "bytes": 10208}, + "ubs": {"name": "UBS", "category": "Banking & Insurance", "description": "UBS United States home page measured live: white and warm-grey (#f4f3ee, #f9f9f7) surfaces, near-black #1c1c1c light-weight Frutiger text (300, 48.0048px h1), a single UBS red #e60000 for the Client logins and Find out how buttons, and a tight 2px corner radius throughout.", "sha256": "eaa616887910414760497442c07fb91d4ca8da02f78be67ba38815a10ce51688", "bytes": 10392}, + "uc-berkeley": {"name": "University of California, Berkeley", "category": "Education", "description": "UC Berkeley home page measured live: white canvas with #262626 Inter text, Berkeley Blue #002676 buttons, links, headlines and footer, California Gold #fdb515 as a full-width promotional band and nav hover colour, Inter at weights 400 to 900, and 9px-radius buttons with a 28px search field.", "sha256": "5e31c62d9d58febdb81a274b9e5b35be948fe9656b6e833de05e02422c4cb3cb", "bytes": 10473}, + "udemy": {"name": "Udemy", "category": "Education", "description": "Udemy's marketplace UI as shipped on udemy.com — the proprietary Udemy Sans at weights 300/400/500/700 on a white canvas, deep slate ink #2a2b3f, a single vivid purple #6d28d2 for every action (hover #892de1), 8px-radius buttons at 40px and 48px heights, 1000px pill search field, 16px-radius course cards with a #e9eaf2 hairline, teal \"Bestseller\" tags and a #202230 footer. Colors are authored in oklch as --color-* primitives and --applied-* semantic roles.", "sha256": "d67d2c0f4c10cc0ef7044089b05710ae4ab13fe95389f78308385cd6585df5c6", "bytes": 33075}, + "ufm": {"name": "UFM Fuji Super", "category": "Thai Brands", "description": "UFM Fuji Super, a Bangkok Japanese-style supermarket whose tagline is Thai Smiles Japanese Styles, pairs a warm cream canvas (#fef8eb) with a tomato-red main color (#e84e40), a leaf green accent (#88c640), Kalam handwriting headings at 46px and Poppins body text with Noto Sans Thai fallback.", "sha256": "117b1dd73ed714069ea008595bb2cb3f4317e28b0dbf24d4e29abdb874925462", "bytes": 10753}, + "ui-kitten": {"name": "UI Kitten", "category": "Design Systems", "description": "UI Kitten docs home: Docusaurus page with an orange #ff6721 hero, ink #1c1e21 system-font headings at 48px weight 700, pale #ebedf0 buttons with 6.4px radius, #f6f7f8 code box and a #303846 navy footer; documents an Eva-based React Native library.", "sha256": "029bbe01fc8ac2f096dd87b46fe83a86b12803bbbcb7dacef47564f3c0609363", "bytes": 11068}, + "uizard": {"name": "Uizard", "category": "Design & Creative Tools", "description": "Uizard's uizard.io marketing site (now branded 'miro | LABS'): a black #000000 canvas with a violet glow, near-white #f5f5f5 Satoshi text at weight 480, ClashGrotesk 72px headlines, brand Blue #1e90ff for the Sign up CTA, lavender #a881fe for AI actions, 16px-radius dark cards with #2e2e2e borders, and 8px-radius buttons.", "sha256": "6094a04a2ebb17f047571212910e65fd7144607db9ad49a792e0f342972f6e64", "bytes": 11957}, + "ulta-beauty": {"name": "Ulta Beauty", "category": "Beauty & Personal Care", "description": "Ulta Beauty home page measured live: white canvas with warm greys (#f8f5f2, #eae5e1) and black #000000 Circular text at light weight 300, black pill buttons with 100px radius and 40px height, a magenta #cc0058 price accent, 8px card radius, and saturated pink and orange promotional bands.", "sha256": "2cc1820e5bf57c8ddfeacea633085036765f5bd5ca59ff7c5fcf4ce6a34de2fa", "bytes": 9883}, + "umami": {"name": "Umami", "category": "Product & SaaS", "description": "Umami's open-source analytics site: a #fafafa page with white 6px-radius cards and #e5e5e5 borders, Inter throughout (72px/700 headline at -1.8px tracking, 18px/28px grey #838383 body), #202020 and #0a0a0a ink, and a single blue #2b7fff for buttons with 8.4px corners, tracked eyebrows and charts.", "sha256": "6ebca88bb6829a59d31e4752412be17fb775fe998495a5915aab377e87bfc8d8", "bytes": 14844}, + "under-armour": {"name": "Under Armour", "category": "Sports & Fitness", "description": "Under Armour US home page measured live: near-black #1d1d1d header and text on white, grey #f0f0f0 footer, NeuePlakUA in 800-weight uppercase at 64px with 2px tracking for hero headlines, white pill buttons (44px, 9999px radius) over photography, and a #00834b green for promo notes.", "sha256": "a5166866816d8e2c31b22c07df9805a66eb3261b2d3686c696dae9f0a7540322", "bytes": 11364}, + "unesco-stolen-objects-museum": {"name": "UNESCO Virtual Museum of Stolen Cultural Objects", "category": "Culture & Events", "description": "UNESCO Virtual Museum of Stolen Cultural Objects (museum.unesco.org), measured as its entry screen: a pale cloud-photograph canvas (#ece2db), dark brown #442d26 text, a salmon-pink #cb8d79 title line, Unbounded 40px display type with -2px tracking, Inter 16px body, and a pill-shaped Visit now button.", "sha256": "53dab05166ecf6a0f217159186debf8a45f3e3605a21affa7b26a3c26f3a1df2", "bytes": 9351}, + "unhcr": {"name": "UNHCR", "category": "Government & Nonprofit", "description": "UNHCR, the UN Refugee Agency (unhcr.org): white #ffffff and light grey #f5f5f5 bands, black #000000 text, UN blue #0072bc for navigation, hero and help actions, a yellow #faeb00 DONATE button with #212529 label, charcoal #343a40/#333333 emergency and footer bands. ProximaNova 400/700 — 42px hero, 32px section titles, 18px/25.2px body — with 4px button and 8px card radii.", "sha256": "072edadd1bb24a31813dbd820a35f5c64dd73994e3645a58f8eb2f13641e871f", "bytes": 12833}, + "unicef": {"name": "UNICEF", "category": "Government & Nonprofit", "description": "UNICEF.org: a UNICEF cyan (#00aeef) header and footer around a white (#ffffff) and light-grey (#f1f1f1) page, Noto Sans throughout with a 48px/64px bold hero headline set white on a #111111 highlight strip, #111111 ink, 5px-radius elevated buttons (cyan with dark text, hover #008bbf; white with orange #d14808 Donate text; 3px outlined), and white 5px-radius story cards with Material-style shadows.", "sha256": "95c969ff9fa6524e710a44fd62737150fc3bdee77a27b02700b47a5fdd2b8f63", "bytes": 19993}, + "unilever": {"name": "Unilever", "category": "Beauty & Personal Care", "description": "Unilever Global (unilever.com) pairs its proprietary UnileverDesire typeface with Unilever Sky blue #0066cc for headings and buttons, Earth #f6f7f0 and white bands, Stone #4d4b46 body text, Night #133062, half-pill buttons (0 32px 32px 0) and 16px cards with sweeping 64px corner curves.", "sha256": "959ca64b21162993278b44caeb61af33b5aafae15b874b849a5e5b63f4dbd572", "bytes": 15061}, + "uninet-thailand": {"name": "UniNet", "category": "Thai Brands", "description": "UniNet Thailand (uni.net.th) home page measured live: Mitr Thai typeface at 16 to 44.5px, white canvas with #000000 text, orange #e1690f pill buttons (100px radius, 50px tall) with #05080f labels, a #05080f dark ThaiLIS band with #dddddd text, and a #f2f2f2 footer.", "sha256": "8abb9388e0481af812426269f896b8e7595af4050c8ebf3880147f927aab6367", "bytes": 9918}, + "unisight-cdp": {"name": "UniSight", "category": "Thai Brands", "description": "UniSight CDP (unisight.asia) home page measured live: IBM Plex Sans Thai in regular, semi-bold and bold at up to 68px, black #000000 pill buttons (50px radius, 42px tall), a LINE-green #06c755 add-friend button, mint #2beaa4 cards with 24px radius, and a mint-to-blue gradient call-to-action band on white.", "sha256": "7bf847cb16004f6c390610e5ad5bbd4105fcb9d0be205c4c8828a6ff680c1d95", "bytes": 10558}, + "united-airlines-g": {"name": "United Airlines", "category": "Airlines", "description": "United Airlines' united.com booking site: white #ffffff canvas over a sky photograph, pale #f7f7f7 bands, black #000000 text, a vivid #1414d2 'United blue' for pill CTAs (30px radius) and links, hover darkening to #0d0d8f, 10px-radius inputs and cards, and the proprietary Neue Plak for United faces in Text Regular, Text SemiBold and Bold cuts.", "sha256": "296e905edebeb59897701add4d3e9bd860398a71cc0e665783402249601b0b13", "bytes": 15011}, + "united-carriers": {"name": "United Carriers", "category": "Product & SaaS", "description": "United Carriers home page measured live: a black hero fading to white, near-black #111111 text, BT Steinhart uppercase 700 headlines at 71.1111px and BT Steinhart Mono button labels, Helvetica Neue 500 body at 20.7407px, square-cornered white buttons and 9999px-radius outlined pills.", "sha256": "531da1d6907fd6410503c515db2e8682fe734963e8a9629272640c0c02e8d9dc", "bytes": 10353}, + "united-information-highway-uih": {"name": "United Information Highway (UIH)", "category": "Thai Brands", "description": "United Information Highway (UIH) home page measured live: IBM Plex Sans Thai at weight 300 for 40px headlines and Looped at 400 for 16px body, white canvas with #f6f6fb cards, UIH blue #204882 pill buttons (40px radius, 53px tall) and soft grey #858585 body text, with a translucent #ffffffcc floating navigation bar.", "sha256": "9cb045f174613db38b2b56627916ac9dd50ce34aa49645b8fe5a13a3fe4acd9c", "bytes": 10373}, + "united-nations": {"name": "United Nations", "category": "Government & Nonprofit", "description": "United Nations English home page (un.org/en) measured live: light grey #f2f2f2 canvas with #454545 Roboto text, Roboto Condensed 700 headlines at 32px with -0.77px tracking, a deep blue #0a5a82 button with square corners, UN blue #009edb outline on the DONATE button, and pale blue #eaf3fb and #e4effb panels.", "sha256": "0a347b8a21a6c23b795b924ab4ad6fe52517dd755d6a9c493affb7799e0e9204", "bytes": 11721}, + "unitedhealth-group": {"name": "UnitedHealth Group", "category": "Healthcare & Wellness", "description": "UnitedHealth Group home page measured live: white canvas with warm #faf8f2 panels, OptumSans 700 headlines (44px, 0.44px tracking), a bright blue #0066f5 pill call-to-action (999px radius, 48px tall), navy #002677 statistic text, dark #323334 footer and 12 to 15px rounded image panels.", "sha256": "519d99c06a87662a936b8ac98e132d2606328a2162553e26826c561dcea55239", "bytes": 11069}, + "units": {"name": "Units", "category": "Food & Beverage", "description": "Units (units.gr) is a Greek student-housing brand whose site is a bento grid of saturated, rounded color cards on a warm #f4e9e1 canvas, set in Bunch 850 display type at 64px and Aeonik Pro 14px body, with pill buttons at 33.33px radius and black ink on every colored tile.", "sha256": "baca465436a2a065f3355984eee50964a44fa4deb2300665cbac053856140e1b", "bytes": 12409}, + "unity": {"name": "Unity", "category": "Gaming", "description": "Unity's site runs on a black (#000000) canvas with #141414 cards, white Inter body type and a geometric nohemi 500 display face (120px hero, 48px section heads, tight negative tracking). Actions are pill-shaped: a cobalt #3a5bc7 uppercase CTA with 3.6px tracking, #3358d4 'Get started' and #262626 nav pills at 32px; cards use 8px radius, pricing cards 16px on a light #f5f5f5 page.", "sha256": "80a967cc6cc69dd349b07504047e81d1c2474e3d5209d706efeb9e0b29d59c57", "bytes": 23600}, + "universal-music-group": {"name": "Universal Music Group", "category": "Music & Audio", "description": "Universal Music Group (universalmusic.com) presents its artist roster as a dark, full-bleed photographic carousel on a #222222 canvas, with light-weight uppercase Lato names in sky blue #2ab3e2, Glegoo serif navigation on a #000000 bar, square corners throughout and a 40px dark search input.", "sha256": "22a0c8b5cb334ccd72ce8416dad7eb6a210c53e5c2460d63c78ce219e39fdcd6", "bytes": 10656}, + "unkey": {"name": "Unkey", "category": "Developer Tools & IDEs", "description": "Unkey's site pairs a near-black #040406 canvas with articulat-cf display type (64px/72px, weight 400), Inter UI text, JetBrains Mono labels, square white #ffffff buttons with #040406 labels that hover to #e3e4e9, 1px #2e3038 grid rules, a lime #def135 text highlight and a pale-blue gradient band.", "sha256": "9a8a3f26ad9c4ce82aeeed74dbbf13e135c1e1b30164d0f85446a92abad231b4", "bytes": 12657}, + "unocss": {"name": "UnoCSS", "category": "Atomic CSS & Utilities", "description": "UnoCSS is an on-demand atomic CSS engine; its VitePress docs site uses the system UI sans stack, #3c3c43 ink on a #f6f6f7 and white canvas, a #00a98e teal brand with a #009ff7 gradient partner, and pill buttons with 20px radius and 12px-radius feature cards.", "sha256": "f9ed2d75a96f5da72a8557f2bda91d2002a4c521cca188c0fd3e7a87237c5545", "bytes": 12715}, + "unreal-engine": {"name": "Unreal Engine", "category": "Developer Tools & IDEs", "description": "Epic Games' Unreal Engine site unrealengine.com measured live — a dark #101014 page with #18181c and #202024 elevated surfaces and 5%-white glass cards (24px radius), 65%-white #ffffffa6 body text, electric blue #26bbff buttons with #101014 labels (8px radius, #72d3ff hover), Inter Tight 700 headlines at 40px and Inter body at 16px/26.4px, built on an 'eds' CSS token set.", "sha256": "0ba0717cad69f516fa4d508a814ed050e18f5506f2029210419b28a443811c3c", "bytes": 13332}, + "unseen-studio-2025-wrapped": {"name": "Unseen Studio Year in Review 2025", "category": "Agencies & Studios", "description": "Unseen Studio's Year in Review 2025 microsite (2025.unseen.co) is a near-black #111111 scroll story with gold #e8b900 New Icon Script display type at 74.07px, bracketed uppercase DM Mono labels at 11.85px, Neue Montreal navigation, 7.41px image corners and per-client chapter colors.", "sha256": "2e9dadee7e2f7adef828456c4a8422f2ae6ad318b93ef01bcc7b3b2656432779", "bytes": 10108}, + "unsplash": {"name": "Unsplash", "category": "Design & Creative Tools", "description": "Unsplash's photo-first interface is a strict monochrome system: white #ffffff canvas, Black #111111 ink and fills, Grey #767676 for secondary links and quiet controls, rendered in the platform's own UI sans stack (ui-sans-serif, system-ui) with a 40px/700 wordmark headline, 15px/500 body, 8px button radius and 32px compact buttons, so the masonry grid of photographs carries all of the colour.", "sha256": "126ad04fbd46ff1d783c65399c4bbc570f1ae0be0a5e33e692d7997d9b37d4d0", "bytes": 16175}, + "untitled-ui": {"name": "Untitled UI", "category": "Design Systems", "description": "Marketing site for the Untitled UI Figma kit and React library: white canvas, mid-gray #525252 text, one violet #7f56d9 primary, Inter at 400 and 600, 44px headings, 8px button radius and soft ring-and-lift shadows.", "sha256": "1cf9777b68eac4dbeb11420fa97acb0320b7148fd6565a45bfd2d808af4c35bd", "bytes": 10975}, + "untold-1": {"name": "Untold", "category": "Tech & AI", "description": "Untold (untold.site) is a communications ecosystem whose site pairs a cream #fcfcf4 canvas and #232428 ink with signal-orange #ff5623 square buttons, enormous lowercase Geometric415Lite headlines at 120px to 168px with negative tracking, and rounded-pill and tilted-photo collage details.", "sha256": "2a86cec7f5b8fe03c6f9cea249513c0b54957998712d188851a8744ac6e3f551", "bytes": 11254}, + "uob-thailand": {"name": "UOB Thailand", "category": "Thai Brands", "description": "UOB Thailand (uob.co.th personal banking, in Thai) uses a white canvas, #005eb8 UOB blue for the header, headings and footer, #0084ff for 5px-radius action buttons, Noto Sans Thai Light 36px headings, 16px Regular body and white 10px-radius promotion cards with a soft 15px shadow.", "sha256": "25f6f3dec59192e13824920f19971d1fde92e6926c50679a5330ab0416740256", "bytes": 11112}, + "up-up": {"name": "The Up&Up Group", "category": "Portfolio", "description": "The Up&Up Group (theupandupgroup.com), a South African creative group, sets giant 130.857px uppercase headlines that mix Inter 500 with ivypresto-display serif on a white canvas with #343434 ink, one copper-orange #f2623a accent, #f5f5f5 sections, 4px corners and hairline #c1c1c1 rules.", "sha256": "e163e1e62e291c79f7d35bc45daee2377328d701c1950eecea8259f3a9e1b7d5", "bytes": 9794}, + "ups": {"name": "UPS", "category": "Logistics & Mobility", "description": "UPS (ups.com) runs a white, utility-first homepage set entirely in Roboto (400 headings at 48px/40px/32px, 16px/24px body, 500 for buttons and links), with UPS Gold (#ffc400) pill buttons 46px tall at a 40px radius that lighten to #ffd64c and gain a layered shadow on hover, near-black text #121212, link blue #0662bb, 16px-radius cards on warm off-white #fcfaf8, a #f2f1ef utility bar and a UPS brown (#351c15) footer.", "sha256": "92162e11584e8cbd122788b1a27eb4260748927ce75404b5abd19019d976b3d6", "bytes": 24975}, + "upstash": {"name": "Upstash", "category": "Backend, Database & DevOps", "description": "Upstash's serverless-data site: a #f5f5f5 canvas with white panels, deep-green #022c22 ink, an emerald #00bc7d primary button with 12px corners, Inter Tight 128px/700 display headlines over Inter body text, JetBrains Mono code on #09090b panels, and mint #04785714 cards rounded at 16px.", "sha256": "77d8a4fb19dc364688cad670e8f9fc4e5b4a592d49c1a71d1af9af903025feaa", "bytes": 14399}, + "urban-jurgensen": {"name": "Urban Jürgensen", "category": "Fashion & Apparel", "description": "Urban Jürgensen (urbanjurgensen.com), a Swiss watchmaker founded in 1773, uses a #600b1a burgundy entry screen, a #f9f5ef paper page with a tiled paper texture, uppercase uj serif display type at 64px with 1.92px tracking, wea sans at 14px, hairline #c7c4bf outlined buttons and square corners.", "sha256": "03cb6c6e26b763a355dbd713362b05e0e33ac9ed09b1e49ea61ceedcbdf0b052", "bytes": 11059}, + "usa-gov": {"name": "USAGov", "category": "Government & Nonprofit", "description": "USA.gov (USAGov), the U.S. government's official guide to services, built with the U.S. Web Design System: Source Sans Pro Web body text at 18.08px/27.12px in #1b1b1b on #ffffff, Merriweather Web 700 headlines at 31.2px, navy #112f4e 4px-radius buttons that invert to white with a #0081a1 border on hover, #1a4480 links, a cyan #00bde3 search button and a pale #d2ebf1 topic grid of white cards with 2px #0081a1 borders.", "sha256": "802743cf1e69ed23f114ad419c4b0c88b1224acd9b926fb653368379fc3d55cd", "bytes": 20259}, + "usavionix": {"name": "USAvionix", "category": "Tech & AI", "description": "USAvionix (usavionix.com) presents jet-drone ISR and defense systems on a #000000 canvas with Geist 600 headings (50px, -1.5px tracking), Geist Mono uppercase 13px labels, translucent #ffffff40 pill buttons, cyan #7aebff accents and white text at 80% opacity.", "sha256": "e3ab534b26cf8f07673a89088c197a2e14bb1fb59a3717844e1ea672ca57425a", "bytes": 10014}, + "usva": {"name": "usva", "category": "Design Systems", "description": "usva (usva.build) design system site: a deep violet-black #0a0613 canvas, muted lavender #8b85a8 ink and a #a78bfa violet accent, set in Fira Sans 800 at 177.32px with -7.0928px tracking, glass-pill buttons with 16px radii and layered fog shadows.", "sha256": "5224ea5ec4c1d86af034e253194b591e150dbf867ebfec0fd0789ba065bdbb6b", "bytes": 12277}, + "uswds-cfpb": {"name": "Consumer Financial Protection Bureau", "category": "Design Systems", "description": "The CFPB site (consumerfinance.gov) is built on the bureau's open-source CFPB Design System: a white canvas (#ffffff) with pale gray bands (#f7f8f9), near-black ink (#101820), Pacific blue (#0072ce) for links and the standard button, and the CFPB green (#20aa3f) reserved for the thick rules under the header and above the footer. Type is Source Sans 3 Variable at 16px/22px body and 34px/42.5px semibold display, with a restrained 4px radius.", "sha256": "99cd4dca24fd008c18ba6877c662fc5a07f7e4f499e3b34fb66313c835c427e6", "bytes": 10317}, + "utopia-tokyo": {"name": "Utopia Tokyo", "category": "Culture & Events", "description": "Utopia Tokyo (utopiatokyo.com), a masks-and-future-Tokyo web experience, uses a #14171f ink-navy canvas with #ff1919 signal red display type, #ebe5ce cream text, PPMori 600 headlines at 175.36px, Zpix pixel-font labels, ghosted #647d9633 buttons and strictly square 0px corners.", "sha256": "7fc9cd5a9c9a82b1dd9763ec3e93d0dedb10e4f6c12f7eddc95929e14ae2127b", "bytes": 10524}, + "utrecht": {"name": "Gemeente Utrecht", "category": "Design Systems", "description": "Gemeente Utrecht's municipal site (www.utrecht.nl) is a civic service portal in Noto Sans Variable: a flat #cc0000 Utrecht red for the search button and footer, a #24578f blue for service tiles, square 0px buttons, 24px/600 panel headings, a #262626 main navigation bar, and brick-street photography.", "sha256": "3c5f0dfe80413eaa1d8085cb4229d68fb70a74f5100902a03f27121aee1d0ff7", "bytes": 11745}, + "v0": {"name": "v0", "category": "AI", "description": "v0 by Vercel uses a #fafafa canvas with white #ffffff cards on 1px rgba(0,0,0,0.08) rings, GeistSans 600 headings with tight tracking (32px/40px at -1.28px; 48px/56px at -2.88px), a 16px/24px system-stack body in #666666, #171717 ink, and 32px-tall #171717 buttons with 8px radius beside pill chips.", "sha256": "02d13580d6379a9e91cea503cbc66f00c486d83e77b1fbefdf4c139e6cd30d47", "bytes": 12784}, + "va-gov": {"name": "U.S. Department of Veterans Affairs (VA.gov)", "category": "Design Systems", "description": "VA.gov homepage built on the VA Design System: deep navy #162e51 chrome, USWDS-style blue #005ea2 primary with 4px-radius 40px buttons, Bitter slab-serif headings at 40px and Source Sans Pro 16.96px body on white, flat color-band sections.", "sha256": "4ca3446eb3595b80186f839ecf69a471087db727e2021a0029cde8850fd44783", "bytes": 10101}, + "vacheron-constantin": {"name": "Vacheron Constantin", "category": "Luxury", "description": "Vacheron Constantin (vacheron-constantin.com, international English home) is a quiet luxury watch site on a #f8f0e5 cream canvas with #412c17 brown ink, Prelo serif headings at 40px, Sohne sans body at 13px, uppercase letterspaced 12px links with hairline underlines and no rounded corners.", "sha256": "c56cfcf374feb99051cc476b306ec1d8af068dca110f0ecdacd0987698bbd61a", "bytes": 9774}, + "val-town": {"name": "Val Town", "category": "Developer Tools & IDEs", "description": "Val Town's home page sets Sprig Sans at weight 400 (48px/57.6px hero, -1.2px) in pure #000000 on white, with a sky-blue #00bcff 'Sign Up' button (12px radius, #052f4a text), slate-bordered #f8fafc chips, #00598a links and a warm #f8f4f2 prompt card — framed by hand-drawn isometric city illustrations.", "sha256": "855dda14abcce35b9e1678a456545efc2d4460ad735d64c9d6ffea15ae660eb0", "bytes": 13158}, + "valentino": {"name": "Valentino", "category": "Luxury", "description": "Valentino homepage measured at www.valentino.com/en-us: a white canvas (#ffffff) with black text (#000000), a Times New Roman display line at 24px, DINPro 12px interface text with 0.5px tracking, square corners, and translucent charcoal (#25252599) overlay buttons on photography.", "sha256": "fb58554acd6b57be3f9ece2d12238f429fae809c2c77d6872b05e0e382bd4d88", "bytes": 9927}, + "valve": {"name": "Valve Corporation", "category": "Gaming", "description": "Valve Corporation (valvesoftware.com) presents its careers-style home in pure #000000 black with #f74843 red apercu 900 headings (70px department links, 38px intro) over ultra-light 200-weight white 22px body copy, a red footer panel and zero rounded corners.", "sha256": "19504a651b17264ee9584da88eb175d1c2268d5d032cf9412ce8850e21b89cfc", "bytes": 9067}, + "van-cleef-and-arpels": {"name": "Van Cleef & Arpels", "category": "Luxury", "description": "Van Cleef & Arpels (vancleefarpels.com, US English home) is a white and #f5f5f5 high-jewelry site with Janson Text serif headings at 45px, Maison Neue Book body at 16px, uppercase 13px labels with 1.5px tracking, black ink, hairline #dddddd rules and no button fills.", "sha256": "e3ff3ac6b34dd4226df69540f1fd5b0f502d8ce73d1dcc58d75c4139a2b8ca03", "bytes": 10125}, + "vanguard": {"name": "Vanguard", "category": "Banking & Insurance", "description": "Vanguard's corporate portal page (investor.vanguard.com/corporate-portal): FF Mark in 400-900 weights, a single crimson #c20029 hero panel on white #ffffff, near-black #000000 text, dark red #96151d hover accent, square corners, no shadows, 17px/24px body and 34px/900 headings.", "sha256": "1316549ad5a7ae8fc9940e36db2463b2da1b5c6dee82a053ed07d04e8f4d0126", "bytes": 11312}, + "vanilla-extract": {"name": "Vanilla Extract", "category": "CSS-in-JS", "description": "Vanilla Extract's docs site pairs Shrikhand italic display headlines (52px) with DM Sans headings, on mint #cbfbf1 and sky-blue #dff2fe sections cut by slanted edges, a dark #101828 pill button with a 28px radius, and code panels set in a monospace face.", "sha256": "bb92651e1ad360d6f0507bf9540da02f2bf0c5a61b90c3fb2adcd51cef8b1f26", "bytes": 12207}, + "vant": {"name": "Youzan (有赞)", "category": "Design Systems", "description": "Youzan (有赞) home page, a Chinese retail-SaaS marketing site on a white canvas (#ffffff) with near-black ink (#323233 body, #1d1d1f headings), a single bright blue action color (#3370ff) on pill buttons (26px radius, 52px tall), a system font stack (-apple-system with PingFang SC fallbacks) at 400/600 weights, and 16px rounded white cards over a pale blue hero wash.", "sha256": "527dec52a3fead4adcbb9f7cb6a981cd83461cdc467c97ea6782ba9494ffdb32", "bytes": 14357}, + "vast": {"name": "Vast", "category": "Tech & AI", "description": "Vast (vastspace.com): space-station maker styled as an engineering firm: Owners 500 display at 76px/65.36px, Owners Text body, Phonic labels, meteorite-black #2a2c2f on warm-white #fdfcf4, moon-rock #b3aba3 bands, single solar-orange #ff5623 accent, square 0px corners, no visible shadows.", "sha256": "f143685c6462730d7e4ccf6e18e8448a771ad520ea33784b2400c90baf03a3e3", "bytes": 11601}, + "vaulk": {"name": "Vaulk", "category": "Architecture & Interiors", "description": "Vaulk (vaulk.com/en-GB): modular CBRN shelters in UHPC, shown through a dark #0c0c0c ground, Telegraf 500 white type at 48px/57.6px, thin white wireframe drawings, one alert-orange #f4682b accent, light #eceeed form surfaces and nearly square 1.78px corners.", "sha256": "ae8853173ff1e779ec3ae3e57c018e9aeb130ddf3b331f4645f7688784e8b1b8", "bytes": 9990}, + "vectr": {"name": "Vectr", "category": "Tech & AI", "description": "Vectr (vectrfl.com): field-crew activation brand in Roboto 400/500 with 96px/86.4px display at -5.76px tracking, navy #050419 on off-white #fcfcfc, sky-blue #d0e1eb ground, 156px pill buttons 48px tall, cobalt symbol, no shadows.", "sha256": "0faa031745ef231ab892565cb2f2f6545c8212050fc3db0dd06223266a63fa28", "bytes": 10237}, + "venmo": {"name": "Venmo", "category": "Fintech & Crypto", "description": "Venmo home page (venmo.com), measured — white #ffffff canvas with Venmo blue #4bb4ff and Stash purple #3f34ee feature bands, black #000000 pill buttons (1000px radius) with white text, #f5f5f7 grey pills hovering to #e1e1e3, Venmo Sans 60.29px/700 headlines with tight negative tracking, 14px/400 body, 32px-radius cards.", "sha256": "376bcb4eb003de208ec842a61d0cf1238eebfe787b00e8338de07aba2f0f0dcf", "bytes": 11101}, + "vercel": {"name": "Vercel", "category": "Developer Tools & IDEs", "description": "Vercel marketing homepage: a #fafafa near-white canvas with near-black #171717 headlines and pill buttons, set entirely in Geist Sans (400-500 weight, tight negative tracking from -0.96px to -3.84px) with Geist Mono for code. Cards are 6px-radius surfaces outlined by a hairline shadow ring rather than a fill or a drop shadow.", "sha256": "78a9bf7e1cf83a999a50025be9679bcbedd1f21af158b0502773acfbffbb8e09", "bytes": 14375}, + "verizon": {"name": "Verizon", "category": "Telecom", "description": "Verizon consumer home page: Verizon red #ee001e hero and 2px outlined 24px-radius cards on white #ffffff, electric yellow #f8ff3c 44px pill buttons with red labels, 128px/700 Verizon-NHG-DS display type, yellow circular price stickers and glossy 3D objects.", "sha256": "1518e865ca93193184659b5f890729f2979fb056a20387479eabbfcc5c483cde", "bytes": 11356}, + "vero-new-york": {"name": "Vero", "category": "Retail & E-commerce", "description": "Vero (verostudio.com): luxury fine-art wedding-dress sculpture studio with a cinematic film hero over warm beige #f3f0ed, near-black #181615 text, Louize Display serif capitals with Beausite Classic 500 sans, 2px corners, no shadows, very sparse editorial layout.", "sha256": "4eea353ec50f3a9981d79a8c4504e716362f75e893293c48c6bbd96051beae7b", "bytes": 10418}, + "vestas": {"name": "Vestas", "category": "Energy & Climate", "description": "Vestas (vestas.com/en): wind-energy manufacturer styled in VestasSans weight 200 headlines (56px/50px) in Vestas blue #005aff on white and #e3e5e8 gray bands, navy #1f3144 text and footer, full-bleed turbine photography, circled-arrow links and 50% circles, no shadows.", "sha256": "dda032011074c4013d7c1823ddbec9cbcd14ae8a364c871920bb8c96474c64dc", "bytes": 10584}, + "vibrant": {"name": "Vibrant", "category": "Bold & Expressive", "description": "Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.", "sha256": "9490208fa86bfb8733d23979741bdf2a8b18db6caf4ea4cb7402fb0d3ceb1f45", "bytes": 3021}, + "vibrant-wellness": {"name": "Vibrant Wellness", "category": "Tech & AI", "description": "Vibrant Wellness interactive experience (vibrant.noomoagency.com, built by Noomo Agency): pastel lavender #d9cffb hero with a glossy 3D bust, PlusJakarta Sans 16px body and 80px headline, Ubuntu Mono caps toggles, ink #282f3c, blue #0774c4 labels, glass white pills and circles.", "sha256": "1f2ed910b37113effa504c38ec596e5915eae689205ab639ef88296efe21fd9f", "bytes": 9753}, + "villa-market": {"name": "Villa Market", "category": "Thai Brands", "description": "Villa Market's online grocery storefront (shop.villamarket.com) — a light-grey canvas (#eeeeee) with white product cards, a Villa red (#c72027) for the recommended strip, prices and badges, a deep navy (#2c2a74) navigation bar and headings, green cart buttons (#178841), and the system UI sans-serif stack at weights 400 to 800.", "sha256": "9a20cb1d52ca96c0e6a1ab212622e17d93dfbc9261221593b8a934b3cc68abfa", "bytes": 13974}, + "vimeo": {"name": "Vimeo", "category": "Media & Consumer Tech", "description": "Vimeo's home page alternates Vimeo White (#fafcfd) and Vimeo Black (#141a20) bands, with Vimeo Blue #17d5ff on 12px-radius 48px buttons with dark text, ABC Repro 500 headlines at 72px with -3.6px tracking, #4c5864 body text, 16px-radius video cards and a lime #d6e96d announcement bar.", "sha256": "33207723a5620be08c028192a15d6a3ccd44882c58443df0a8766bd6c842ac98", "bytes": 13064}, + "vintage": {"name": "Vintage", "category": "Retro & Nostalgic", "description": "1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.", "sha256": "e6fcac37919ecb4458748a814ec39b6038ca85d1ee5e1acf2d36b6e133ca894a", "bytes": 3029}, + "virgin-atlantic": {"name": "Virgin Atlantic", "category": "Airlines", "description": "Virgin Atlantic's 'Tailwind' digital design system as shipped on virginatlantic.com — Gotham served only at light weights (300/325/350), Virgin red #da0530 for every filled CTA (hover #b1062b, active #9a0728), near-black ink #030c16 on white, 4px-radius rectangular buttons and inputs 48px tall, a full-width red booking band, Upper Class purple #4f145b, a #111921 footer, and a semantic token set named --color-{background|text|icon|border}-{intent}-{variant}-{state}.", "sha256": "cac02c0c7c9418ed8245fbae7292d2627a19a756162ac4cb3014054324d291d6", "bytes": 22409}, + "viriyah": {"name": "Viriyah Insurance", "category": "Thai Brands", "description": "Viriyah Insurance (viriyah.co.th/en): Thai insurer in royal blue #1434a2 and gold #fcaf17 on white, DBSathornMedium 48px/500 headings with DBSathornX 18px body, flush 80px square header tabs, 20px and 4px radius cards with soft shadows, photography-led split blocks.", "sha256": "e038ae84b3b03986f9e98413c383c71b815e804adbb172bbeb65024b81ad7e6f", "bytes": 11717}, + "visa": {"name": "Visa", "category": "Design Systems", "description": "Visa.com (en-US) marketing site — white canvas, near-black ink (#1a1a1a), the Visa Blue family (#1434cb primary, #0d2181 hover, #d9dffb tint) against a deep navy (#020f27) band, and one proprietary Dialect typeface at regular weight, with a 64px hero at -1.2px tracking, 1000px-radius pill buttons and photography-led three-up cards.", "sha256": "0eaa837b051afa203f58941598d0da7a29897516e16aa726f4cf725b25145b29", "bytes": 11263}, + "vite": {"name": "Vite", "category": "Developer Tools & IDEs", "description": "Vite (vite.dev) is a near-black #16171d page built on VoidZero's VitePress theme: APK Protocol display type (60px/500, -3px tracking), Inter body at 16px/26px in 70%-white #ffffffb2, KH Teka Mono uppercase labels, a white #ffffff 8px-radius 'Get Started' button, Vite violet #b39aff hover accents, #3b3440 hairlines and deep purple #370a7f glows and banners.", "sha256": "2029518a9ddd9f806cad5b51d117a1880f199af2f411a368ecd6856bde6a918d", "bytes": 12538}, + "vitra": {"name": "Vitra", "category": "Home & Furniture", "description": "Vitra's US online shop (vitra.com/en-us) is a white, gallery-like system set in the bespoke Lineto-refined corporate Futura served as vitraFutura and vitraFuturaV2: 50px/400 hero titles over full-bleed photography, 40px/44px section heads in #101010, 17px/500 #333333 navigation that turns signal red #d43e42 on hover, ghost CTAs drawn as 1px rules above and below the label, #333333 5px-radius Buy buttons that darken to #101010, #f7f7f7 newsletter band and 0px photo corners.", "sha256": "049d9c1478872cb8ae77fcdb94120c71d0b98684dc69193d6697a817646ce9ed", "bytes": 19413}, + "vmware-clarity": {"name": "VMware by Broadcom", "category": "Design Systems", "description": "The VMware by Broadcom homepage: Metropolis in thin 300 weight at 50px for headlines and 16px body in grey #565656, a deep-navy hero (#1b1d36), one corporate blue (#005c8a) for uppercase 14px buttons with 3px corners and for card titles, white cards with a soft blue-tinted 14px shadow, and isometric parallelogram illustrations in blue, teal, green and purple.", "sha256": "654099c36f7453346cb65201a2e2e516bff3542c7f7ccd731581611c92317a39", "bytes": 10464}, + "vocom-international-telecommunication": {"name": "Vocom International Telecommunication", "category": "Thai Brands", "description": "Vocom International Telecommunication (vocom.com): telecom wholesaler home page with a data-center photo hero, VOCOM wordmark in white Lato 700 70.6667px on an indigo #20124d label, mint #9dcfc4 services field, three-column square photo tiles, no shadows or buttons.", "sha256": "f7dd25118d72fe8a5d77f2067742dccdba910f199d6e269480ab9ff1d2dedd65", "bytes": 9188}, + "vodafone": {"name": "Vodafone", "category": "Media & Consumer Tech", "description": "Vodafone Group corporate homepage: red #e60000 pill buttons (60px radius, 800-weight 15.3967px labels) over full-bleed photography and a deep red gradient, with white and #25282b ink, and all type in the Vodafone family loaded in weights 300 to 800, with uppercase 115.435px headlines at -1px tracking.", "sha256": "457ef8e7fc0fa35ae0f290deef97e34805b5ae0f637a178b1a45ada428880619", "bytes": 12915}, + "vogue": {"name": "Vogue", "category": "News & Publishing", "description": "Vogue's US home page vogue.com measured live — a white #ffffff editorial grid with black #000000 type and square black SUBSCRIBE NOW buttons, #636363 bylines, a #f8f8f8 promo strip and a black footer, set almost entirely in Vogue Avant Garde (32px/600 lead headline, 22px uppercase section heads with +1.6px tracking, 13px/600 buttons with +1.1px) plus Adobe Garamond Pro for serif accents.", "sha256": "ca83784ae590d351df8225dc921e42be6d99af85d1d52579f7d62675eb28feb3", "bytes": 11878}, + "voice-tv": {"name": "Voice TV", "category": "Thai Brands", "description": "Voice TV (voicetv.co.th): Thai news portal in Dindan Mai type, a white 94px header with uppercase 16px/700 links, orange #f66604 tag and red #dd2027 LIVE outline, three-column story cards on #f4f4f4 gray with #eeeeee and #333333 panels, square #e6e6e6 button, tiny 4px radii.", "sha256": "6a9f12017b200bd6bb2033a894438a796d2aa73ab8a444d150b08b74b6587c13", "bytes": 10117}, + "voku-studiotm": {"name": "Voku.Studio™", "category": "Agencies & Studios", "description": "Voku.Studio™ is a Madrid creative studio working with AI; its site is an off-white #fffdfc canvas with near-black #0a0a0a text, a 10.6666px Archivo interface layer, an 80px custom vokufont wordmark, zero border radius and a fanned arc of project thumbnails.", "sha256": "230d68150a681634ba21d18b6d3cdabc0b43ca7d86a6976fe7f3c6f35c839201", "bytes": 10078}, + "volkswagen": {"name": "Volkswagen", "category": "Automotive", "description": "Volkswagen's US home (vw.com) pairs a warm #f6f5f2 canvas and #1b2236 midnight ink with the proprietary vw-head and vw-text families, 100px pill buttons 44px tall, 12px and 8px image corners, and full-bleed vehicle hero photography on black.", "sha256": "e83c19f96cfc657329283d0b17ca52f95d81f8cccf51395cc5e147266246849a", "bytes": 10281}, + "voltagent": {"name": "VoltAgent", "category": "AI & LLM Platforms", "description": "VoltAgent marketing site: a near-black #050507 page with #101010 panels, emerald #10b981 and mint #2fd6a1 accents, warm grey #8a8380 body copy, Inter for body and a system-ui stack for 60px headlines at -0.65px tracking. Outlined buttons with 6px radius, 8px bordered cards, and code and product windows replace imagery.", "sha256": "7f0c44e0dc6aab6798ec4b103277132c9f5ad95a2c3af7b0f43be0ccba6b2ddf", "bytes": 13115}, + "volvo-cars": {"name": "Volvo Cars", "category": "Automotive", "description": "Volvo Car USA's home page: white #ffffff and #fafafa surfaces, black #000000 headings and #5e5e5e secondary text, black and white 9999px pill buttons 48px tall, sand #f7f3f0 model bands, a single blue accent #0b2ded, and one typeface, Volvo Centum, from 12px/0.24px disclaimers to a 320px 'For Life.' footer statement.", "sha256": "8c710ce3bcd8820b770eae63704da0f573b20584dbb62df860b04b1f184f1017", "bytes": 13810}, + "vox": {"name": "Vox", "category": "News & Publishing", "description": "Vox is an explanatory news site built on a white #ffffff page with #131313 text, a loud #fff200 yellow masthead and Sign Up button, balto sans headlines, harriet serif deck copy at 14px, Roboto Mono 12px kickers, and near-square 1px to 2px corners.", "sha256": "c69a7bc4d16e211272f6a0ba098e906c66133fffcfd490ae660fdc86a6651d02", "bytes": 10569}, + "vp-infotech-visperhost": {"name": "VisperHost", "category": "Thai Brands", "description": "VisperHost (VP InfoTech Co., Ltd.) is a Thai VPS and hosting provider whose site runs entirely in Kanit: white #ffffff canvas, #0059e8 electric-blue pill buttons 39px tall, a #273647 slate stats band, #242424 footer and 10px rounded white service cards.", "sha256": "aa6d612c519fd0774c46eb4a24cfe8c2563a841d4debce1560ab07ec46a83119", "bytes": 11180}, + "vtex-styleguide": {"name": "VTEX", "category": "Design Systems", "description": "The VTEX commerce-suite marketing site (vtex.com/en-us): VTEXTrust type at 60px/700 with negative tracking, deep navy ink #142032, Rebel Pink #f71963 for buttons and highlights, a pale blue-white canvas #f5f9ff, 16px button radius and translucent frosted cards over a pink-to-cyan gradient.", "sha256": "cfb06587a3015f147996efc8a6b7974fc570a0a9e1aa29eae7682d9af135a0b2", "bytes": 12196}, + "vue-ds": {"name": "Vue Design System", "category": "Design Systems", "description": "Vue Design System's landing page sets a deep navy faceted hero with a five-tile red-to-gold VUEDS wordmark above a white features grid, in light-weight (300) Fira type at 56px, a #1070d1 blue Download button with 3px corners and a soft 57.6px shadow, and gray #6e6e6e body copy.", "sha256": "fac71b8e6d3fea074a17c83b5a86f237f9da240288d65018b8ff776d0f46ed1d", "bytes": 11919}, + "vuetify": {"name": "Vuetify", "category": "Frontend Frameworks", "description": "Vuetify, the Material Design component framework for Vue: default theme primary #1867c0 on white, Roboto at 57px/700 for hero headlines and 14px/500 buttons, 36px-high buttons with 4px radius (44px and 8px for hero CTAs), two-layer Material shadows, and a dark surface of #212121.", "sha256": "3a5a3fe3ba00198ae13fa81b1e70c738587ecd97ceb8b6fa77a628c74c0c3461", "bytes": 14353}, + "waabi": {"name": "Waabi", "category": "Tech & AI", "description": "Waabi, the autonomous trucking and robotaxi company, uses a white #ffffff canvas with #191818 near-black text, a #ff2c6b pink action color on 48px pill buttons, a 150px Zagma serif hero with -6.4px tracking, NeueHaas UI text, and 12px rounded photo tiles.", "sha256": "2e03bb6fe956bb1269db5f3e8f19cae5cbd361455e088f3a4b9232967bd8baea", "bytes": 10393}, + "wacoal-thailand": {"name": "Wacoal Thailand (Thai Wacoal Public Company Limited)", "category": "Thai Brands", "description": "Wacoal Thailand's shop: Prompt typeface on a white canvas, near-black (#1c1c1c) uppercase VIEW ALL buttons, a sale-price red (#e32c2b), 8px product cards and full-bleed lifestyle photography with a pink-and-cream campaign palette.", "sha256": "6c43fd68aa40827872db149454f30d8e0503f199946378cbac30945a7bbf4e0b", "bytes": 10241}, + "wai-wai": {"name": "Wai Wai (Thai Preserved Food Factory)", "category": "Thai Brands", "description": "The Thai-language corporate site of Wai Wai (ไวไว), Thai Preserved Food Factory Company Limited — a warm greige canvas (#f0ebe9) holding white news cards, a deep green footer band (#3a5b4f) carrying product-pack tiles, Prompt at weights 300 and 400 for Thai text, Helvetica Neue for Latin links, and #337ab7 blue for every link.", "sha256": "e6558ac3bbca2b31ff2716db0b0c13fb80ca3024f2c3b2d59920640e7c7926ac", "bytes": 14095}, + "walgreens": {"name": "Walgreens", "category": "Retail & E-commerce", "description": "Walgreens' home page sets Inter UI text in charcoal #413d3c on white with a #62002e wine promotional ground, Tiempos Headline serif display at 36px, crimson #a32a33 brand action color, 8px rounded white promo buttons and 45px pill Clip buttons.", "sha256": "b97918ea879e6f10d9884aeeccc5fad300288c630444b63b5589d5aa00e7d139", "bytes": 11149}, + "walmart": {"name": "Walmart", "category": "Retail & E-commerce", "description": "Walmart's US home page uses EverydaySans on a #ffffff canvas over a #f1f1f1 page ground with #2e2f32 text, a #0053e2 blue brand fill for the header and deal tiles, #2a8703 green prices, #ffc220 spark yellow, 8px rounded tiles and 9999px pill search.", "sha256": "045b8a3d9782c3a0d93b25cef467bca3f23500d9689a0aaef74e695763bedd95", "bytes": 10021}, + "walrus": {"name": "Walrus", "category": "Tech & AI", "description": "Walrus, the data platform for AI, is a black #000000 site with warm off-white #faf8f5 text and panels, Ratch headlines at 72px, Google Sans Flex body at weight 350, uppercase Google Sans Code mono links, #53575a outlined 26px pill buttons and 6px cards.", "sha256": "b2a6d7a4a2f2a2482057f669809ed356716715406b3a42c4cb0ec15eb111419f", "bytes": 10557}, + "warm-editorial": {"name": "Warm Editorial", "category": "Starter", "description": "A serif-led magazine aesthetic. Terracotta accent on warm off-white paper —", "sha256": "42ee4ce7c334c9ed8fafa551c506528ab65ac329974a0497af435499d7dc9843", "bytes": 3980}, + "warm-fuzzy": {"name": "Warm & Fuzzy", "category": "Portfolio", "description": "Warm & Fuzzy, a self-described feel-good creative company, runs a black #000000 site of white SuisseIntl type with tight negative tracking, 132px uppercase section titles, a showreel hero, #190bb6 cobalt, #f7dd47 yellow and #e74a27 orange blocks, and circular 50% thumbnails.", "sha256": "449cc503ee10b9d76efbfbce272814e9078182ef2d52a26a0f277d00a8d6a3b1", "bytes": 9096}, + "warp": {"name": "Warp", "category": "Developer Tools & IDEs", "description": "Warp homepage: a white and #fbfdfd canvas with ink #1a1522, electric indigo #2a1eff accents, and a yellow #eef17c demo button, set almost entirely in Azeret Mono at 54px/-2px headlines. Uppercase 12px buttons with 4px radius, blueprint-style framed figures, and dotted data-grid illustrations.", "sha256": "298ffaf27f0374ec44c9093c905325bcd675da0fcd7ef28ec1f3e6fd16c8a21f", "bytes": 14845}, + "watershed": {"name": "Watershed", "category": "Energy & Climate", "description": "Watershed (watershed.com), the enterprise sustainability AI platform: a white #ffffff and pale cobalt #f5f8ff canvas, deep navy #041330 bands, and Cobalt #265cff as the single action colour (hover #1246e0). Type is Messina Sans (served as messinaSans) in weight 500 with tight tracking - 72px/72px hero at -2.88px - body 20px/30px in slate #666c80, plus GeistMono 14px eyebrows and P22 Mackinac (mackinacPro) serif quotes. Corners are nearly square: 2px buttons and inputs, 44-47px tall controls.", "sha256": "b060fddf44e84cdcbf059c47d7f6d0fb7353798e98aec8773b84209205075ab4", "bytes": 25648}, + "watson": {"name": "Watson", "category": "Architecture & Interiors", "description": "Watson is a Los Angeles creative studio whose site is pure black #000000 type on an off-white #fefefe canvas: a 284.877px stacked WATSON wordmark in the ca face with -12.8195px tracking, serif statements, 17.3056px ba body text and zero border radius.", "sha256": "3c333b120a7bc95c908f3af0601b9c7b1e8396cadc90a50a91c33e37ad3c02aa", "bytes": 9045}, + "waymo": {"name": "Waymo", "category": "Logistics & Mobility", "description": "Waymo, the autonomous ride-hail service, sets GT-Walsheim with tight negative tracking on white #ffffff and deep #050f1e navy-black, with a #006fee blue 40px pill CTA, an electric #0077ff accent for statistics, a #00e89d mint, and large 16px to 40px rounded panels.", "sha256": "5a7d44053603d936bfe9f92c0f0569d15a010991180287bcb2498eb18db320eb", "bytes": 11620}, + "web-awesome": {"name": "Web Awesome", "category": "Design Systems", "description": "Web Awesome is an open source web-component library; its own site uses cera-round-pro headings at 52px/600, system sans body at 16px, a burnt-orange brand #cb4b27 on 6px-radius buttons, near-white #f1f2f3 bands and a #1b1d26 ink, while the docs default theme ships a blue #0071ec brand.", "sha256": "3b550356a46e1e8653f28674d6bc12cd690fd0aa04b274a2947bb7adea01ad0b", "bytes": 10958}, + "webflow": {"name": "Webflow", "category": "Design & Creative Tools", "description": "Webflow homepage: white canvas with near-black #080808 ink, a single saturated blue #146ef5 (hover #0055d4) for 4px-radius buttons, and WF Visual Sans Variable at weight 600 for 74.8571px headlines with -0.748571px tracking; dark product screenshots and customer logo walls carry the imagery.", "sha256": "88e2e295ccefed08571662150b15f4988749d333e8ec2dc8325001f0b0687375", "bytes": 13346}, + "weights-and-biases": {"name": "Weights & Biases", "category": "AI & LLM Platforms", "description": "Weights & Biases (wandb.ai/site), the AI developer platform now part of CoreWeave: charcoal #1a1c1f and #282a2f surfaces, white Source Serif 4 headlines at 72px/600, Source Sans 3 20px/30px body, teal #00afc2 links and a #10bfcc-to-#0097ab gradient CTA at 8px radius, gold #ffcc33 accents and uppercase 0.96px-tracked buttons.", "sha256": "cc552337c31663fe63d54497a4f24f84f8477cd7c0176045561fce17570df96c", "bytes": 13853}, + "welcome-ui": {"name": "Welcome to the Jungle", "category": "Design Systems", "description": "Welcome to the Jungle's homepage runs on its own Welcome UI system: a saturated #ffcd00 yellow hero canvas with black ink, a #f6f3ef warm page body, 48px weight-900 headlines in the custom welcome-font at -2% tracking, Work Sans 16px body and 8px-radius buttons 42px tall.", "sha256": "efd51159885757f017f0012f1d48999e9d3337aac159589f8ffde6a8a8d358ac", "bytes": 11231}, + "wembi": {"name": "Wembi", "category": "Tech & AI", "description": "Wembi, an industrial IoT digital-twin company, uses a warm #ede8e8 canvas with black HaasUnicaSH type, a #c0dfe9 pale-blue stage, a #beff8b lime accent with a lime display wordmark in the ductile face, an 86.6667px headline and tab-shaped N° buttons with 6.67px top corners.", "sha256": "9ecbb59a9148e09154ac90b205f7a1a9f77fcedd41f90b451eb16d1987910154", "bytes": 9975}, + "west-elm": {"name": "West Elm", "category": "Home & Furniture", "description": "West Elm's storefront is a white (#ffffff) editorial canvas with near-black #212121 ink, Commercial Type's Sanomat serif at weight 300 for display (48px/60px hero with 0.96px tracking, 28px section titles) and Grilli Type's GT Eesti Text at weights 300 and 375 for everything else, with tracked uppercase labels. Actions are square-cornered (0px radius) #212121 rectangles with white uppercase 14px text and 1.4px tracking, a white twin on photography, and a #f4f4f4 footer.", "sha256": "ec56a48e22af32f0edc48db1a9c26cd2163ae351835f8e59e94b32575442edae", "bytes": 29613}, + "wework": {"name": "WeWork", "category": "Real Estate & PropTech", "description": "WeWork (wework.com) runs a black-and-white editorial system: white #ffffff page, #000000 ink with #444444 secondary text, a custom webfont served as \"Serif\" at weight 400 for every headline (56px/61.6px hero, 36px/40px sections, 24px/32px card titles), Apercu 400/600 for UI and body (16px/25.888px, the 1.618 golden-ratio line height), and a soft periwinkle brand blue #678fff for 8px-radius CTAs that hover to #3b5bbe with white text; cards are 12px-radius with a 1px #e6e6e6 border and a 20px grey glow.", "sha256": "ba3790134a2b30b140ecb7bf8051ce25dc4cff6c3830a3f52a4037fe87c436e2", "bytes": 26214}, + "what-the-duck": {"name": "What The Duck", "category": "Thai Brands", "description": "Dark record-label site for What The Duck (Thailand): black #000000 canvas, white text, amber #fcb93d accent on nav and pill buttons, Lulo Clean bold headings with 3.6px tracking, Avenir light body at 15px, square art tiles and 9999px pill buttons.", "sha256": "3bb849a316e5c6434adfd1e8e3b66c8e46affa49003caa3e45a978cc6a735bb8", "bytes": 9978}, + "whatsapp": {"name": "WhatsApp", "category": "Media & Consumer Tech", "description": "WhatsApp's site sits on a warm cream canvas (#fcf5eb) with deep #111b21 bands and a mint #e6ffda strip; WhatsApp green #25d366 fills 50px-radius pill buttons with dark #1c1e21 text and a 1px outline, and WhatsApp Sans Var headlines run large and light at 80px/400.", "sha256": "fb6a7dd7cae60fd0523ed17ca80e2cde026f686d04baebe05d85947d9d5b80f4", "bytes": 11795}, + "whimsical": {"name": "Whimsical", "category": "Design & Creative Tools", "description": "Whimsical (whimsical.com), \"the whiteboard for product builders\": Agrandir 700 headlines at 64px and 96px with slight negative tracking, Manrope 16px UI and body text, a #250835 deep-plum 12px-radius Get started free button with a soft plum shadow, a #f7f7f8 page, and huge 120px–160px-radius panels filled with grainy pastel sunset gradients.", "sha256": "218a1bbb2e9f59eeb632e3419b4051edec0c0ef1d8886a14c3d4f0308d9c9394", "bytes": 14732}, + "white-desert": {"name": "White Desert", "category": "Food & Beverage", "description": "Luxury Antarctic expedition site: full-bleed ice film under a 227.555px uppercase Oswald headline, Cardinal Classic Long serif titles, Inter Tight UI at 12.4444px, navy #1f2a44 text on white, orange #ff7e15 hover accent and 2px-radius translucent nav buttons.", "sha256": "158959bd67df8c24e7705a7c832d56e4aaeaa142bb7ba7bf7a45b2aff8f53ad4", "bytes": 11261}, + "white-house": {"name": "The White House", "category": "Government & Nonprofit", "description": "Official US presidential website: deep navy #0d132d and white with a burgundy #8b1a1a pill accent, Instrument Serif statements at 30px, Instrument Sans body at 14px, wide uppercase Nord navigation with 1.8px tracking, full-bleed photographic tiles.", "sha256": "3fae951d0a093cc55c06b46317721b0edaf7490c8d3416fddd33382776d163b6", "bytes": 10493}, + "who": {"name": "World Health Organization (WHO)", "category": "Government & Nonprofit", "description": "WHO public site: navy #00205c Noto Sans bold on white and #f6f7f9 grey, 50px hero headline on a translucent navy plate, 18px card titles, square-cornered 40px buttons, 4px-radius cards and a #0c2b64 footer; documentary photography, no shadows.", "sha256": "29d70e04d5d67a1de2f3d4c1a1fb4a022fb045ea0f8b82d6013ffaf3df0fe53e", "bytes": 10698}, + "whole-foods": {"name": "Whole Foods Market", "category": "Retail & E-commerce", "description": "Whole Foods Market online store: single brand green #004e36 on white and warm #f8f7f5, Corda Std serif headlines at 70px, Circular Pro 16px body, 2px-radius green buttons with #006f46 hover, pill search field and overlapping white promo cards on food photography.", "sha256": "7e6d13c0eee085d973d787909a50e8fdf38e162187272c89255a6af7d0c5acba", "bytes": 10551}, + "whoop": {"name": "WHOOP", "category": "Healthcare & Wellness", "description": "WHOOP's wearable storefront — stark black #000000 and white #ffffff sections, full-bleed athletic photography and video, a single proxima-nova family with huge light-weight headlines (120px/400, line-height 96px, -3.6px tracking) and tight negative tracking everywhere, uppercase bold CTA labels with 10% letter-spacing on 16px-radius buttons in electric accent #4a53ff, black or white, 24px-radius membership cards with soft radial gradients, and a black footer with #999999 links.", "sha256": "37e974a7589451606035e2c650aab3ae670806805870f433693d383c82345b96", "bytes": 24990}, + "wieden-kennedy": {"name": "Wieden+Kennedy", "category": "Agencies & Studios", "description": "Wieden+Kennedy agency site: black and white bands, Univers LT Std Light (weight 300) at 68px display and 45px statements, grey #6c757d captions, full-bleed campaign imagery with +OFFICE tags, circular 50% controls and no shadows or filled buttons.", "sha256": "6327495e3389f644909656f518e02e4fbdce03435a117f116213ef5bd7304620", "bytes": 10093}, + "wikipedia": {"name": "Wikipedia", "category": "Government & Nonprofit", "description": "The wikipedia.org portal is a white, centred, text-first page built on Wikimedia's Codex tokens — the system sans stack (-apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial) at 13–16px, a Linux Libertine serif h1 at 32px/700, progressive blue #3366cc links and search button (hover #3056a9), #202122 base text with #54595d subtle text, #f8f9fa interactive-subtle fills, #a2a9b1 borders and a 2px base radius.", "sha256": "7461a191b63c636a5177014a14e075709465e3bc2847253b460d042181ea95ed", "bytes": 20656}, + "wild-week-athens": {"name": "Wild Week – Athens (2026)", "category": "Culture & Events", "description": "Event page for Wild Week Athens 2026: bento tile mosaic on #cbcbcb and #dcdbd5 greys, one saturated blue #0755bb for all text, Albertus Nova Light 18px uppercase titles with 0.72px tracking, 10px body, 4px and 8px radii and classical plaster relief imagery.", "sha256": "a9b81d1ba66500a1c6848daed3f67486d3ba463e57e851d0b18e205a7dd842ab", "bytes": 8777}, + "wildy-riftian-portfolio": {"name": "Wildy Riftian", "category": "Portfolio", "description": "Portfolio of Wildy Riftian: black, #171717 and #f5f5f5 bands with one electric yellow #ffe430 card, Lock Serif Light display at 80px, uppercase JetBrains Mono 12px and 14px interface text, 6px radii and a faint upward shadow.", "sha256": "249603e68db9ca83afecd3c15b5996cb1019aa69018f29d5b5c956bd2ba12639", "bytes": 9598}, + "wimbledon": {"name": "Wimbledon", "category": "Sports & Fitness", "description": "The Championships, Wimbledon official site (wimbledon.com): white #ffffff canvas, #121619 ink, Wimbledon green #006633 for links and actions, deep green #0b2917 header and bands, purple #540082 Caslon eyebrows, cool grey #f2f4f8 layers. Gotham uppercase headings (40px/700, 32px/700 with tight negative tracking), Gotham 16px/24px body, 8px card radius.", "sha256": "ce7da055d67e6d0b6515f277bf8a08c0c315c475ef8a70ef6ca4dff32abc10e1", "bytes": 11179}, + "windsurf": {"name": "Devin Desktop", "category": "Developer Tools & IDEs", "description": "Devin Desktop (devin.ai/desktop, where windsurf.com now redirects; the page calls it 'the new name for Windsurf') uses NB International Pro at weight 400 (64px/-1.92px display), #191919 ink on a #fcfcfc canvas, black #000000 pill and #363636 2px-radius download buttons, GeistMono uppercase labels in accent blue #317cff, and white 12px-radius product cards.", "sha256": "85aa2c3b38bf051b271f17406ca0bcaa61498cb752ac686c3355cc92ffa33dcd", "bytes": 14271}, + "wired": {"name": "WIRED", "category": "Media & Consumer Tech", "description": "WIRED is a technology-news front page built from black, white and pale gray: WiredDisplay headlines at 64px with -0.5px tracking, Breve Text body at 16px, uppercase WIRED Mono labels, square-cornered black buttons (0px radius, #000000) and #f3f3f3 ad bands, with all color supplied by photography and illustration.", "sha256": "243af459a3f5ef2a4bd4dc08515187cb78dbd8e379eb659f95e66cb2923986fb", "bytes": 14648}, + "wise": {"name": "Wise", "category": "Fintech & Crypto", "description": "Wise pairs a bright green (#9fe870) hero field with forest-green (#163300) ink and pill buttons, setting display type in the proprietary Wise Sans at weight 900 (86.86px) and everything else in Inter 600, with round-cornered cards (10-36px radii) and almost no shadows.", "sha256": "b0022310b6a333e2dd3ee6d1985647142cbe1580e2244d8884dc27a77b98c6ca", "bytes": 15110}, + "wisesight": {"name": "Wisesight", "category": "Thai Brands", "description": "Wisesight (Thai social data analytics) design system: Kanit headlines at 86px weight 500, light Sarabun body, white canvas, near-black navy #101820 pill buttons, maroon #850219 accent and 12px cards.", "sha256": "84a36c119421c0478daf06fe88ac0e237e2e8791a8c25e8ed67e080dda674fa8", "bytes": 10850}, + "wix": {"name": "Wix", "category": "Product & SaaS", "description": "Wix.com's home page is a bright white #ffffff canvas with black #000000 Wix Madefor Display headlines (73.3334px/400, -1.46667px tracking), Madefor Text body at 16px/24px, a blue #166aea 'Start for free' pill (42px radius, hover #2d83ff), black 50px-radius 'Get Started' pills, butter-yellow #fff1ac and sage #d2e4c7 color washes, and a glowing pill search field.", "sha256": "1d11a3e231ba70f47872e218e9be99e645d0586734e71218b606bc35dc73e0dd", "bytes": 13846}, + "wmca": {"name": "West Midlands Combined Authority", "category": "Design Systems", "description": "The WMCA public site (wmca.org.uk) is a civic-service design built on the shipped wmcads stylesheet: a warm near-white canvas (#fcfcfc), charcoal ink (#231f20), Furnace-style orange (#c05701) for the hero panel, buttons and icons, and a teal-blue (#007da8) for underlined headline links. DM Sans 700 sets headings (46px display), Noto Sans Display sets body at 16px/24px, corners are a restrained 5px, and the header and footer sit on charcoal.", "sha256": "a92339e1199f1375649260550932e268628ae4667507aa09c7e853274961f801", "bytes": 12016}, + "wolff-olins": {"name": "Wolff Olins", "category": "Agencies & Studios", "description": "Global brand consultancy site: white and black with grey text ramp and one acid yellow #fff84b footer, Untitled Serif statement at 64px with -1.76px tracking, Monument Grotesk 20px and 16px interface text, full-bleed project carousel and pill-shaped controls.", "sha256": "adbe39974667e28baa42788a16adce9c3b4469d10bf87c91de67eec9be3888bf", "bytes": 9039}, + "wolverine-worldwide": {"name": "Wolverine Worldwide", "category": "Fashion & Apparel", "description": "Wolverine World Wide corporate site: black, white and grey with ABC Diatype bold at 168px and -8.4px tracking, 33px statements, translucent #0000001a buttons, 12px radii, a rounded #010101 footer and outdoor lifestyle photography.", "sha256": "7e8d41883cf4a509f990ffa4169878b8e86504b1e0f475bec245c1f89ebd0644", "bytes": 10758}, + "won-j-you-studios-2": {"name": "Won J. You Studios", "category": "Culture & Events", "description": "Won J. You Studios: near-black design-mentorship portfolio (#0a0a0a body, #050505 rail) with coral #ef5143 uppercase avantt 800 headlines at 168.667px, cream #fee9ce navigation, orange #ffb261 connect tab, flat surfaces and zero shadows.", "sha256": "f75c347acdbdf2799894b6b62cc341b9d74434e9c1cc427221202ab4c56c1661", "bytes": 11497}, + "wonderflow": {"name": "Wonderflow", "category": "Design Systems", "description": "Wonderflow marketing site for its agentic consumer-intelligence platform: system-ui sans at bold 700 with tight tracking (52.4442px display, 20px body), a single brand red #e00000 (hover #c10000) on 4px-radius buttons, slate text #444954 over white and #f8f9fa, and one near-black #1f2227 band. The look comes from the open-source Wanda design system's tokens.", "sha256": "fa999388ee95ec0757c754de5c7eac39c731e5c2ed3cdd6a87ad8bbc4a264651", "bytes": 15178}, + "wongnai": {"name": "Wongnai", "category": "Thai Brands", "description": "Wongnai (wongnai.com), Thailand's restaurant and lifestyle review platform, renders a light-grey #edf0f2 page with white 8px-radius content blocks, Thai type in the self-hosted DB Heavent Now (400/500/700) over a Helvetica Neue base, a #0093e8 blue for search, tabs and links, a #3d4245 grey ink, small 8px cards with a soft rgba(0,0,0,0.08) shadow, and dark-red #880b0b rating badges.", "sha256": "81c4509a4cad75cdae5adcaf114b21b908cc7bed3d14b69bd17169e9aced02fa", "bytes": 23168}, + "wookco": {"name": "Wookco", "category": "Thai Brands", "description": "Wookco (sustainable travel booking) design system: Plus Jakarta Sans 48px headings with Inter body, white canvas, emerald #286648 primary, navy #1a263f ink and pills, coral #f5835b promos and 22px cards with a navy-tinted soft shadow.", "sha256": "e6d86d1e887c4f17275853a6ccd44bd1663d74621da1bf6fa584a25caa183387", "bytes": 11906}, + "wordpress": {"name": "WordPress", "category": "Design Systems", "description": "The WordPress.org homepage pairs EB Garamond display headlines at 70px with Inter body text at 16px, a single blueberry action color #3858e9 on 2px-radius rectangular buttons, light-grey #f6f6f6 bands, and a near-black #1e1e1e showcase section. Pill-shaped 9999px rounding appears only on small items; everything else is flat with hairline #d9d9d9 borders.", "sha256": "f1c5fbcd5268257fc197c3f26ed2789a1cd414eaf69251ba0b7cafa1ed49dee0", "bytes": 11186}, + "work-co": {"name": "Work & Co", "category": "Agencies & Studios", "description": "Work & Co (part of Accenture Song) runs a near-monochrome editorial system — pure #ffffff canvas, #000000 ink, and a single red signal in two shades (#ff3029 logo/top bar, #db2223 links). Headlines are Monotype's HelveticaNowDisplay at weight 500 with tight negative tracking (56px/56px/-1.12px h1), body copy is Adobe Garamond Pro (adobe-garamond-pro) at 20px/30px, the only filled button is a black 50px-radius pill (10px 25px, 47px tall), and everything else is hairline dividers (#dddddd) on a 12-column, 750/1100/1800px breakpoint grid with zero shadows and square imagery.", "sha256": "4eb22c5b32e274935524d48def9621202092da0f5958522df195e1e873b47d8c", "bytes": 29372}, + "workday": {"name": "Workday", "category": "Design Systems", "description": "Workday's marketing site is a deep-navy canvas (#022043) set in Acid Grotesk at weights 400 to 800 (56px display, -2% tracking), with white text, a blue pill CTA (#0057ae, 24px radius) and gradient-washed AI storytelling; its Sana Canvas design system documents tokens on an 8px grid, Roboto and Sana Sans VF type, and a navy (#000080) pill button.", "sha256": "1d218edc62dda54a242d85fa5eddf928af60a117cf19d56e8bbfcd4aed999107", "bytes": 14955}, + "working-stiff-films": {"name": "Working Stiff Films", "category": "Culture & Events", "description": "Working Stiff Films: comedic commercial-production studio site with a cream #f0ecd9 and slate #282d35 palette, red #d93535 accent, Grand Bold uppercase display at 71.104px, PP Neue Montreal text, 5px corners and a toothy mascot illustration.", "sha256": "09b529d6d88d2c0e1aaacf7459280d5d623c7816a36e7f6a6edd11c6fbcfb6d5", "bytes": 10006}, + "workloft": {"name": "The Work Loft", "category": "Thai Brands", "description": "The Work Loft (theworkloft.com), a coworking, meeting-room and private-office space in Silom, Bangkok. Raleway 700 headings, Avenir Light body at 15px, raspberry #e42c54 buttons and feature panels with 6px radius, charcoal #3c4444 text and footer, white canvas and a #fafafa section tint.", "sha256": "916c012ca01b680da1bd8b5614d7af36ac0070d8e15318bda4053ea36209c53d", "bytes": 8992}, + "workos": {"name": "WorkOS", "category": "Developer Tools & IDEs", "description": "WorkOS's site sets Untitled Sans 500 headlines very tight (80px/84px at -5.6px) on white #ffffff and #f9f9fb sections with #29363d ink, uses a brand purple #6363f1 pill CTA (100px radius, hover #7777f3) and a glowing mint #23f0c3 pill on the deep navy #030527 developer band, with layered soft shadows on cards.", "sha256": "fec8e4572442144eb265934f65b53157185cb4bca22d058b0c525c7e502c64d9", "bytes": 13267}, + "workpoint": {"name": "Workpoint Entertainment", "category": "Thai Brands", "description": "Workpoint Entertainment: Thai TV and entertainment group site with navy #222963 and #10132d grounds, electric blue #3a6ad9 accent, white Outfit 700 uppercase hero at 138.366px, Sarabun for Thai, square outlined buttons and 4px card radius.", "sha256": "3539960a7bc875a881eb14cbc8651c67ef59e6d31b5b264aa22ec7850b76b9c4", "bytes": 10431}, + "world-bank": {"name": "World Bank Group", "category": "Government & Nonprofit", "description": "World Bank Group: international development portal with navy #012740 feature bands, pale #e7edf3 sections, blue #0071bc and #004370 pill buttons at 32px radius, Open Sans 700 at 48px, 8px bordered stat cards and no shadows.", "sha256": "80db76f17dc70b40a57562830aaa112ca4e2ba2d2c3fa2a52d4eed27ec5c7b82", "bytes": 12273}, + "world-economic-forum": {"name": "World Economic Forum", "category": "Government & Nonprofit", "description": "World Economic Forum: global institution portal with a #0065f2 blue hero, white AkkuratLLWeb 900 headlines at 40px, pill buttons, 12px-radius story cards, soft two-layer shadows and uppercase 14px tracked category labels.", "sha256": "f331375503992aa462a478b17934078377e8261669a2610cbff01921fb28e68c", "bytes": 10569}, + "world-internetwork": {"name": "InternetThai", "category": "Thai Brands", "description": "InternetThai: Thai internet and hosting provider site with charcoal #333333 header and footer, grey #f3f3f3 service band, orange #e47b2a icons, Roboto and Kanit weight 400, 60px hero and 6px-radius service tiles with a soft grey shadow.", "sha256": "816e9698dbc49be279a0ddf5f218e67d5175e7d2438b3fc0f4c0ed88f5c07d86", "bytes": 9081}, + "world-internetwork-corporation-otaro": {"name": "OTARO", "category": "Thai Brands", "description": "OTARO: Thai telephony and hosting operator site with brand blue #2468b3, grey #f3f3f3 service band, charcoal #333333 footer, Roboto and Kanit weight 400, 55px hero title, outlined ghost button and 6px-radius soft-shadow service tiles.", "sha256": "300d7de1dd911cd7385b347604babe75855ae161b0d4beb6f167179ce10bb8b6", "bytes": 9468}, + "wpp": {"name": "WPP", "category": "Agencies & Studios", "description": "WPP: global communications group site on a white canvas with navy #000050 text and controls, wppSans weight 300 uppercase display at 52px, 4px-radius buttons, a floating navy pill nav, warm #fafaf0 footer and image-led case tiles.", "sha256": "8b279ac47626f6065028a8a07c75a6e9d55ab32452dc6ee42e38f9a0dc67d1cd", "bytes": 10731}, + "wwf": {"name": "WWF", "category": "Government & Nonprofit", "description": "World Wildlife Fund (worldwildlife.org) pairs full-bleed wildlife photography with a warm off-white canvas (#fefcf9), deep ocean-blue bands (#0f3d57) and pale blue sections (#eef4fa); Open Sans throughout with 54px/700 condensed (font-stretch 75%) two-tone headlines, near-black #0f0f0f ink, terracotta Donate (#cb4328) and oxblood Gifts (#6f190b) pill buttons, and 4px-radius cards.", "sha256": "4b1bfef0c8c31ce9380cfe5062550429ec340aff8b20b7119662cb66ba89e01a", "bytes": 22377}, + "wyndham": {"name": "Wyndham Hotels & Resorts", "category": "Travel & Hospitality", "description": "Wyndham Hotels & Resorts: hotel-booking site (APAC deals page) with a #282828 header, Wyndham blue #0065ab square uppercase buttons, HCo Gotham SSm 300 body at 15px and 700 headings at 28px, white and #f4f4f4 bands, 0px radii and no shadows.", "sha256": "96d71552a8d8258ebd88a44cba8e0daa231d6559f3723da3f135b05c2c1780c1", "bytes": 10352}, + "x-ai": {"name": "SpaceXAI (x.ai)", "category": "AI & LLM Platforms", "description": "SpaceXAI (x.ai) is a warm-white developer-product site: near-black #0a0a0a pill buttons, the variable sans xVf at weight 450 with -0.6px tracking, GeistMono for code, #f9f8f6 cards at 16px radius, and ember-orange gradient art as the only saturated color.", "sha256": "fca981a9b21eecf9d7cb8cbc03a726ebfe9073ec96461a14902bde254a8d7e5d", "bytes": 13055}, + "xbox": {"name": "Xbox", "category": "Gaming", "description": "Xbox.com (Microsoft) runs a full-bleed, image-led storefront on a black #000000 canvas with white #ffffff Segoe UI type, square 0px-radius CTAs set in SegoeProBlack 15px/900 uppercase, a Game Pass lime #9bf00b button with dark-green #054b16 label on its evergreen pages, heritage Xbox green #107c10 as the --brandColorPrimary token, campaign takeovers that recolour CTAs (currently red #f00000), and a light-grey #f2f2f2 Microsoft footer in #616161 11px text.", "sha256": "5b254212b42305be7aaf53da145cde7e510f807311cdb5a4d88052c55667e1d0", "bytes": 31331}, + "xiaohongshu": {"name": "Xiaohongshu", "category": "Media & Consumer", "description": "Lifestyle UGC social platform. Singular brand red, generous radius, content-first.", "sha256": "30098d02d9b565adb9706c9d31e6d92e795cc9263e5c2e8d906f5d3f36404055", "bytes": 25113}, + "xiaomi": {"name": "Xiaomi", "category": "Consumer Electronics", "description": "Xiaomi Global (mi.com/global) — a white-and-#f7f7f7 product showroom set entirely in MiSans Latin, with #191919 ink, a #191919 footer, Xiaomi orange #ff6900 reserved for nav hover and focus rings, 12px-radius controls and 999px pill details around full-bleed product photography.", "sha256": "03aaa29b28a165a1610c712eef6704216249ac6c1a5c9081a6dcd98181a9c422", "bytes": 15438}, + "xox": {"name": "XOX by makemepulse", "category": "Culture & Events", "description": "XOX by makemepulse: playful avatar-game microsite on bubblegum pink #ffbbff with navy #204a78 labels, magenta #ff4fff and #ff34ff accents, Bangers 80px lettering, hand-lettered button face, Poppins 16px text and white 32px-radius pills.", "sha256": "691cf729e02459f76245043c2002c2408c83c03a9b83b06e61fa2240c9cb4db2", "bytes": 9496}, + "y-u-t-corporate": {"name": "Y.U.T Corporate", "category": "Thai Brands", "description": "Y.U.T Corporate: Thai enterprise IT and internet services site with brand blue #0087e2 navigation and buttons, Prompt typeface weights 300 to 700, 50px uppercase hero, 20px-radius feature cards and blue-tinted shadows in rgb(0, 78, 190).", "sha256": "68ce1f64da0424956feb01da72b000300156e24ff1a4b7dd20240372c98245c5", "bytes": 10306}, + "yahoo-japan": {"name": "LY Corporation", "category": "Design Systems", "description": "LY Corporation corporate site (lycorp.co.jp/en): a white canvas with near-black #2e2e2e ink and no saturated accent, set entirely in LINESeedJP (400 and 700) with 38px display headlines, 20px, 12px and 8px rounded image cards and a soft 25px rgba(0,0,0,0.1) shadow over candid photography.", "sha256": "616e00c3450aeb89d29d38dea2e1de190a398c9a48a9671b31f4b50da9fcced8", "bytes": 9668}, + "yale-university": {"name": "Yale University", "category": "Education", "description": "Yale University: flagship university site in Yale blue #00356b on white with charcoal #222222 footer, yale serif headings at 36px, Mallory sans body at 20px, 14px uppercase tracked buttons, interactive blue #286dc0 and square 0px corners throughout.", "sha256": "f4838284096f4e926e26bfa4971338946645373f886c4a587e0f20050d84894d", "bytes": 10605}, + "yamaha": {"name": "Yamaha Music USA", "category": "Music & Audio", "description": "Yamaha Music United States (usa.yamaha.com) measured on the live site: white canvas #ffffff with Yamaha purple #48207b for brand and links, dark #222222 footer, GTAmerica 700 uppercase 83px hero headlines, Oswald 500 category labels, Helvetica Neue 14px UI text, and a single 8px radius. Photography-led product grid.", "sha256": "fb93b4ced0d6e7759d0721cf11ca050ffe2f114b577446105eb66f78f4b53f5b", "bytes": 10650}, + "yamaha-motor": {"name": "Yamaha Motorsports USA", "category": "Automotive", "description": "Yamaha Motorsports USA (yamahamotorsports.com) measured on the live site: Yamaha blue #003087 square-cornered CTAs, a black #000000 and white #ffffff band rhythm, Bebas Neue Pro uppercase headlines at 38px and 45.6px, Montserrat 14.44px body, and full-bleed motorcycle photography.", "sha256": "d5a8f3ba7bbc7d0ec810b7cf8575c86519f684c4fd91f54be1fa6c41c21318eb", "bytes": 11015}, + "yame-the-molazone": {"name": "Molazone - Yamê Official Website", "category": "Culture & Events", "description": "Molazone, the official website of the artist Yamê (mola-zone.com), measured on the live site: near-black canvas #0b0b0c, pure white #ffffff text, the single typeface Kern at 700 uppercase in 10px, 12px and 16px sizes with 0.44px to 1.36px tracking, one 50px radius, and monochrome line-illustration artwork.", "sha256": "e9c5e7f74136c8e0168405133cfd0e7b967c0fd9c5579050c53f41d2414b2782", "bytes": 9114}, + "yayoi-thailand": {"name": "ร้านอาหารญี่ปุ่นยาโยอิ (Yayoi Thailand)", "category": "Thai Brands", "description": "Yayoi Thailand restaurant and delivery site by MK Restaurant Group - white page under a #ffd500 yellow header, hot-pink (#f0609f) pill buttons with 80px radius and magenta (#ec008c) accents, set in db_helvethaica at 17.5px body and 35px bold headings.", "sha256": "240a145bef6ee95a7d83fb2c49ee5d3ef023a45c18b33a9c6bcb1e3932785c4a", "bytes": 9938}, + "ynab": {"name": "YNAB", "category": "Fintech & Crypto", "description": "YNAB (You Need A Budget): a buttermilk #fef9ed page with a blurple #545bfe hero, midnight #1c1f58 ink and header, Wishfarm Semibold headlines (64px, -0.64px) over Figtree body, firefly-green #aee865 CTAs with 6px corners and #1c1f58 text that deepen to #93d53e, white 12px stat cards, and wavy green and blue section edges.", "sha256": "8f414ba426dfd8131c689b31af7088f485f64e4a9cd06fdd95dacf509e0fe899", "bytes": 14611}, + "youtube": {"name": "YouTube", "category": "Music & Audio", "description": "YouTube logged-out homepage in Thailand: a white #ffffff canvas with near-black #0f0f0f Roboto type (24px/900 heading, 14px/500 controls), an outlined 20px-radius Sign in pill in action blue #065fd4, a capsule search bar and brand red #ff0033 only in the logo.", "sha256": "33596593270d5b6ef85a15210bf46bbd30be9424a326ef13020e904b07e7bfca", "bytes": 9370}, + "yucca-packaging": {"name": "Yucca Packaging", "category": "Food & Beverage", "description": "Yucca Packaging (yucca.co.za), a South African food and produce packaging supplier, measured on the live site: porcelain page #fffdf5 over oat #dfdac6 bands, charcoal #1d1d1b ink and buttons, deep forest green #12271d, the single typeface Magnetik at weights 200 and 300, and small 3.28px, 6.56px and 13.13px radii.", "sha256": "f61b8f17784b453069ea973e87979c7751fa0b7eeff787cf14cb9a9bf36bf7fe", "bytes": 12001}, + "zapier": {"name": "Zapier", "category": "Productivity & SaaS", "description": "Zapier is a warm paper-toned marketing site: cream canvas #fffefb, reddish near-black ink #201515, one orange (#ff4f00) with 4px-radius buttons, Degular Display 500 at 56px for the hero, Inter for UI and body, and a light Serrif serif for card titles.", "sha256": "594f4c4bf03517c4f20c437ddf6a1c63a26ea4aa384d44e55ed08ec6a301bd12", "bytes": 14273}, + "zappos": {"name": "Zappos", "category": "E-commerce & Retail", "description": "Zappos.com: Caslon Ionic serif section titles at 24px/28.8px weight 500 over a white canvas, Modern Gothic sans for everything else at 16px/21.6px, black #000000 ink and square-cornered uppercase buttons with 2px radii, a #ffe300 yellow app button, #ffb967 orange and #ffe336 yellow promo bands, pill-shaped color swatches and #d12015 sale prices.", "sha256": "464e77ddf9f1b42206de72901ed97985c247a29af98b735620b227a96ba1f87c", "bytes": 12853}, + "zara": {"name": "Zara", "category": "Fashion & Apparel", "description": "Zara's storefront is a monochrome editorial frame around full-bleed fashion photography: Helvetica Now Text at weight 300 for almost every word (13px uppercase nav, 12px/18px body, 11px/16px uppercase product names, 10px micro copy), a Didot 32px campaign line, #000000 ink on a #ffffff canvas, square 0px buttons — black #000000 filled 32px tall with 2px 12px padding that hovers to #333333 — and a #0170e9 focus ring.", "sha256": "99581f771285edf9d97315d288b80d04684b71b3f15a880c0df1d171d3b96a83", "bytes": 25854}, + "zed": {"name": "Zed Industries", "category": "Developer Tools & IDEs", "description": "The zed.dev home page as Zed Industries runs it — IBM Plex Serif headings at 25.6px/390 and iA Writer Quattro body at 14px on a warm #eee7e7 textured field with white #ffffff panels, Zed brand blue #1348dc and Delta red #bf3c27 Download buttons with a 4px radius and an inset bottom shadow, and a live-looking editor mock built from #dcdcdd, #fafafa and #f5f5f5 surfaces.", "sha256": "12b37a19a0bf3d9084ebeae6eadef2e5e1b6dea7a02e2ef37622e320c933b962", "bytes": 15575}, + "zendesk": {"name": "Zendesk", "category": "Design Systems", "description": "Zendesk's marketing site: Vanilla Sans in medium weight at a 68px display size, near-black ink (#11110d) on white and warm grey (#f5f5f2) surfaces, a lime #d1f470 call-to-action button with 16px corners, a deep forest green band (#203524) and a darker lime-green accent (#70a32a) used for emphasis words, with very round 40px content cards and full-bleed photographic heroes.", "sha256": "cce300fc26453790ef90cf538d64f852dbe100287cdbe92c6ef76f9eed345396", "bytes": 10296}, + "zentry": {"name": "Zentry", "category": "Tech & AI", "description": "Zentry (zentry.com), a Human-Agentic OS and token project, measured on the live site: electric violet canvas #5542ff, lavender-mist text #dfdff2, black #000000 bands, ZentryScreamer 900 uppercase headlines up to 160px with negative tracking, Roboto Mono for all small text, and 4px, 6.4px and 8px radii.", "sha256": "9e13b1d333d9ea8ccb0aace55fdbf91b424452b053ea15fa5345a0dc10600e2f", "bytes": 10880}, + "zeroz-brand-site": {"name": "/zeroz Official Site (Otsuka Pharmaceutical)", "category": "Food & Beverage", "description": "The official site of /zeroz (ゼロズ), Otsuka Pharmaceutical's Active Inner Resource supplement (otsuka-air.jp), measured live: near-black canvas #111312, signature green #00a852, white text, HelveticaNowDisplay for English display and TazuganeGothic for Japanese body at 18px with 1.8px tracking, and square 0px corners.", "sha256": "a2751ca4fa184a6fb3775a7d00b2cec96dea13799cd022d1b2ade7b1282daa98", "bytes": 10418}, + "zettajoule": {"name": "ZettaJoule", "category": "Tech & AI", "description": "ZettaJoule (zetta-joule.com), an advanced nuclear technology company, measured live: white and duck-egg #f1f5f8 canvas, grey-brown ink #524f4b, dark blue #3d5e86 primary, Geist at weight 250 up to 177.776px with negative tracking, Inter for body, a blue-to-peach hero and 3.56px radii.", "sha256": "bedeae2687923b887f3f8ffad406d7fbaf69fde3a19506952e568474027c3060", "bytes": 10728}, + "zillow": {"name": "Zillow", "category": "Real Estate & PropTech", "description": "Zillow home page: Object Sans 900 60px hero headline over photography, Inter 400/700 for UI with #535364 body and #111116 headings on #ffffff, Zillow blue #0041d9 buttons with 12px corners (hover #0033ab), outlined blue 'Sign in' variants, 20px-radius white cards with #cdcdd3 borders, a #f7f7f7 band and #d03c0b listing badges.", "sha256": "9007c8d2972a1ec32b63745b8781ca8c99b9a21ee0b2b90c722965b05647bc77", "bytes": 12263}, + "zoom": {"name": "Zoom", "category": "Product & SaaS", "description": "Zoom (www.zoom.com), the AI-first work platform, measured on the live home page: white canvas, navy ink #00053d, Zoom blue #0b5cff primary buttons with 12px radius, Newsreader serif headlines at 54px and 48px, Inter UI text at 14px and 16px, and a blue-to-violet gradient hero with rounded product-preview cards.", "sha256": "7045bab4ef4774f199d22f7500ce1e3ac68e1af3cdee8a83f86608ff2180c201", "bytes": 13464}, + "zoox": {"name": "Zoox", "category": "Logistics & Mobility", "description": "Zoox (zoox.com), the autonomous robotaxi service, measured on the live site: pale mint-grey #d3e4df and white fields, near-black ink #0d1212, mint green #64d5b3 call-to-action fills with 12px uppercase labels, GT Standard type at 56px and 28px, and large 16px to 36px rounded photographic cards.", "sha256": "d22a41aec71f231c1084effeea7153d0d57b65545ae21d4767e6cafdf8032d61", "bytes": 11622} + } +} diff --git a/skills/scd-uiux/data/vendor/design-systems/library/100-lost-species/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/100-lost-species/DESIGN.md new file mode 100644 index 0000000..fc26576 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/100-lost-species/DESIGN.md @@ -0,0 +1,116 @@ +--- +version: alpha +name: 100 Lost Species +category: "Culture & Events" +description: "Black memorial entry page for 100 Lost Species: Reckless Neue 72px weight 100 serif headline, Enduro 14px weight 300 body, white (#ffffff) Enter button on a #000000 canvas, 12px/24px/46px/60px spacing steps and a pill radius." +colors: + canvas: "#000000" + ink: "#ffffff" + primary: "#ffffff" + on-primary: "#000000" + hairline: "#0000001a" +typography: + display: + fontFamily: Reckless Neue + fontSize: 72px + fontWeight: 100 + body-dominant: + fontFamily: Enduro + fontSize: 14px + fontWeight: 300 +rounded: + pill: 9999px +spacing: + s1: 12px + s2: 24px + s3: 46px + s4: 60px +components: + button-enter: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.body-dominant}" + page: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.body-dominant}" +--- + +## Overview + +100 Lost Species presents itself, on the measured entry page, as a digital memorial. The page is a single dark screen: a small bird-outline icon in a thin square frame, a three-line serif headline reading "100 Lost Species, A Journey Through Extinction", a short paragraph that calls the project "a digital memorial, a wake-up call for humanity", one white "Enter" button, and a credit line at the bottom ("A website by Immersive Garden and 60fps."). Nothing else is on the page. The extraction recorded 42 visible elements and a scroll height of 800px at a 1280px viewport, so the entry screen fits in one viewport with no scrolling. + +The mood is quiet and ceremonial. Large areas of black, a single light serif, a single light sans, and very few elements give the page the tone of a title card in a film or an exhibition threshold. Dark grey rectangular fragments drift around the centre of the capture, like confetti or falling paper, and they are the only decoration. They are imagery, not interface, and they are not tokenised here. + +This document describes only what was measured on the entry page. The experience behind the Enter button was not measured, so anything that exists inside it (species pages, navigation, map, audio) is not documented here and is "not measured". + +## Colors + +The palette is two values. The canvas is `#000000`, measured as the body background and confirmed on capture pixels (the capture is dominated by a near-black, `#010101`, which covers about 95% of pixels). The ink is `#ffffff`, the most-read text colour by character count (298 characters against 5 characters of `#000000`). + +- **Canvas `#000000`**: the whole page background. +- **Ink `#ffffff`**: headline, paragraph and credit line. +- **Primary `#ffffff`**: the Enter button is a white fill; the single call to action therefore reuses the ink colour as its background rather than introducing an accent hue. +- **On-primary `#000000`**: the label colour of the white button, measured as the second text colour on the page. +- **Hairline `#0000001a`**: a 10% black border colour found in the border measurements and the CSS corpus (9 uses). On a black canvas it is invisible. + +The site stylesheet also contains other colours that were not seen as page colours in the measured screen: `#1c1c1c`, `#d6c4a0`, `#970317`, `#e8e8e8` and translucent whites (`#ffffff1a`, `#ffffff26`, `#ffffff4d`, `#ffffff80`). They exist in the CSS corpus only, with one to four uses each, and are used by the experience behind the entry screen or by states that were not captured. They are not assigned a role. Translucent white borders (`#ffffff1a`, `#ffffff26`) were measured in the border table, but their elements were not tied to a selector. + +## Typography + +Two families are loaded: **Reckless Neue** (loaded at weights 100 and 300) and **Enduro** (loaded at weights 300 and 400). + +- **Display, Reckless Neue 72px, weight 100.** Reckless Neue accounts for 41 characters on the page, all at 72px and weight 100 in the character-weighted measurement. This is the three-line headline. A light, high-contrast serif at a large size sets the commemorative tone. On the mobile pass the character-weighted sizes were 14px, 32px, 10px and 15px; the 32px entry is the mobile counterpart of the large size, but the element-level tie was not recorded. +- **Body, Enduro 14px, weight 300.** Enduro accounts for 262 characters, and 14px weight 300 is the dominant size and weight (220 characters). The paragraph and credit text use Enduro. The paragraph is centred and set in a narrow column. +- **Small text.** 12px (37 characters) and 15px (5 characters) were also measured. Weights 400 and 700 appear for 21 characters each; the credit line shows names in a heavier weight than the surrounding words, as seen in the capture. + +Both families appear in the page's font-face list; no foundry pages were opened, so no licence or metric claim is made. For a substitute in prototypes, any light high-contrast serif for the headline and any light neo-grotesque for the body will serve visually; this is a design recommendation, not a measurement. No letter-spacing was measured (the letter-spacing table is empty). + +## Layout + +The page is centred on both axes in a 1280px-wide viewport with an 800px scroll height. Content runs top to bottom in a single column: icon, headline, paragraph, button, credit. Measured gaps and paddings are small in number: a 46px gap (2 uses), and paddings of 60px, 12px and 24px. These are published as the spacing tokens s3, s4, s1 and s2 respectively. No grid, container max-width or breakpoint list was recorded. The paragraph is visibly narrower than the headline, producing a tapered, centred text block. Vertical space is generous relative to the amount of content: the page has no header bar and no footer beyond the credit line. + +## Elevation & Depth + +No box shadows were measured on the page or in the stylesheet (the shadow lists are empty). Depth comes from the dark rectangular fragments that float around the content in the capture, drawn at different sizes and brightness levels, and from contrast between the white type and the black ground. The thin frame around the bird icon is an outline, not a raised surface. There are no cards, modals or layered panels on the entry screen. + +## Shapes + +The only measured radius is `50%` (3 uses), recorded as the pill token `9999px`. It belongs to circular elements that the extraction found; the Enter button itself shows square corners in the capture, and its radius was not measured, so no button radius token is declared. The bird icon frame and the drifting fragments are rectangular. The shape language is therefore mostly square and rectilinear, with circular marks as the exception. + +## Components + +- **Enter button.** White fill (`#ffffff`), black label (`#000000`), body-size Enduro text, rectangular. It is the sole call to action. The extractor did not classify it as a CTA, so its padding, height and radius were not measured; the component token lists only the colours and type that were measured. +- **Brand mark.** A bird outline icon in a thin square frame above the headline. It is a graphic; no size was measured. +- **Credit line.** Small Enduro text at the foot of the page naming the builders, with the names in a heavier weight. +- **Page shell.** Black canvas, white ink, Enduro 14px weight 300. + +Hover states: the extraction recorded none (the hover list is empty), so hover behaviour is not measured. + +## Design System Architecture + +No public design system, brand guidelines or token package was found for 100 Lost Species. The homepage fetched as text exposed only the title "100 Lost Species" and no links to about, credits or brand pages. The de-facto system is the one measured here: two web fonts (Reckless Neue and Enduro) declared through font-face, a black and white palette, a 14px body size, and a handful of spacing values. The extraction found no CSS custom properties on the root (the rootVars list is empty), so the site does not expose a token layer. The credit line on the page attributes the site to Immersive Garden and 60fps; no studio pages were opened, so nothing further is stated about the build. + +## Do's and Don'ts + +- Do keep the canvas at `#000000` and the type at `#ffffff`; the page has no third colour on screen. +- Do set the headline in a light serif at 72px, weight 100, and the body in a light sans at 14px, weight 300. +- Do keep a single call to action, white fill with black text. +- Do centre the content and leave large empty black areas around it. +- Don't add accent hues from the stylesheet (`#d6c4a0`, `#970317`) as brand colours; their on-screen role was not measured. +- Don't add shadows; none were measured. +- Don't treat the drifting fragments as interface; they are decoration. +- Don't document the experience behind Enter from this file; it was not measured. + +## Responsive Behavior + +Only the mobile character-weighted font sizes were recorded: 14px, 32px, 10px and 15px, against 14px, 72px, 12px and 15px on desktop. The mobile pass found no h1, h2, body text, CTA or nav role. Layout changes at narrow widths, breakpoints, touch targets and the behaviour of the button are not measured. + +## Iteration Guide + +1. Start from the black canvas and white ink; add nothing else to the palette until a new measurement exists. +2. Use Reckless Neue 72px weight 100 for the single headline and Enduro 14px weight 300 for supporting text. +3. Reuse the spacing steps 12, 24, 46 and 60px. +4. Re-measure the post-Enter experience (run the extractor on its URL) before documenting navigation, cards or species pages. +5. Measure the Enter button's padding and radius with a recorded probe before adding them as tokens. +6. Re-run `node web/scripts/verify-designs.mjs --slug=100-lost-species` after every edit. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/12go/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/12go/DESIGN.md new file mode 100644 index 0000000..3e49283 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/12go/DESIGN.md @@ -0,0 +1,180 @@ +--- +version: alpha +name: 12Go +category: "Thai Brands" +description: "12Go (12go.asia) travel-booking site measured in system-ui sans: 24px/700 white hero line, 22px/700 section heads, 16px/400 body, a #4db84d green Find Tickets button with 4px radius and 52px height on a #f4f4f4 canvas with white cards." +colors: + canvas: "#f4f4f4" + page-largest: "#ffffff" + ink: "#4b4b4b" + primary: "#4db84d" + on-primary: "#edf8ed" + primary-hover: "#3a8a3a" + surface-footer: "#404040" + ink-muted-footer: "#a0a0a0" + hairline: "#eaeaea" + badge-danger: "#b84d4d" + attention: "#ff9900" + highlight: "#0da1e0" + promotion: "#be4cbe" +typography: + display: + fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 24px + fontWeight: 700 + lineHeight: 33.6px + heading: + fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 22px + fontWeight: 700 + lineHeight: 30.8px + body-base: + fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 22.8571px + body: + fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 12px + fontWeight: 400 + lineHeight: 17.1429px + button: + fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 18.6667px + nav: + fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 0px +rounded: + xs: 4px + sm: 6px + md: 10px + pill: 9999px +spacing: + s1: 4px + s2: 8px + s3: 12px + s4: 14px + s5: 15px + s6: 16px + s7: 20px + s8: 32px + s9: 52px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 14px 8px + height: 52px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + link: + textColor: "{colors.primary}" + typography: "{typography.nav}" + nav: + textColor: "{colors.page-largest}" + nav-link: + textColor: "{colors.primary}" + typography: "{typography.nav}" + card: + textColor: "{colors.page-largest}" + rounded: "{rounded.xs}" + boxShadow: rgba(0, 0, 0, 0.04) 0px 5px 8px 0px, rgba(75, 75, 75, 0.08) 0px 3px 6px 0px + footer: + backgroundColor: "{colors.surface-footer}" + textColor: "{colors.ink-muted-footer}" +--- + +## Overview + +12Go is a multi-modal transport booking platform. Its own About page describes it as selling tickets for trains, buses, ferries, vans, taxis, flights, rail passes and tours, with its deepest coverage in Southeast Asia, founded in Singapore in 2012 and incorporated as 12Go Asia Pte., Ltd. The measured English home page (12go.asia/en, 1280px wide, 1,775 visible elements, 9,877px tall) is a long, dense, utilitarian marketplace page rather than an editorial brand page. + +The capture shows a photographic header with a dark-to-transparent gradient. Over it sit the logo, a modal nav (Trains, Buses, Flights, Ferries), Support, language and currency (English, THB), the white bold line "Trains, Buses, Ferries, Transfers, Flights – Across Asia & Beyond", and a single-row search form with a green "Find Tickets" button. Below the header the page becomes a pale grey canvas with white route cards that carry large destination photographs, a "Get our free app" banner (the page states 2M+ downloads and a 4.7 rating, with no source), rail-pass cards with red "New" badges, a travel-guide photo grid, and long white panels of plain-text route links grouped by country ("Popular Routes in Thailand", "Popular Routes in Malaysia"). The footer is dark grey. + +The voice is functional: place names, prices ("From THB 1,725") and verbs ("Find Tickets"). Green is the only strong interface colour; photography supplies the rest of the colour. + +## Colors + +All values below were measured on the live page or read from its root CSS custom properties. + +- **Canvas `#f4f4f4`**: body background (`--body-bg`, also `--brand-gray-lighter`). +- **Cards and panels `#ffffff`** (`page-largest`): the largest-area background (6,632 area weight against 2,242 for the footer grey). +- **Ink `#4b4b4b`** (`--brand-black`): the most-read text colour (9,774 characters). +- **Primary `#4db84d`** (`--brand-primary`): the Find Tickets fill, the section sub-headings such as "Popular Routes in Thailand", and nav accents. +- **On-primary `#edf8ed`** (`--brand-primary-faded`): the button label. +- **Primary hover `#3a8a3a`** (`--brand-primary-darker`): recorded in the hover measurement. +- **Footer surface `#404040`** (`--brand-black-darker`) with footer text `#a0a0a0` (`--brand-gray-darker`). +- **Hairline `#eaeaea`** (`--brand-gray`): the measured border colour. +- **Badge red `#b84d4d`** (`--brand-danger`): appears as a measured background (area weight 4) and matches the "New" badges in the capture. +- **Status accents from the root variables:** attention `#ff9900`, highlight `#0da1e0`, promotion `#be4cbe`. These are declared in the site's variables; their on-screen use on the home page was not tied to elements. + +The root also declares darker, lighter and faded steps for primary, info, warning, danger, attention, promotion and urgent colours (for example `--brand-primary-lighter #9dce9d`, `--brand-navy #1c2b39`, `--brand-purple #8c52ff`). They are not tokenised here because the measured page does not show them. + +## Typography + +12Go uses the operating-system UI font, not a webfont: the declared stack is `system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif` and no font files were loaded (the loaded-font list is empty). All 13,128 measured characters belong to that family. + +- **Display 24px / 700 / 33.6px line height**: the h1 over the header photograph, in white. +- **Heading 22px / 700 / 30.8px**: h2 "Where to Go" in `#4b4b4b`, and h3 "Popular Routes in Thailand" in `#4db84d`. +- **Body 16px / 400 / 22.8571px**: the dominant size (9,758 characters), used for card text, nav and route links. +- **Small 14px (2,430 characters)** for the button and footer text, and **12px / 400 / 17.1429px** for fine print such as "Scan to download the app". +- Other measured sizes: 20px (56 characters) and 36px (16 characters). Weights seen: 400, 700, 500 and 800. + +Letter-spacing was not recorded. Because the family is the platform font, rendered letterforms differ between operating systems; no substitute is needed. + +## Layout + +The page is a one-column flow of full-width bands. The h1 and h2 elements measure 1,140px wide inside the 1,280px viewport, giving a centred container with a 70px margin on each side. Route cards sit four across on the first band (273px wide, 337px tall in the extraction), rail-pass cards three across, travel-guide tiles in two rows of four, and the route-link panels in four text columns. The header search bar is a single row of fields ending in the button; the header height variable is `--header-height: 52px`. + +Spacing is built on small steps: gaps of 8px (40 uses), 4px (16), 16px (4), 32px (2) and 12px (2); paddings of 12px (76 uses), 8px, 15px, 16px and 4px. Those are the spacing tokens s1 to s9 (4, 8, 12, 14, 15, 16, 20, 32, 52). The page is dense: long lists of route text sit between photographic bands, and the 9,877px scroll height is the result of that stacking of lists. + +## Elevation & Depth + +Depth is shallow and soft. Cards use `rgba(0, 0, 0, 0.04) 0px 5px 8px 0px, rgba(75, 75, 75, 0.08) 0px 3px 6px 0px` (14 uses; the root variable `--box-shadow-base` is `0px 5px 8px rgba(0, 0, 0, 0.04)`). A heavier variant, `--box-shadow-2`, adds `0px 1px 3px rgba(75, 75, 75, 0.2)` and `0px 3px 6px 0px rgba(75, 75, 75, 0.2)` and is used once on the page. The nav sits over the photo with a `linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)` scrim (`--header-background-alpha`) so that white text stays readable. That scrim is a legibility device, not a brand colour. White panels on `#f4f4f4` are the main separation device. + +## Shapes + +Radii are small and square-leaning. `4px` is the base (`--border-radius-base: 4px`; 40 measured uses) for buttons and cards, with `4px 4px 0px 0px` on card tops (14 uses) and `0px 0px 4px 4px` on card bottoms (7). `6px` appears 8 times, `10px` once, and `50%` once for a circular element. Photographs fill the top of cards with only the upper corners rounded. The primary button is 52px high and 96px wide on desktop, with `14px 8px` padding. + +## Components + +- **Primary button "Find Tickets"**: fill `#4db84d`, label `#edf8ed`, 14px / 400, 4px radius, 52px height, hover fill `#3a8a3a`. +- **Header and nav**: text in white over the photo; the nav links Trains, Buses, Flights, Ferries, then Support, English and a currency selector; the logo is in green and white (`#4db84d`, `#ffffff` child colours). +- **Route card**: a white card with a photograph, the country label in white on the image, a bold route line (Bangkok → Pattaya) and "From THB" price in `#4b4b4b`; 4px radius and the soft shadow above. +- **Badge**: small red "New" label with a `#b84d4d` fill on rail-pass photographs. +- **Route-link panel**: white panel, a green 22px h3 with a green underline rule, and four columns of 16px links. +- **App banner**: photographic band with a QR code, store badges and a centred headline. +- **Footer**: `#404040` background, `#a0a0a0` text, 14px; it lists About us, Terms of Use, Privacy Policy, Support, Offices, Careers and partner links. + +## Design System Architecture + +No public design system or brand-guidelines page was found: the About page (https://12go.asia/en/about) and the footer of https://12go.asia/en do not link to one. The de-facto system is the site's CSS custom properties: 203 root variables, among them `--brand-primary #4DB84D`, `--brand-black #4b4b4b`, `--brand-gray #eaeaea`, `--body-bg #f4f4f4`, `--font-family-base`, `--border-radius-base 4px`, button variables (`--btn-primary-color`, `--btn-primary-bg-darker`), alert and state variables, and Font Awesome 6 font variables. Colour families follow a consistent naming ladder: `-black`, `-darker`, base, `-lighter`, `-faded` for each of primary, info, warning, danger, attention, promotion and urgent. Spacing and radius appear as raw values rather than as named variables. + +## Do's and Don'ts + +- Do use `#4db84d` for the single main action and for section sub-headings, with `#edf8ed` text on the button. +- Do keep the canvas `#f4f4f4` with white `#ffffff` cards. +- Do use the system font stack at 16px / 400 for body and 700 for headings. +- Do keep corners at 4px and shadows soft (`0px 5px 8px` at 4% black). +- Do let photography carry colour, with prices in plain `#4b4b4b`. +- Don't add a second hue to the main action; red, orange, blue and purple are status colours. +- Don't use the header gradient scrim as a brand colour. +- Don't use heavy shadows; one heavier variant exists and is used once. + +## Responsive Behavior + +The mobile pass (390px viewport width) measured: the h1 stays 24px / 700 and the h2 22px / 700; the primary button is 14px / 400 with `14px 8px` padding, 358px wide and 49px high; the nav bar is 390px wide and 40px high (against 57px on desktop). Character-weighted sizes on mobile are 16px, 14px, 22px, 12px, 24px and 20px, so the type scale is unchanged. The h1 box is 374px wide and 67px high on mobile (34px on desktop), which shows the headline wraps onto two lines. The column structure of cards at 390px was not measured. + +## Iteration Guide + +1. Start with canvas `#f4f4f4`, white panels, ink `#4b4b4b`. +2. Set one green `#4db84d` button, 52px high, 4px radius, with hover `#3a8a3a`. +3. Use the system font stack; 24px / 700 hero, 22px / 700 headings, 16px / 400 body. +4. Add status colours only for status: `#b84d4d` badges, `#ff9900` attention. +5. Check spacing against the 4, 8, 12, 16, 32 steps. +6. Run `node web/scripts/verify-designs.mjs --slug=12go` after each edit. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/14islands/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/14islands/DESIGN.md new file mode 100644 index 0000000..0124b76 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/14islands/DESIGN.md @@ -0,0 +1,198 @@ +--- +version: alpha +name: 14islands +category: "Agencies & Studios" +description: "14islands' agency site is a near-monochrome editorial page: white #ffffff and #f2f2f2 grounds, almost-black #070707 text with grey #a2a2a9 and #797979 highlight words, Aften Screen at 160px/400 (-8px tracking) for the 'Design & Technology' headline and 23.7037px for captions, BentonSans 12px uppercase labels, a 3.7037px small radius and no shadows." +colors: + canvas: "#ffffff" + page-largest: "#f2f2f2" + ink: "#070707" + primary: "#a2a2a9" + ink-highlight-dark: "#797979" + sand: "#eae5df" + sand-highlight: "#a59d92" + beige-highlight-bg: "#e4ded7" + dark-highlight-bg: "#26272a" +typography: + display: + fontFamily: AftenScreen, sans-serif + fontSize: 160px + fontWeight: 400 + lineHeight: 128px + letterSpacing: "-8px" + display-mobile: + fontFamily: AftenScreen, sans-serif + fontSize: 60px + fontWeight: 400 + lineHeight: 60px + letterSpacing: "-3px" + headline: + fontFamily: AftenScreen, sans-serif + fontSize: 88.8889px + fontWeight: 400 + letterSpacing: "-3.55556px" + lead: + fontFamily: AftenScreen, sans-serif + fontSize: 66.6667px + fontWeight: 400 + lineHeight: 66.6667px + letterSpacing: "-2.66667px" + lead-mobile: + fontFamily: AftenScreen, sans-serif + fontSize: 30px + fontWeight: 400 + lineHeight: 30px + letterSpacing: "-1.2px" + body: + fontFamily: AftenScreen, sans-serif + fontSize: 23.7037px + fontWeight: 400 + letterSpacing: "-0.948148px" + label: + fontFamily: BentonSans, sans-serif + fontSize: 12px + fontWeight: 400 + lineHeight: 16.8px + textTransform: uppercase + label-mobile: + fontFamily: BentonSans, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 19.6px + textTransform: uppercase +rounded: + xs: 3.7px + sm: 5px +spacing: + s1: 10px + s2: 22.22px + s3: 37.04px + s4: 48.15px + s5: 96.3px + s6: 100px +components: + link: + textColor: "{colors.ink}" + typography: "{typography.label}" + nav: + textColor: "{colors.ink}" + typography: "{typography.label}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.label}" + section-label: + textColor: "{colors.primary}" + typography: "{typography.label}" + project-card: + textColor: "{colors.ink}" + typography: "{typography.body}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.lead}" + padding: 100px 0px 0px +--- + +# 14islands + +## Overview + +14islands (14islands.com, page title "14islands | Creative design & technology agency") says on its home page that "14islands designs and builds digital products, brands, and experiences — with offices in Stockholm and Reykjavík." Its Culture page ("Meet the islanders") describes an international team and four values — "Be inclusive", "Make waves", "Care to share", "Enjoy the ride" — plus Hack Days for "passion projects, experiment, and learn." + +The home page is a calm, very large-type editorial layout. The capture opens on a light grey #f2f2f2 band with the small numeric "14islands" logotype top left, a small uppercase line "CREATIVE PARTNER / WE CRAFT DIGITAL PRODUCTS AND BRANDS", and the headline "Design & Technology" set across the full width in Aften Screen at 160px: "Design" at left, the "&" in grey #a2a2a9, "Technology" pushed to the right. Below sits a wide dark showreel panel with UI screens and photography. Then a two-tone statement — "Branded Experiences" in grey, "that grow your business" in black — and a long two-column grid of project cards: image, then a caption "Cartier — Luxury", "Cogent — AI Technologies", "Xtend Health — Health Tech", where the client is black and the category grey. The grid gives way to a ruled list of further projects, the office sentence in large type with grey highlighted words ("digital products, brands, and experiences"), a short culture blurb, and the footer: "Let's make something great together" and "hello@14islands.com" in large type, small uppercase social links at the bottom. + +The art direction is product-led and photographic: devices, interfaces and portraits in muted, natural colour, framed by a white page. + +## Colors + +The root CSS declares the palette by name: + +- **Canvas `#ffffff`** (`--color-white`) — the body and the main content band. +- **Page-largest `#f2f2f2`** (`--color-background`) — the light grey of the hero band and of the mobile header. +- **Ink `#070707`** (`--color-almost-black`) — the most-read text colour: headlines, client names, nav. The site's actions are #070707 text links. +- **Primary `#a2a2a9`** (`--color-grey-highlight-light`) — the signature second tone: the "&" in the hero, "Branded Experiences", the highlighted words in the office sentence, the category half of each project caption and the "CREATIVE PARTNER" label (467 measured characters). The site has no filled CTA; this grey is its accent. +- **Ink-highlight-dark `#797979`** (`--color-grey-highlight-dark`) — the darker highlight grey, measured in the footer. +- **Sand `#eae5df`**, **sand-highlight `#a59d92`**, **beige-highlight-bg `#e4ded7`** and **dark-highlight-bg `#26272a`** — declared theme colours (`--color-sand`, `--color-sand-highlight`, `--color-beige-theme-animated-text-highlight-bg`, `--color-dark-theme-animated-text-highlight-bg`). Their names show a beige theme and a dark theme for animated text highlights; neither theme was active on the measured home page. + +The `--color-aila-*` variables (yellow #ffca6b, purple #a5a9fd) and the `--leva-*` variables belong to a client showcase and a developer control panel respectively and are not brand colours. The footer area also shows dark bands (#070707, #020202) in the measurement. + +## Typography + +Two families, self-hosted through Next.js (`/_next/static/media/`): + +- **Aften Screen** (`AftenScreen`, plus an `AftenScreenItalic` face) — every large and reading size, always weight 400 with negative tracking proportional to size (-5% at 160px, -4% at the smaller sizes): + - Display: 160px, line-height 128px, letter-spacing -8px ("Design & Technology"). + - Headline: 88.8889px, letter-spacing -3.55556px. + - Lead: 66.6667px/66.6667px, letter-spacing -2.66667px (the office sentence, the footer invitation). + - Body: 23.7037px, letter-spacing -0.948148px — the most-read size (713 characters: project captions and list rows). +- **BentonSans** (`BentonSans-Regular`) — 12px/400/16.8px uppercase for nav ("WORK, SERVICES, CULTURE, JOURNAL, AI, CONTACT"), labels and small links. + +An `Inter` face is also declared in `@font-face` but no measured element uses it. All measured text is weight 400; hierarchy comes from size, tone (black vs grey) and the switch between Aften Screen and small BentonSans capitals. The odd fractional sizes are computed values (the CSS also declares `--indent: max(0.9375rem, 3.7615740741vw)` and `--menuNavigationHeight: max(5rem, 7.6967592593vw)`). + +## Layout + +Content runs from x = 48 to 1232 at 1280px. The hero headline spans the full content width, split left/right. The project grid has two equal columns (`maxCardColumns` 2), each card an image above a single caption line; the measured gaps are 10px (most frequent), 37.037px and 22.2222px. Measured paddings are 48.1481px (8 elements), 100px (the footer's top padding) and 96.2963px. + +Small text blocks (labels and short descriptions) are placed in a narrow column starting near the centre of the page, while big statements run from the left margin, which gives the page a strong asymmetric rhythm. The page is long (9,267px measured) with generous white space between sections. + +## Elevation & Depth + +None. No box-shadow and no border colour are measured. Sections are separated by background changes (the #f2f2f2 hero band, white content, dark bands near the footer) and by white space; the further-projects list uses thin horizontal rules shown in the capture. Imagery provides all depth. + +## Shapes + +Measured radii are 3.7037px (20 elements) and 5px (1 element); the extractor did not record which elements carry them. Everything else computes square. The logo is a compact numeric wordmark ("14islands") drawn in SVG at 113×27px. + +## Components + +- **Header** — logotype at left, uppercase BentonSans 12px nav at right ("WORK", "SERVICES", "CULTURE", "JOURNAL", "AI", "CONTACT"); 7 header links visible. Hover changes only opacity. +- **Two-tone headline** — Aften Screen large type where a phrase or glyph is set in #a2a2a9 against #070707. +- **Section label** — BentonSans 12px uppercase in #a2a2a9 ("CREATIVE PARTNER") with a short black description under it and a small "SERVICES →"-style link. +- **Project card** — image, then a caption line at 23.7037px: client in #070707, " — Category" in #a2a2a9. +- **Project list** — rows of client and category on thin rules, below the grid. +- **Footer** — "Let's make something great together" and "hello@14islands.com" at 66.6667px, small uppercase links (Instagram, X/Twitter, LinkedIn, Privacy) and copyright at the bottom. + +## Design System Architecture + +No public 14islands design system, brand guideline or press kit was found on the pages opened (https://www.14islands.com/culture links only to social profiles, contact and privacy). The de-facto system is in the shipped CSS variables of the Next.js site: named colours with `--rgb` companions for alpha use (`--color-almost-black`, `--color-background`, `--color-grey-highlight-light/dark`, `--color-sand`, `--color-sand-highlight`), per-theme animated-text highlight backgrounds (beige and dark), a library of easing curves (`--ease-quad-in-out` cubic-bezier(0.455,0.03,0.515,0.955), `--ease-expo-out` cubic-bezier(0.19,1,0.22,1), `--ease-back-out` and others), fluid layout constants (`--indent`, `--menuNavigationHeight`) and named breakpoints `--breakpoint-medium` 600px, `--breakpoint-desktop` 900px and `--breakpoint-large` 1400px. The media queries match: `(min-width:900px)` (73 rules), `(max-width:899px)`, `(min-width:600px)` and `(min-width:1400px)`. + +## Do's and Don'ts + +**Do** +- Set statements in very large Aften Screen at weight 400 with tight negative tracking. +- Use two tones only: #070707 and grey #a2a2a9, switching within one sentence for emphasis. +- Pair the large type with tiny BentonSans uppercase labels. +- Caption work as "Client — Category" with the category in grey. +- Keep the layout asymmetric: big type from the left margin, small text in a narrower column. +- Keep corners at or near square (radii measured are 3.7037px and 5px) and shadow-free. + +**Don't** +- Don't introduce colour accents; colour belongs to the case imagery. +- Don't use bold; all measured text is 400. +- Don't use the `--color-aila-*` or `--leva-*` values as brand colours. +- Don't add buttons where a text link works. +- Don't crowd sections; white space carries the pacing. + +## Responsive Behavior + +Measured at 390px wide: + +- The hero headline becomes 60px/60px with -3px tracking (desktop 160px/128px/-8px). +- The lead sentence becomes 30px/30px with -1.2px (desktop 66.6667px). +- Labels grow from 12px to 14px/19.6px BentonSans uppercase. +- The most-read size is 20px, followed by 14px, 60px, 35px and 30px. +- The header has a #f2f2f2 background, 1 visible link and a menu toggle ("MENU" / "CLOSE"). +- Content spans x = 15 to 375. +- The project grid keeps 2 columns (`maxCardColumns` 2). + +The declared breakpoints are 600px, 900px and 1400px. Layout between 390px and 1280px was not measured. + +## Iteration Guide + +1. White page, #f2f2f2 hero band, #070707 text, grey #a2a2a9 as the only second tone. +2. Load Aften Screen (400) for all large and reading text and BentonSans for 12px uppercase labels. +3. Set the hero at 160px/128px with -8px tracking, split across the width, with the "&" in grey. +4. Build a two-column project grid with 10px gaps and "Client — Category" captions at 23.7037px. +5. Use two-tone sentences at 66.6667px for the office line and the footer invitation. +6. Use opacity for hover; no colour fills. +7. On mobile: 60px hero, 30px lead, 14px labels, 15px side margins, menu toggle. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/18-years-of-buro/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/18-years-of-buro/DESIGN.md new file mode 100644 index 0000000..4fbaaa9 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/18-years-of-buro/DESIGN.md @@ -0,0 +1,168 @@ +--- +version: alpha +name: 18 Years of Büro +category: "Agencies & Studios" +description: "18 Years of Büro (18.burocratik.com), the Burocratik studio retrospective: Commercial Gräphik Web grotesk with tight negative tracking at 57.9px, PP Editorial New weight 100 at 44.1px, black on white with a chapter palette of brown #402828, peach #efc09b, blue #2800f3 and purple #8574d0." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#402828" + surface-black: "#010101" + off-black: "#12121f" + off-white: "#f4f4f4" + dark-brown: "#2a1e17" + chapter-peach: "#efc09b" + chapter-blue: "#2800f3" + chapter-purple: "#8574d0" + chapter-light-grey: "#ebeee2" + chapter-red: "#e73b37" + chapter-yellow: "#faf6b0" +typography: + display: + fontFamily: "\"Commercial Gräphik Web\"" + fontSize: 57.8976px + fontWeight: 400 + lineHeight: 63.6874px + letterSpacing: "-4.05283px" + display-mobile: + fontFamily: "\"Commercial Gräphik Web\"" + fontSize: 90px + fontWeight: 400 + lineHeight: 72px + letterSpacing: "-7.2px" + heading: + fontFamily: "\"PP Editorial New\"" + fontSize: 44.1088px + fontWeight: 100 + lineHeight: 48.5197px + subheading: + fontFamily: "\"Commercial Gräphik Web\"" + fontSize: 18px + fontWeight: 400 + lineHeight: 21.6px + letterSpacing: "-0.72px" + body: + fontFamily: "\"Commercial Gräphik Web\"" + fontSize: 14.6926px + fontWeight: 400 + lineHeight: 19.1004px + letterSpacing: "-0.587704px" + caption: + fontFamily: "\"Commercial Gräphik Web\"" + fontSize: 12.768px + fontWeight: 400 + letterSpacing: "-0.51072px" +rounded: + xs: 2px + sm: 15.09px + md: 20px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 5px + s4: 6px + s5: 6.53px + s6: 8px + s7: 8.07px + s8: 9.15px + s9: 10px + s10: 10.9px +components: + link: + textColor: "{colors.canvas}" + typography: "{typography.body}" + nav: + textColor: "{colors.ink}" + transform: matrix(1, 0, 0, 1, 0, 0) + navbar-pill: + rounded: "{rounded.md}" +--- + +## Overview + +18 Years of Büro is a retrospective microsite for the Portuguese digital studio Büro (Bürocratik). The page fetched from 18.burocratik.com describes the studio's history from 2004 to 2024 in four chapters, "The Early Years (2004–2012)", "Inception (2013–2017)", "We Got This, We Got This (2018–2020)" and "Are We There Yet? (2021–2024)", plus a separate "Dark Ages (2004–2013)" section, and links to a Büro18 book pre-order. The studio's own site says it is a digital studio focused on branding and digital experiences, with an emphasis on typography and detail, located in Coimbra and Matosinhos, Portugal. + +The entry view measured here (resolved URL with `?chapter3`) shows a white page with a large black spiral timeline: concentric elliptical lines carry small circle markers labelled 2004 to 2024. A large black headline, "Our eccentric story: the odd, quirky, and wonderful journey so far!", sits over the upper spiral. A year counter "2006 ——— 2024" runs across the top, and a hand-pointer glyph with the word "Go" sits in the bottom right corner. The extraction counted 12,373 visible elements while the scroll height was 800px, so the page is a fixed-viewport scene, not a scrolling document. + +The voice is dry and personal ("Are we there yet? Hell no."). Typography does the work: very large, tightly tracked grotesk next to a hairline-weight serif. Each chapter has its own background colour, so the site is white at the entry and changes colour as chapters change. + +## Colors + +The base is plain: canvas `#ffffff`, ink `#000000` (24,598 characters of black text against 6,059 white and 4,673 brown). The root variables name the full palette: + +- `--color-black #000` and `--color-white #fff` +- `--color-off-black #12121f`, `--color-menu-black #0f0f0f` +- `--color-off-white #f4f4f4`, `--color-light-grey #ebeee2` +- `--color-brown #402828` (primary here; also border colour, 38 uses) and `--color-dark-brown #2a1e17` +- `--color-blue #2800f3`, `--color-purple #8574d0` +- `--color-eda-bg #efc09b` (peach) and `--color-eda-text #402828` + +The area-weighted backgrounds also show chapter fills `#faf6b0` (pale yellow) and `#e73b37` (red) and `#010101` near black (3,070 area weight). Largest-area background is `#000000`, which belongs to dark chapter scenes; the entry capture itself is white. Brown `#402828` is used as text (4,673 characters) and as the border colour, so it is the closest thing the page has to an accent. It is tokenised as `primary` even though the extractor found no call-to-action button. + +Colours are assigned per chapter rather than per component. The tokens named `chapter-*` are palette values from root variables or measured backgrounds; which chapter shows which colour was not mapped. + +## Typography + +Two typefaces are loaded: **Commercial Gräphik Web** (weight 400; 27,582 characters) and **PP Editorial New** (weights 100 and 300; 7,757 characters). + +- **Display, Gräphik 57.8976px / 400 / 63.6874px, letter-spacing -4.05283px**: the h1 on the entry view. Tracking is about -7% of the size. +- **Display on mobile, Gräphik 90px / 400 / 72px, letter-spacing -7.2px**: measured in the mobile pass for a chapter title ("Moonspell"). +- **Heading, PP Editorial New 44.1088px / 100 / 48.5197px**: the h2 ("Where it all begins.") in white on a dark scene. +- **Subheading, Gräphik 18px / 400 / 21.6px / -0.72px**: h3 titles such as "Awwwards Conference 2015". +- **Body, Gräphik 14.6926px / 400 / 19.1004px / -0.587704px**: the paragraphs. +- **Caption, Gräphik 12.768px / 400 / -0.51072px**: the single most used size (14,560 characters); the spiral's year labels are of this kind. + +Every size is paired with negative letter-spacing (for example 14.6926px with -0.587704px). The unusual decimals come from the fluid sizing of the site; they are measured values, not rounded ones. Larger sizes were also measured at 21.5104px, 32px, 67.7536px, 86.6976px, 110.285px, 173.302px and 188.173px. Foundry pages for the two typefaces were not opened, so no licence is stated. + +## Layout + +The site declares a 24-column grid in root variables: `--grid-num-cols: 24`, `--grid-max-width: 106.25rem`, a column width of 4.1666666667%, `--grid-padding: clamp(8px, …, 10px)`, `--grid-margin: clamp(8px, …, 20px)` and `--grid-gutter: clamp(2px, …, 10px)`. Breakpoint variables are `--xxsmall 410px`, `--xsmall 743px`, `--small 1024px`, `--medium 1290px`, `--large 1440px`, `--xlarge 1700px` and `--xxlarge 2000px`. The bottom navbar is `--navbar-height: 46px`, spans 10 grid columns (`--navbar-width-cols: 10`) and sits at a clamped bottom offset of 24px to 32px. + +At 1280px the h1 block measures 1,249px wide, almost the full viewport, and its text starts well to the right of the left edge in the capture. The spiral graphic fills the viewport behind it. Gaps seen most often are 15.6784px (588 uses), 10.896px (146) and 6px (54); paddings 10px (84) and 13.3852px (59). The ten spacing tokens are a subset of the measured small gaps. + +## Elevation & Depth + +No box shadows were measured. Depth is expressed with flat colour fields, overlapping type over linework, and the fixed layout of the stage. In the capture the headline overlaps the spiral lines instead of sitting in a separate surface, so lines run through the letters. The `card` element found by the extractor was a black 583 by 291 element with a `100%` radius, which is part of the stage graphics, not an interface card, and it is not tokenised. + +## Shapes + +Radii measured: `100%` (15 uses, circles for the spiral markers and elliptical shapes), `2px` (4), `20px` (2, the navbar radius from `--navbar-border-radius`) and `15.0912px` (2). The spiral is drawn with fine one-pixel-weight strokes and small hollow circular markers. Everything else is rectangular, so the language is circles and ellipses against straight type blocks. No button radius exists because no button was detected. + +## Components + +- **Year counter / header**: "2006 ——— 2024" in Gräphik 21.5104px, black, 1,280px wide and 41px high; the first number changes with position. +- **Spiral timeline**: elliptical line graphic with hollow circle markers and 12.768px year labels. +- **Go prompt**: a hand-pointer glyph and "Go" in large type at the bottom right. +- **Bottom navbar pill**: a 46px high bar with a 20px radius, per the variables. +- **Text links**: white 14.6926px text on dark chapter scenes ("Moonspell @Instagram"). +- **Chapter pages**: white-on-colour headings in PP Editorial New, paragraphs in Gräphik, image galleries and award tables as described on the page text. + +Hover states: none recorded (the hover list is empty). + +## Design System Architecture + +No public design system or brand guidelines exist for this microsite. The studio site (https://burocratik.com/) and the retrospective (https://18.burocratik.com/) were opened; neither links to guidelines or a token package, and the retrospective mentions identity guidelines only as part of a client project. The de-facto system is the set of root CSS variables: breakpoints (`--xxsmall` to `--xxlarge`), the 24-column grid (`--grid-*`), the navbar (`--navbar-height`, `--navbar-border-radius`, `--navbar-bottom`), viewport helpers (`--dvh`, `--svh`, `--lvh`, `--computed-100vw`) and named colours (`--color-*`). Type sizes are fluid, so they carry decimal values. + +## Do's and Don'ts + +- Do set large Gräphik headlines with tight negative tracking (-4.05283px at 57.8976px). +- Do pair the grotesk with PP Editorial New at weight 100 for chapter headings. +- Do change the background colour per chapter from the named palette. +- Do keep small year labels at 12.768px. +- Don't add shadows or rounded cards; none were measured. +- Don't use `#402828` as a button fill; no button was measured. +- Don't read the near-black `#000000` area weight as the entry canvas; the entry view is white. +- Don't assume other chapters share the entry layout; only the `?chapter3` entry view was measured. + +## Responsive Behavior + +The mobile pass (390px wide) recorded: the chapter title at 90px / 400 with 72px line height and -7.2px letter-spacing; the h2 at 32px / 100 with 35.2px line height; body text at 13px / 400 with 16.9px line height and -0.52px letter-spacing; the year navigation at 20px (43px high, 390px wide). Mobile character-weighted sizes were 13px, 12px, 32px, 18px, 20px and 16px. The root variables declare breakpoints at 410px, 743px, 1024px, 1290px, 1440px, 1700px and 2000px. How the spiral scene reflows on small screens was not measured. + +## Iteration Guide + +1. Begin with white, black and the single brown `#402828`; bring in chapter colours one chapter at a time. +2. Reuse the type pairing: Commercial Gräphik Web with negative tracking, PP Editorial New 100 for headings. +3. Build on the 24-column grid and the 46px navbar. +4. Measure a second chapter URL with the extractor before documenting chapter layouts. +5. Run `node web/scripts/verify-designs.mjs --slug=18-years-of-buro` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/1820-productions/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/1820-productions/DESIGN.md new file mode 100644 index 0000000..d91ebae --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/1820-productions/DESIGN.md @@ -0,0 +1,165 @@ +--- +version: alpha +name: 1820 Productions +category: "Portfolio" +description: "1820 Productions (Irving, Texas video production company) site: near-black #0a0a0a canvas with #f7f7f7 text, 72px weight 600 Suisseintl Condensed headlines, Suisseintl 24px weight 300 body, uppercase 12.5px nav labels, 2.08px radius and full-bleed film stills." +colors: + canvas: "#0a0a0a" + ink: "#f7f7f7" + primary: "#f7f7f7" + surface-footer: "#0f0f0f" + ink-muted: "#ffffff66" +typography: + display: + fontFamily: "\"Suisseintl Condensed\", Arial, sans-serif" + fontSize: 72px + fontWeight: 600 + lineHeight: 72px + letterSpacing: "-1.44px" + display-mobile: + fontFamily: "\"Suisseintl Condensed\", Arial, sans-serif" + fontSize: 30px + fontWeight: 600 + lineHeight: 30px + letterSpacing: "-0.6px" + body: + fontFamily: Suisseintl, Arial, sans-serif + fontSize: 24px + fontWeight: 300 + lineHeight: 28.8px + letterSpacing: "-0.48px" + body-mobile: + fontFamily: Suisseintl, Arial, sans-serif + fontSize: 22.5px + fontWeight: 300 + lineHeight: 27px + letterSpacing: "-0.45px" + eyebrow: + fontFamily: Suisseintl, Arial, sans-serif + fontSize: 12.5px + fontWeight: 300 + lineHeight: 12.5px + letterSpacing: "-0.125px" + textTransform: uppercase + nav: + fontFamily: Suisseintl, Arial, sans-serif + fontSize: 12.5px + fontWeight: 500 + lineHeight: 12.5px + letterSpacing: "-0.125px" + link: + fontFamily: "\"Suisseintl Condensed\", Arial, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 16px + letterSpacing: "-0.16px" +rounded: + xs: 2.08px +spacing: + s1: 2.08px + s2: 4.96px + s3: 8px + s4: 9.6px + s5: 16px + s6: 18px + s7: 18.08px + s8: 24px + s9: 36px + s10: 48px +components: + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + nav: + textColor: "{colors.ink}" + padding: 16px 0px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + footer: + backgroundColor: "{colors.surface-footer}" + textColor: "{colors.ink}" + padding: 200px 0px 44.8px +--- + +## Overview + +1820 Productions presents itself as a video production and media company. The page fetched from the live site lists an Irving, Texas address (although the page title says "Dallas"), a "Work" section of client films (Haggar "Hidden Seams", Dave's Killer Bread "Sit Ups", Veterans Land Board "Don't Ignore"), a "Services" section headed "Stuff we're really good at" with the line "Stylish production. Seamless execution.", a "Clients and Partners" section titled "Brands who swiped right.", and the About line "We're not a cult. But people do keep coming back." + +The measured home page (1280px wide, 7,434px tall, 1,192 visible elements) is a stack of full-bleed film stills and video frames separated by thin horizontal rules with a "+" at each end and a centred label (WORK, OUR SERVICES). In the capture, the first screen is a close shot of hands at a piano with the title "VETERANS LAND BOARD" and the sub-line "Don't Ignore", a slide counter "03 | | ▭ 03", and a logo lockup of "1820 PRODUCTIONS" at the top centre. A second panel shows the large line "WE LISTEN. WE CRAFT. WE DELIVER." over a commercial still with a bracketed "[EXPLORE MORE WORK]" link. A third panel shows "STYLISH PRODUCTION. SEAMLESS EXECUTION." over a stunt still. + +The interface is deliberately minimal so that the footage carries the colour. Copy is playful and confident ("Got a vision? We've got caffeine and emotional availability."). The only interface colours are near-black and off-white. + +## Colors + +- **Canvas `#0a0a0a`**: body background and largest background by area (20,912 weight). Root variable `--_color---swatch--dark--base` is `oklch(.1448 0 0)`. +- **Ink `#f7f7f7`**: 772 of 830 measured text characters. Root variable `--_color---swatch--light--base` is `oklch(.9761 0 0)`. +- **Primary `#f7f7f7`**: no filled call-to-action was detected, so the interface accent is the ink colour itself, used for links and the nav. +- **Footer surface `#0f0f0f`**: the footer background. +- **Muted text `#ffffff66`**: secondary text at 40% white (54 characters). +- **Translucent surfaces** `#32323233` (3,159 area weight) and `#19191966` appear as backgrounds over imagery. They are overlay tints, not brand colours. + +The root variables also define a grey ramp in OKLCH (gray-300 `oklch(.872 0 0)` to gray-900 `oklch(.21 0 0)`), dark and light opacity steps from 5% to 80%, and a brand colour `--_color---swatch--brand: oklch(.6504 .2355 26.83)`, a saturated red. The brand variable is declared, but no element on the measured home page displayed it as a computed colour, so it is not given a hex token. + +## Typography + +Two families from one superfamily: **Suisseintl** (469 characters; loaded at weights 400 and 500) and **Suisseintl Condensed** (361 characters; loaded at 500 and 600). Root variables map `--_font---primary-font--font` to the condensed face and `--_font---secondary-font--font` to the regular, both with an Arial fallback, plus a mono face, "Geistmono Variablefont Wght". + +- **Display, Suisseintl Condensed 72px / 600 / 72px, -1.44px**: the section headlines ("WE LISTEN. WE CRAFT. WE DELIVER.") in capitals. The extractor mistook a "VIEW" label for the h1; the real headline role is the h2. +- **Body, Suisseintl 24px / 300 / 28.8px, -0.48px**: the large intro lines. +- **Eyebrow, Suisseintl 12.5px / 300, uppercase, -0.125px**: small labels such as "VIEW". +- **Nav, Suisseintl 12.5px / 500, -0.125px**: WORK, SERVICES, ABOUT, BTS, HOME, LET'S TALK, MENU. +- **Link, Suisseintl Condensed 16px / 400, -0.16px**: client titles such as "HAGGAR". +- Also measured: 14px (227 characters, tracking -0.14px). + +Every size carries negative tracking close to -2% of the size (for example 72px with -1.44px, 24px with -0.48px, 16px with -0.16px). The root variables define a size ladder (`--_typography---size--h1` 4.5rem, h2 3.8rem, h3 2.5rem, display 6rem up to display-3xl 12rem), of which only 72px was seen on the home page. No foundry pages were opened, so no licence statement is made. + +## Layout + +The container is declared as `clamp(992px, 100vw, 1920px)` with 12 columns (`--root--columns: 12`) and a gutter of 0.6rem (`--root--gutter`). The page is full-bleed: images and video span 1280px, and text is centred. The nav bar is 107px high on desktop with 16px vertical padding; the work list shows the numbered counter and a centred title over the image. The footer is 732px high with padding `200px 0px 44.8px`. Measured gaps are 2.08px, 9.6px, 24px and 18.08px, with larger gaps of 192px and 240px between sections; paddings include 16px (18 uses), 48px, 128px, 144px, 200px, 240px and 368px. The ten spacing tokens are the smaller of these steps. Space between sections is very large compared with the type size, in keeping with a cinematic pace. + +## Elevation & Depth + +No box shadows were measured. Depth comes from photography and video frames; text sits directly on the footage with a darkening tint (`#19191966`, `#32323233` backgrounds). Section rules are 1px lines in off-white (`#f7f7f7` border, 3 uses; `#ffffff14` border, 2 uses). There are no cards or elevated surfaces. + +## Shapes + +One radius was measured: `2.08px` (4 uses), a near-square edge that matches the small bracketed and boxed controls such as the slide indicator and the "LET'S TALK" and "MENU" labels in the top bar. Everything else, including the full-bleed stills, is rectangular. There are no pills or circles in the measurements. + +## Components + +- **Top bar**: the logo lockup "1820 PRODUCTIONS" centred; WORK, SERVICES, ABOUT and BTS at top left in 12.5px; "LET'S TALK" and "MENU" at top right in small boxes. The measured header is 1,280px wide and 107px tall, text `#f7f7f7`. +- **Hero slider**: full-bleed footage, a condensed capital title, a small sub-line, and a counter "03 | | ▭ 03". +- **Section divider**: a hairline with "+" at both ends and a centred small-caps label. +- **Text link**: condensed capitals, `#f7f7f7`, in brackets for "EXPLORE MORE WORK". +- **Footer**: `#0f0f0f` background, the large 24px line "Got a vision? We've got caffeine and emotional availability.", contact details and social links. + +Hover states: not recorded. + +## Design System Architecture + +No public design system or brand guidelines were found. The site's home page (https://www.1820productions.com/) shows only social profile links (Instagram, Vimeo, LinkedIn, Facebook) and no press or brand section. The de-facto system lives in root CSS variables with a structured naming scheme: `--_color---swatch--*` (dark, light, gray and brand ramps), `--_typography---size--*` (xs to display-3xl), `--_typography---spacing--*` (letter-spacing values such as -.04em), `--_spacing---spacing--*` (xxxs .125rem to 3xl 5rem), `--_font---*` (weight maps for primary, secondary and mono fonts), `--root--*` (container, gutter, columns) and easing curves (`--quart-out: cubic-bezier(0.25, 1, 0.5, 1)`, `--quart-in-out: cubic-bezier(0.78, 0, 0.22, 1)`). + +## Do's and Don'ts + +- Do keep the page near-black (`#0a0a0a`) with `#f7f7f7` text and let film stills supply colour. +- Do set headlines in condensed capitals at weight 600 with negative tracking. +- Do use hairline rules with a "+" and a small-caps label to divide sections. +- Do write short, wry copy. +- Don't add filled buttons or accent colours; none were measured on the page. +- Don't use rounded corners above 2.08px. +- Don't add shadows or card surfaces. +- Don't use the `oklch(.6504 .2355 26.83)` brand variable as a measured on-page colour; it was not seen as a computed style. + +## Responsive Behavior + +The mobile pass (390px wide) recorded: the h2 at 30px / 600 with 30px line height and -0.6px tracking (72px on desktop); body at 22.5px / 300 with 27px line height (24px on desktop); nav labels at 16px with a header 68px high (107px on desktop), showing HOME, LET'S TALK and MENU only; the eyebrow label at 11.7188px / 500. Mobile character-weighted sizes were 30px, 13.125px, 11.7188px, 16px and 22.5px. The container variable has a 992px minimum. Behaviour of the footage and divider sections on mobile was not measured. + +## Iteration Guide + +1. Start with `#0a0a0a`, `#f7f7f7` and one muted white `#ffffff66`. +2. Headlines: Suisseintl Condensed 72px / 600, capitals, -1.44px tracking; body Suisseintl 24px / 300. +3. Keep corners at 2.08px or square. +4. Put UI over footage with a dark tint; no shadows. +5. If you need the red brand accent, measure it on a rendered element first. +6. Run `node web/scripts/verify-designs.mjs --slug=1820-productions` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/1moby/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/1moby/DESIGN.md new file mode 100644 index 0000000..d5f4edc --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/1moby/DESIGN.md @@ -0,0 +1,211 @@ +--- +version: alpha +name: 1Moby +category: "Thai Brands" +description: "1Moby (วันม๊อบบี้), Bangkok digital solutions company: MeroThai 700 headlines at 60px/48px on a #171717 canvas fading into cobalt #006bff, white pill CTAs with black label and a 4px trailing circle, 20px rounded cards and 14px #5e5e5e body copy." +colors: + canvas: "#171717" + page-largest: "#ffffff" + ink: "#ffffff" + ink-secondary: "#5e5e5e" + primary: "#006bff" + button-fill: "#ffffff" + on-primary: "#000000" + primary-hover: "#f5f5f5" + surface-tint: "#e6f0ff" + ink-link-footer: "#91bfff" + ink-muted: "#717279" + hairline: "#e6e6e6" + accent-orange: "#fc4c02" + accent-amber: "#ffa400" +typography: + display: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 60px + fontWeight: 700 + lineHeight: 84px + display-mobile: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 40px + fontWeight: 700 + lineHeight: 56px + heading: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 48px + fontWeight: 700 + lineHeight: 67.2px + subheading: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 24px + fontWeight: 700 + lineHeight: 38.4px + body: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 22.4px + body-mobile: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 25.6px + button: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 18px + fontWeight: 700 + lineHeight: 28.8px + button-secondary: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 14px + fontWeight: 700 + lineHeight: 22.4px + nav: + fontFamily: Geometrica, "Geometrica Fallback", "Helvetica Neue", Arial, sans-serif, MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + link: + fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif + fontSize: 12px + fontWeight: 700 + lineHeight: 19.2px +rounded: + xs: 6px + sm: 12px + md: 16px + lg: 20px + xl: 32px + pill: 9999px +spacing: + s1: 4px + s2: 4.8px + s3: 6px + s4: 8px + s5: 10px + s6: 12px + s7: 14px + s8: 16px + s9: 18px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.button-fill}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 0px 4px 0px 28px + height: 60px + boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px" + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-secondary: + backgroundColor: "{colors.on-primary}" + textColor: "{colors.button-fill}" + typography: "{typography.button-secondary}" + rounded: "{rounded.pill}" + padding: 0px 4px 0px 18px + height: 40px + link: + textColor: "{colors.on-primary}" + typography: "{typography.link}" + rounded: "{rounded.pill}" + padding: 0px 12px + borderColor: "{colors.hairline}" + nav: + textColor: "{colors.on-primary}" + padding: 12px 60px 0px + nav-link: + textColor: "{colors.primary}" + typography: "{typography.nav}" + card: + backgroundColor: "{colors.primary}" + textColor: "{colors.button-fill}" + rounded: "{rounded.lg}" + padding: 24px + footer: + textColor: "{colors.ink-link-footer}" +--- + +## Overview + +1Moby (บริษัท วันม๊อบบี้ จำกัด) is a Thai digital solutions company. Its home page, in Thai, is titled "1Moby | ตัวจริงด้าน Digital Solutions ของไทย" and headlines "ผู้นำด้าน Digital Solution และ AI-Driven Business". The page lists a Bangkok address (The Nine Tower Grand Rama 9), the tagline "One move, Endless potential.", and service families: Tech Consulting & System Integration, Enterprise SaaS & Solutions (for example Thaibulksms, Thaibulkmail, LINE Agency, Movider) and MarTech & Communication Platform. A statistic card reads "597+ โปรเจกต์" and "กว่า 19 ปี ในธุรกิจเทคโนโลยี". + +The measured page (1280px wide, 8,095px tall, 1,123 visible elements) is a long, polished marketing page with a navy-to-cobalt-to-orange gradient hero, a floating white pill navigation bar, device mockups of client work, a grid of rounded white client-logo tiles, large ghosted "1MOBY" and "AWARDS" wordmarks as section backdrops, cobalt statistic cards, an awards gallery (Cannes Lions, ISO tiles) and a dark cobalt footer. Imagery is staged photography of the team at events plus 3D phone and screen renders in blue. The voice mixes Thai with English product terms (Digital & AI Solutions), confident and corporate-friendly. + +A cookie-consent bar appeared in the first capture and was removed by re-extracting; it is not documented as brand UI. + +## Colors + +- **Canvas `#171717`**: body colour measured at the top of the page; in the capture the upper hero is a dark navy that fades through blue to orange and then to white sections. +- **White `#ffffff`** (`page-largest`): the largest background area (3,977 weight): content sections, client tiles and the primary button fill. +- **Ink `#ffffff`**: text on the dark hero and footer. On white sections the dominant text is **`#5e5e5e`** (14,490 characters), with black `#000000` for headings (1,293 characters). +- **Primary `#006bff`**: the brand cobalt, used for the statistic card fill (area weight 2,233), the heading words "Digital & AI Solutions", nav link accents and the footer gradient start `rgb(0, 107, 255)`. It is tokenised as primary because the extractor's detected CTA is a white button, which is kept as `button-fill`. +- **Button fill `#ffffff` with on-primary `#000000`**: the main call to action; hover `#f5f5f5`. +- **Tint `#e6f0ff`**: pale blue section background (2,237 area weight). +- **Footer link blue `#91bfff`**, muted grey `#717279`, border grey `#e6e6e6`. +- **Accents `#fc4c02` (orange, 356 area; also 74 characters of text) and `#ffa400` (amber, 490 area)**: award and badge tiles. + +The root variables hold Tailwind-style ramps: `--vibrant-blue-4 #a2a2ff`, `--vibrant-blue-7 #4343cc`, `--vibrant-blue-9 #1d1d66`, `--blue-5 #1a80ff`, `--orange-1 #ffede6`, `--orange-3 #ffbb80`, `--yellow-6 #ffc700`, `--black-9 #262626` and others. These are declared; not all appear as page colours and they are not tokenised. The footer background is the gradient `radial-gradient(95% 200% at 100% 0%, rgb(0, 107, 255) 25%, rgb(0, 44, 238) 50%, rgb(29, 31, 42) 100%)`, so `#002cee` and `#1d1f2a` are its stops. + +## Typography + +**MeroThai** is the primary face (18,643 characters), with fallbacks "MeroThai Fallback", "Leelawadee UI" and Tahoma. **Geometrica** (134 characters) is used for the navigation labels, with Helvetica Neue and Arial fallbacks. + +- **Display 60px / 700 / 84px**: h1 "ผู้นำด้าน Digital Solution และ AI-Driven Business" in white (mobile: 40px / 56px). +- **Heading 48px / 700 / 67.2px**: h2 "ผู้เชี่ยวชาญด้าน Digital & AI Solutions" (mobile: 32px / 44.8px). +- **Subheading 24px / 700 / 38.4px**: card titles such as "ลูกค้าวางใจให้ดูแล". +- **Body 14px / 400 / 22.4px**: the dominant size (10,285 characters); 18px (6,273 characters) is also used for lead paragraphs. On mobile the body is 16px / 400 / 25.6px. +- **Button 18px / 700 / 28.8px**; **secondary button 14px / 700 / 22.4px**; **link 12px / 700 / 19.2px**; **nav 16px / 400 / 24px** in Geometrica. +- Other measured sizes: 10px, 20px, 32px, 40px, 72px. Letter-spacing was measured only for 14px (0.35px, 12 characters); otherwise normal. + +Measured line heights are 1.4 times the size for display, heading and subheading text and 1.6 times for 16px body. Foundry pages for MeroThai and Geometrica were not opened. + +## Layout + +The h1 block measures 1,120px wide inside the 1,280px viewport; the nav bar is 1,280px wide and 68px tall with `12px 60px 0px` padding, rendered as a floating rounded white bar. The cobalt statistic card is 500px by 260px with 24px padding and a 20px radius, and the h2 block is 500px wide. Common gaps are 16px (41 uses), 8px (26), 4px (24), 40px (9), 60px (7), 12px, 20px and 14px; the ten spacing tokens come from the smaller values. Sections alternate: dark gradient hero, a white band of client logo tiles in rows, a white area with an intro column and two cards, ghost wordmark dividers, a cobalt gradient for services and awards, white article cards, and a dark footer of 688px height. The page is long (8,095px) with large vertical rhythm between bands. + +## Elevation & Depth + +Shadows measured: a soft cobalt glow `rgba(0, 107, 255, 0.08) 4px 4px 40px 0px` (150 uses, the most common), a deep drop `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` (24 uses, for large mockups), a light `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` on the primary button, and `rgba(0, 0, 0, 0.06) 6px 6px 12px 8px` once. Depth also comes from gradient backgrounds (dark to cobalt to orange in the hero), translucent white tiles and large faded wordmarks behind content. + +## Shapes + +Radii: `20px` (199 uses, cards and tiles), `12px` (33), `16px` (24), `32px` (24), `6px` (5), and full pill (19; computed 3.35544e+07px, tokenised as 9999px) on buttons and nav controls. Buttons carry a circular icon chip: the primary button's padding `0px 4px 0px 28px` leaves 4px on the right for a black circle with an arrow. Cards are large-radius rectangles; logo tiles are rounded white squares. + +## Components + +- **Primary CTA "ปรึกษาเรา"**: white pill, 184px by 60px, black 18px / 700 label, trailing black circular arrow chip, soft shadow; hover fill `#f5f5f5` and 66px height (measured). +- **Secondary "คุยกับเรา"**: black pill, white 14px / 700 label, 40px high, 123px wide; hover fill `#404040` and 44px height. +- **Outline link "ติดต่อเรา"**: 12px / 700, pill, 1px `#e6e6e6` border, 32px high, 94px wide. +- **Black CTAs** "ข่าวสารทั้งหมด", "บทความทั้งหมด", "รู้จักเรามากขึ้น": black pill, 16px / 700, 52px high. +- **Nav**: floating white pill with logo, dropdown buttons (Our services, Resources, About 1Moby), Contact us and a black chat pill; hover on nav buttons fills `rgb(232, 233, 234)`. +- **Statistic card**: cobalt `#006bff` fill with a background image, 20px radius, white 24px title and large numerals. +- **Client logo tiles**, **award tiles** (orange and amber), **article cards**, and a **footer** with contact, social channels (Facebook, TikTok, LINE) and link columns in `#91bfff`. + +## Design System Architecture + +No public design system or brand guidelines were found: the home page (https://www.1moby.com) links a "Download Resource" page with expert solution materials, but no press kit or guideline document. The de-facto system is a Tailwind-based CSS layer: the root holds Tailwind utility variables (`--tw-ring-shadow`, `--tw-inset-shadow`, `--tw-gradient-from`) and named colour ramps (`--vibrant-blue-*`, `--blue-*`, `--orange-*`, `--yellow-*`, `--dark-grey-*`, `--black-*`, `--white-*`). Type uses a self-hosted MeroThai with a metric-matched "MeroThai Fallback" face, and Geometrica with a "Geometrica Fallback". + +## Do's and Don'ts + +- Do use white pill buttons with a black label and a trailing black arrow chip as the main CTA on dark sections. +- Do use cobalt `#006bff` for statistic cards, key words in headings and links. +- Do set Thai headlines in MeroThai 700 and keep Thai line heights near 1.4. +- Do round cards at 20px and use soft cobalt-tinted shadows. +- Do pair a dark gradient hero with white content bands. +- Don't use the cookie bar, chat pill or other overlays as brand components. +- Don't use orange `#fc4c02` or amber `#ffa400` outside award or badge tiles. +- Don't set large Thai text with tight line height. + +## Responsive Behavior + +Mobile pass (390px wide): h1 40px / 700 / 56px (358px wide block); h2 32px / 700 / 44.8px; body 16px / 400 / 25.6px; primary CTA 18px / 700, 177px by 60px with the same pill shape; nav 16px / 700 / 24px, 72px tall with `12px 12px 0px` padding (60px side padding on desktop). Character-weighted mobile sizes: 16px, 14px, 18px, 10px, 32px, 12px, 24px, 40px. Section reflow beyond those values was not measured. + +## Iteration Guide + +1. Start from `#171717` → `#006bff` hero gradient and white sections; text `#5e5e5e` on white. +2. Use MeroThai 700 for headings (60 / 48 / 24px) and 14px / 400 for body. +3. Build buttons as pills with a trailing arrow chip; white on dark, black on light. +4. Round cards at 20px; use the cobalt glow shadow `4px 4px 40px` at 8% blue. +5. Keep cookie and chat widgets out of the token set. +6. Run `node web/scripts/verify-designs.mjs --slug=1moby` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/1password/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/1password/DESIGN.md new file mode 100644 index 0000000..c873bad --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/1password/DESIGN.md @@ -0,0 +1,232 @@ +--- +version: alpha +name: 1Password +category: "Tech & AI" +description: "1Password's marketing site: agileSans at light weights (300 display at 88px/96.8px with -1.76px tracking, 350 body) on a near-black #1d1d21 canvas, a full-width #145fe4 blue band, white #ffffff sections with #303136 text, pill-shaped 9999px buttons 46px tall, and a sand #cbb88e announcement bar." +colors: + canvas: "#1d1d21" + page-body: "#ffffff" + ink: "#ffffff" + primary: "#145fe4" + on-primary: "#ffffff" + ink-on-dark-muted: "#ffffffcc" + ink-on-light: "#303136" + ink-black: "#000000" + surface-dark-alt: "#1f1f23" + announcement-sand: "#cbb88e" + hairline-on-dark: "#ffffff1a" +typography: + display: + fontFamily: agileSans, "agileSans Fallback", sans-serif + fontSize: 88px + fontWeight: 300 + lineHeight: 96.8px + letterSpacing: "-1.76px" + display-mobile: + fontFamily: agileSans, "agileSans Fallback", sans-serif + fontSize: 48px + fontWeight: 300 + lineHeight: 52.8px + letterSpacing: "-0.96px" + heading: + fontFamily: agileSans, "agileSans Fallback", sans-serif + fontSize: 64px + fontWeight: 300 + lineHeight: 70.4px + letterSpacing: "-1.28px" + quote: + fontFamily: agileSans, "agileSans Fallback", sans-serif + fontSize: 40px + fontWeight: 350 + lineHeight: 48px + letterSpacing: "-0.8px" + body: + fontFamily: agileSans, "agileSans Fallback", sans-serif + fontSize: 16px + fontWeight: 350 + lineHeight: 24px + nav: + fontFamily: agileSans, "agileSans Fallback", sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + xs: 2px + sm: 4px + md: 16px + lg: 24px + xl: 25px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 8px + s4: 10px + s5: 12px + s6: 16px + s7: 20px + s8: 24px + s9: 32px + s10: 64px +components: + button-pill: + textColor: "{colors.page-body}" + typography: "{typography.nav}" + rounded: "{rounded.pill}" + padding: 10px 24px + height: 46px + button-pill-hover: + textColor: "{colors.primary}" + link-pill: + textColor: "{colors.primary}" + typography: "{typography.nav}" + rounded: "{rounded.pill}" + padding: 10px 24px + hero: + backgroundColor: "{colors.canvas}" + textColor: "{colors.page-body}" + padding: 224px 24px 24px + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.page-body}" +--- + +# 1Password + +## Overview + +1password.com ("Password Manager, Secrets, and Access Management | 1Password") is a dark, product-first page, 7,436px +tall at desktop. A 56px sand-colored (#cbb88e) announcement bar sits at the very top ("1Password Privileged Access: +Zero standing privileges for humans and AI. Learn more"), followed by a white navigation bar: the 1Password logo, +Business, Personal, Developers, Partners and Resources menus, Pricing, Sign in, "Talk to sales" and a blue pill +"Get started free". + +The hero drops onto near-black #1d1d21 with a centred, very light headline — "Secure access for every human and AI +agent" — at 88px. Below it a large, crisp product screenshot of the 1Password admin console ("Good morning Sonja +Johnson, this is your team", team overview counters, onboarding and recovery panels, last viewed reports) sits on a +blue glow. A grid of customer logos in muted grey on dark follows (IBM, Salesforce, Asana, PagerDuty, GitLab, Stripe, +Zuora, Reddit, Slack, GoDaddy and others). + +The page then explains the platform ("One secure platform for humans, AI agents, and machines", eyebrow +"1PASSWORD® UNIFIED ACCESS") with four white product cards over illustrated UI snippets — Enterprise Password Manager, +Credential Broker, Privileged Access, SaaS Manager — each with a "Learn about…" link. A saturated blue band announces +"1Password named a Leader for SaaS Management Platforms" with two pill buttons; a white band carries an Oracle Red Bull +Racing photo and a large pull quote; a dark closer "Bring modern access under control" offers "Talk to sales" and +"View plans"; and a dense dark footer ends the page. The voice is plain and confident; headlines are sentence case. + +The capture shows a cookie-consent dialog over the hero. It is a consent overlay, not brand UI, and is not documented +here. + +## Colors + +- **Canvas** — `canvas` #1d1d21 is the largest painted area (hero, product section, footer); the closing section + measures #1f1f23 (`surface-dark-alt`). +- **White** — `page-body` #ffffff is the body background and the second-largest area (nav bar, quote band). +- **Primary blue** — `primary` #145fe4: the third-largest area (the Gartner band) and the color of "Talk to sales" and + the hover text of "Get started free". White (`on-primary`) text sits on it. +- **Ink** — `ink` #ffffff is the most-read text; `ink-on-dark-muted` #ffffffcc (80% white) is nearly as frequent for + supporting copy on dark; `ink-on-light` #303136 for text on white; `ink-black` #000000 appears in small amounts. +- **Announcement sand** — `announcement-sand` #cbb88e fills the top bar. +- **Hairline** — `hairline-on-dark` #ffffff1a (10% white). + +The palette is deliberately small: dark, white, one blue, and the sand accent. + +## Typography + +One family carries the whole page: **agileSans**, self-hosted as Next.js font files (`/_next/static/media/*.woff2`), +with an "agileSans Fallback" metric fallback declared. Only `ui-sans-serif` appears elsewhere (20 measured characters). + +- **Display** — **88px / 96.8px, weight 300, -1.76px** (-0.02em). +- **Heading** — **64px / 70.4px, 300, -1.28px**; product names **48px / 52.8px, 300, -0.96px**. +- **Quote** — the Red Bull pull quote at **40px / 48px, weight 350, -0.8px**. +- **Body** — **16px / 24px, weight 350** (the body default and the most frequent size); 20px, 18px and 14px also + measured. +- **Buttons and nav** — **16px / 24px, weight 400**. + +The measured weights are 350 (1,534 characters), 300 (1,165) and 400 (434) — no bold. Tracking tightens at a constant +-0.02em on large sizes. If agileSans is not available to you, use a neo-grotesque with a variable weight axis so the +300 and 350 weights are reproducible. + +## Layout + +At 1280px: announcement bar 0/56, white nav 56/76, dark hero and product section 132/3273 (two columns in the product +area), blue Gartner band 3405/601, white spacer 4006/95, media quote band 4101/647, white spacer 4748/106, dark closer +and footer 4854/2582. The hero container has 224px top padding and 24px sides. The header shows 7 links; product cards +run 4 across. Headlines are centred in the hero, Gartner band and closer, and left-aligned in the product section. +Spacing steps measured: 2, 4, 8, 10, 12, 16, 20, 24, 32 and 64px. `--navbar-height` is 4.94rem. + +## Elevation & Depth + +No box-shadows were measured on the page. Depth comes from the product screenshot glowing against the dark canvas +(a blue light behind it in the capture), from white cards placed on #1d1d21, and from the hard switches between dark, +blue and white bands. Borders are rare: a 10% white hairline on dark and single white and blue outlines. + +## Shapes + +Buttons and links are pills (**9999px**, the most frequent radius). Cards and media use **25px**, **24px** and **16px** +(including top-only 16px corners); small elements use **2px** and **4px**. One element is rounded only at the bottom +with 48px corners. The combination is soft: pill controls on large rounded cards. + +## Components + +- **Pill button** — "Get started free": white agileSans 16px/400 text, 9999px radius, 46px tall, 10px 24px padding. + The measured background-color is transparent; in the capture the header instance is a solid blue pill, so the fill + is painted by another layer. On hover the text turns #145fe4. +- **Link pill** — "Talk to sales": #145fe4 text, same pill geometry and padding. +- **Navigation** — white bar, 16px menu labels with chevrons, Sign in, Talk to sales and the blue pill. +- **Product card** — white rounded card holding a UI illustration (counters, toggles, status chips) above a light 48px + product name on dark, a short description and an underlined "Learn about…" link. +- **Gartner band** — full-width #145fe4 with a small uppercase eyebrow, a 64px light headline, a paragraph and two pill + buttons (dark and white). +- **Quote band** — photo on the left, partner logo and a 40px quote in #303136 on the right, an outlined pill + "Read the story". +- **Footer** — dark, five link columns, a language selector, an outlined "Downloads" box, the logo and social icons. + +## Design System Architecture + +1Password's press page (https://1password.com/press) offers a media kit that "contains logos, product images, headshots of +our leadership team, and brand guidelines" via its brand hub at +https://brand.1password.com/document/45#/-/download-our-all-in-one-press-kit. The hub page opened shows only the title +"Kits - 1Password Brand Hub" without values, so no colors or type rules are taken from it. + +The shipped site is a Next.js build (`/_next/static/` assets, the logo served from images.ctfassets.net). `:root` exposes only +layout variables (`--navbar-height: 4.94rem`, `--viewport-height`, `--viewport-overflow`); colors and type are compiled +into component CSS, so the de-facto system is the measured palette and the single agileSans family with light weights. + +## Do's and Don'ts + +**Do** +- Use agileSans at 300 for headlines and 350 for body; keep -0.02em tracking on large type. +- Keep most of the page on #1d1d21 with white text; use #145fe4 for one full-width emphasis band and for actions. +- Make every button a pill, 46px tall with 10px 24px padding. +- Show the real product UI large in the hero. +- Use the sand #cbb88e only for the announcement bar. + +**Don't** +- Don't introduce bold weights; none were measured. +- Don't add drop shadows to cards; the page has none. +- Don't use square-cornered buttons. +- Don't treat the cookie dialog as part of the design. + +## Responsive Behavior + +Measured at 390px: + +- Display **48px / 52.8px, 300, -0.96px**; heading **40px / 44px, -0.8px**; quote **32px / 38.4px, 350, -0.64px**. +- The hero container's top padding is 128px with 0 side padding. +- Announcement bar 0/104 (the text wraps), white nav 104/76, dark hero/product 180/4138 (1 column), blue band 4318/615, + media 4988/235, white quote band 5223/751, dark closer 5974/1615 (2 columns), media 7589/507. +- 2 header links are visible and a menu toggle was detected; maxCardColumns is 1. +- Content insets are 24px on most bands and 32px on the quote band. + +Menu contents were not measured. + +## Iteration Guide + +1. Start with a #cbb88e announcement bar, a white nav and a #1d1d21 hero. +2. Set the headline in agileSans 300 at 88px/96.8px with -1.76px tracking, centred and white. +3. Place a large product screenshot below the headline with a blue glow; follow with a muted logo grid. +4. Build the platform section: 64px light heading, four product cards with UI snippets and underlined links. +5. Insert one #145fe4 band with a centred 64px headline and two pill buttons. +6. Close on dark with "Talk to sales" / "View plans" pills and a dense footer; at mobile, set display to 48px and headings + to 40px. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/20-years-inspired-by-people/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/20-years-inspired-by-people/DESIGN.md new file mode 100644 index 0000000..345fe99 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/20-years-inspired-by-people/DESIGN.md @@ -0,0 +1,153 @@ +--- +version: alpha +name: 20 Years Inspired by People +category: "Business & Corporate" +description: "20 Years Inspired by People (inspiring.nk.studio, Spanish edition): Instrument Serif 100px hero over a dark teal scene of tilted #092524 cards, DM Sans 12px body, a #00ffc2 mint button with #041819 label and 3px radius, 10px card radius and #406c6c80 hairlines." +colors: + canvas: "#ffffff" + ink: "#041819" + primary: "#00ffc2" + on-primary: "#041819" + on-dark: "#ffffff" + ink-muted-on-dark: "#ffffff80" + ink-soft-on-dark: "#ffffffb2" + card-bg: "#092524f0" + galaxy-green: "#070b0a" + hairline: "#406c6c80" +typography: + display: + fontFamily: "\"Instrument Serif\", \"Instrument Serif Fallback\", Arial, Helvetica, sans-serif" + fontSize: 100px + fontWeight: 400 + lineHeight: 97px + display-mobile: + fontFamily: "\"Instrument Serif\", \"Instrument Serif Fallback\", Arial, Helvetica, sans-serif" + fontSize: 40px + fontWeight: 400 + lineHeight: 38.8px + card-title: + fontFamily: "\"Instrument Serif\", \"Instrument Serif Fallback\", Arial, Helvetica, sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 24.96px + body: + fontFamily: "\"DM Sans\", \"DM Sans Fallback\"" + fontSize: 12px + fontWeight: 400 + lineHeight: 22px + button: + fontFamily: "\"DM Sans\", \"DM Sans Fallback\"" + fontSize: 14px + fontWeight: 700 + lineHeight: 21px +rounded: + xs: 3px + sm: 4px + md: 5px + lg: 8px + xl: 10px + pill: 9999px +spacing: + s1: 5px + s2: 7px + s3: 10px + s4: 12px + s5: 15px + s6: 20px + s7: 30px + s8: 64px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 10px 20px + height: 42px + card: + backgroundColor: "{colors.card-bg}" + textColor: "{colors.on-dark}" + typography: "{typography.card-title}" + rounded: "{rounded.xl}" + borderColor: "{colors.hairline}" +--- + +## Overview + +"20 Años Inspirados por Personas" (20 Years Inspired by People) is an anniversary microsite published under the nk.studio brand at inspiring.nk.studio. The Spanish page, as fetched, says nk.studio turned 20 and invited colleagues, friends, clients and referents to share something that once inspired them; a counter reads "tus inspiraciones 0/33", there are calls to action "Compartí tu inspiración" and "Entrá al archivo de inspiración", a "Modo Lectura / Modo Original" toggle, language options ENG and ESP, and links to Inicio, Manifiesto, Créditos and the studio site (www.nk.studio). + +The measured entry view (1280px wide, 800px scroll height, 968 visible elements) is a single dark screen. A teal-black space holds a ring of tilted portrait-style cards, each with a serif title (for example "Liderar desde la cocina", "Hacerlo bien aunque nadie lo vea", "Inventando un nuevo lenguaje"), a small circular avatar, a contributor name and a company label in small capitals. Some cards carry black-and-white photographs; the cards at the edges are blurred, which gives depth. At the centre, the small label "DESDE 2006", the large white serif headline "Antes de inspirar, fuimos inspirados." with mint underlines under "inspirar" and "inspirados", a short two-line paragraph, and a mint button. The "/nk." logo is at top left and a language switch "ESP" at top right. + +The tone is warm and editorial: first-person plural, personal titles, and a mint accent that glows against deep green-black. + +## Colors + +The CSS body background is `#ffffff` (`--background`), and that is the measured canvas, but the viewer sees a dark scene: the card surfaces are `#092524f0` (area weight 2,117, nearly opaque teal-black), the root declares `--color-galaxy-green: #070b0a` and the capture shows a dark teal gradient. This file records the measured values and does not pick between them: canvas `#ffffff`, scene `#092524f0`, galaxy green `#070b0a`. + +- **Primary `#00ffc2`** (`--color-brand-green`): the button fill, headline underlines and the hover colour of the language switch (`rgb(0, 255, 194)`; unhovered `rgb(73, 255, 212)`). +- **On-primary and ink `#041819`**: the button label and the darkest teal text (62 characters). +- **On-dark `#ffffff`**: headline and card text (1,165 characters), with `#ffffff80` for secondary text (775 characters, for example avatar roles) and `#ffffffb2` for a lighter accent (9 characters). +- **Hairline `#406c6c80`**: the 1px border on cards (33 uses). +- **Button hover**: the button fill changes from `rgb(0, 255, 194)` to `rgb(253, 255, 255)`. +- Root variables also include `--foreground #171717`, `--color-black #000` and Tailwind grey ramps (`--color-gray-50`, `--color-gray-200`). + +## Typography + +Two families: **Instrument Serif** (1,028 characters, weight 400, with an "Instrument Serif Fallback") for the headline and card titles, and **DM Sans** (997 characters, variable weight 100 to 1000) for body text, labels and the button. + +- **Display 100px / 400 / 97px**: the h1 (mobile 40px / 38.8px). +- **Card title 24px / 400 / 24.96px**: the dominant size (972 characters). +- **Body 12px / 400 / 22px**: the intro paragraph (607 characters), white on the dark scene. +- **Button 14px / 700 / 21px**. +- Smaller sizes: 8px (298 characters, the contributor role labels), 10px, 13px and 16px. Weights seen: 400 (1,465 characters), 500 (477) and 700 (83). + +Letter-spacing was not recorded. No foundry pages were opened, so no licence is stated. The pairing of a high-contrast display serif with a geometric sans is visible in the capture. + +## Layout + +The page is a full-viewport stage with a centred text stack, not a document: scroll height equals the 800px viewport. The h1 block is 633px wide with a 194px height (two lines of 97px) and the paragraph is 432px wide, 44px high (two lines at 22px line height). Cards are about 257px wide and 289px tall in the extraction, arranged around the centre in two rows, tilted and partly overlapped by the headline. On mobile the paragraph has 25px horizontal padding. Measured gaps and paddings are small: 10px (68 uses), 5px (68), 12px (66), 15px (66), 7px, 20px, with 64px and 30px paddings once or twice. The eight spacing tokens are those values. + +The card ring, the central headline and the button are the only content on the measured entry view, so the layout has three layers: the blurred and tilted background cards, the sharper foreground cards, and the centred text stack on top of them. The vertical order of the centred stack, from top to bottom, is the eyebrow "DESDE 2006", the headline, the paragraph and the button; the paragraph measures 12px in size, which is smaller than the 14px of the button label. + +## Elevation & Depth + +No box shadows were measured. Depth is created with blur (the cards at the left and right edges are blurred in the capture), tilt and perspective of the card ring, the dark vignette around the edges and opacity (`f0` alpha on the card fill). Root variables declare blur sizes (`--blur-xs: 4px`, `--blur-md: 12px`). Card edges are separated from the background by a 1px `#406c6c80` border. + +## Shapes + +Radii measured: `10px` (102 uses, cards and the language switch), a full pill (33 uses, avatar circles and chips), `5px` (19), `8px` (5), `3px` (1, the button), `4px 4px 0px 0px` (1) and `50%` (1). The primary button is nearly square at 3px, which contrasts with the 10px cards and round avatars. + +## Components + +- **Primary button "Entrá al archivo de inspiración"**: mint `#00ffc2` fill, `#041819` label, DM Sans 14px / 700, 3px radius, 10px 20px padding, 247px by 42px; hover fill `rgb(253, 255, 255)`. +- **Story card**: `#092524f0` fill, 10px radius, `#406c6c80` border, serif 24px title, circular avatar, contributor name and company label; 257px by 289px. +- **Language switch**: "ESP" with a dropdown showing ENG and ESP, 35px high, 10px radius, mint text. +- **Logo**: "/nk." with a mint dot at the top left. +- **Eyebrow "DESDE 2006"** above the headline. +- **Underlined words**: mint lines under two words of the headline. + +## Design System Architecture + +No public design system or brand guidelines were found for the microsite. The page (https://inspiring.nk.studio/es) offers Manifiesto and Créditos pages, which were not opened, and a link to the studio site; no press kit link is shown. The de-facto system is a Tailwind v4 layer: root variables such as `--color-brand-green #00ffc2`, `--color-galaxy-green #070b0a`, `--font-instrument-serif`, `--font-dm-sans`, easing curves (`--ease-in-out: cubic-bezier(.4, 0, .2, 1)`), `--leading-snug: 1.375` and Tailwind `--tw-*` utilities. Colours are semantic only at brand level (brand-green, galaxy-green). + +## Do's and Don'ts + +- Do use one mint accent, `#00ffc2`, for the main button and highlights. +- Do set display text in Instrument Serif at large size with tight line height (97px for 100px). +- Do keep body copy short and small (12px / 22px) in DM Sans. +- Do use tilted dark teal cards with 10px corners and a faint teal border. +- Don't round the primary button beyond 3px. +- Don't use pure black for the scene; the measured darks are teal-black (`#092524f0`, `#070b0a`). +- Don't treat the blurred edge cards as sharp interface. + +## Responsive Behavior + +Mobile pass (390px wide): h1 40px / 400 / 38.8px, 253px wide and 78px tall; body 12px / 22px with `0px 25px` padding, 361px wide; the primary button keeps 14px / 700, 10px 20px padding, 247px by 42px. Character-weighted sizes on mobile include 24px, 12px, 8px, 14px, 48px, 40px, 10px, 13px and 16px. How the card ring is rearranged on small screens was not measured. + +## Iteration Guide + +1. Start from the dark teal scene (`#092524f0` cards over `#070b0a`) with white text; mint `#00ffc2` as the only accent. +2. Headline in Instrument Serif 100px (40px on mobile); body DM Sans 12px / 22px. +3. Build cards with 10px radius, 1px `#406c6c80` border and 24px serif titles. +4. Measure the Manifiesto and Créditos pages before documenting reading mode. +5. Run `node web/scripts/verify-designs.mjs --slug=20-years-inspired-by-people` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/21-hrs-on-the-moon/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/21-hrs-on-the-moon/DESIGN.md new file mode 100644 index 0000000..52df9c4 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/21-hrs-on-the-moon/DESIGN.md @@ -0,0 +1,147 @@ +--- +version: alpha +name: 21 Hrs On The Moon +category: "Culture & Events" +description: "21 Hrs On The Moon (21hrs.space), an Apollo 11 scroll story: black #000000 canvas, warm cream #fff3ea text, FuturaStd 700 uppercase titles with negative tracking, AkkuratMonoLL 300 10px labels, a #d9d9d9 giant MOON wordmark and #e4b592 copper viewfinder corners with a 10px radius." +colors: + canvas: "#000000" + ink: "#fff3ea" + primary: "#fff3ea" + title-grey: "#d9d9d9" + hairline: "#e4b592" + progress: "#dad0c8" + pop: "#ee1212" + ink-translucent: "#ffffff99" +typography: + display: + fontFamily: FuturaStd + fontSize: 26px + fontWeight: 700 + letterSpacing: "-0.26px" + textTransform: uppercase + display-mobile: + fontFamily: FuturaStd + fontSize: 20px + fontWeight: 700 + letterSpacing: "-0.26px" + textTransform: uppercase + body: + fontFamily: FuturaStd + fontSize: 18px + fontWeight: 700 + label: + fontFamily: AkkuratMonoLL + fontSize: 10px + fontWeight: 300 + letterSpacing: "-0.1px" +rounded: + xs: 10px + sm: 50px +spacing: + s1: 6px + s2: 10px + s3: 20px + s4: 50px +components: + frame-corner: + borderColor: "{colors.hairline}" + rounded: "{rounded.xs}" + icon-control: + textColor: "{colors.ink}" + rounded: "{rounded.sm}" + borderColor: "{colors.ink-translucent}" + title-line: + textColor: "{colors.title-grey}" + typography: "{typography.display}" + intro-text: + textColor: "{colors.ink}" + typography: "{typography.body}" + meta-label: + textColor: "{colors.ink}" + typography: "{typography.label}" +--- + +## Overview + +21 Hrs On The Moon is a single-screen landing view for an interactive story about the 21 hours of humanity's first Moon landing. The page title is "21 Hours on the Moon". In the capture the screen is almost entirely black with a field of tiny stars and the dark, cratered upper limb of the Moon rising from the bottom. A thin horizontal rule flanks the small line "21HRS ON THE", above the huge wordmark "MOON" whose letterforms fade from light grey into black toward their base. Below it, the centred line reads "Navigate the lunar surface and explore the 21 hours that defined humanity's first Moon landing." At the left are the small mono caption "MISSION" with "Apollo 11", at the right "YEAR" with "1969", and a full-width rule underneath. A bordered button "SCROLL TO LAND" sits in the lower centre, with the note "BEST EXPERIENCED WITH SOUND" beneath it. Three round controls (a menu, a waveform and a play glyph) are at the top left, and four copper corner brackets frame the viewport like a camera viewfinder. + +The extraction found only 114 visible elements and an 804px scroll height, so what was measured is the landing screen, not the later scroll chapters. The page text fetched through WebFetch contained only the title, so credits, authorship and any sound or menu behaviour were not available and are not stated here. + +The mood is a mission-control or documentary viewfinder interface: monochrome, technical, with a precise typographic hierarchy. Interface elements are named in the stylesheet root variables as carousel lines, vu meter, progress bar, viewfinder, compass, hints and frame corner, which describes the instrument-panel motif. + +## Colors + +The palette is black, a warm cream and a copper line, plus a single declared red. + +- **Canvas `#000000`** (`--color-background`): the body colour. +- **Ink `#fff3ea`** (`--color-text`; also `--color-carouselLines`, `--color-vuMeter`, `--color-viewfinder`, `--color-compass`, `--color-hints`): a warm cream used for 163 of 179 measured characters and for all instrument graphics. It is the primary colour because the page has no filled button; the main action is an outlined control in the same cream. +- **Title grey `#d9d9d9`** (`--color-mainTitle`): the giant "MOON" wordmark and the "21HRS ON THE" line; it measured as a background area as well (weight 2). +- **Copper `#e4b592`** (`--color-frameCorner`): the corner brackets, measured as border colour on 4 elements. +- **Progress `#dad0c8`** (`--color-progressBar`). +- **Translucent white `#ffffff99`**: border colour on 3 elements. +- **Pop red `#ee1212`** (`--color-pop`): declared in the root variables and the stylesheet, but no element on the landing screen displayed it in the measurement, so it is not given a role. + +Other stylesheet values with a single use each: `#ff000026`, `#000000e6`, `#ffffff` and `#0000bb00`. + +## Typography + +Two families are loaded: **FuturaStd** (127 of 179 characters, weight 700; loaded at weight 500) and **AkkuratMonoLL** (52 characters, weight 300). + +- **Display, FuturaStd 26px / 700, uppercase, letter-spacing -0.26px**: the "21HRS ON THE" line, 240px wide and 31px high, padded 20px left and right. On mobile it is 20px with the same tracking, padded 10px. +- **Body, FuturaStd 18px / 700**: the centred introduction (111 characters, the most used size). On mobile it measures 16px. +- **Label, AkkuratMonoLL 10px / 300, letter-spacing -0.1px**: "MISSION", "YEAR", the button label and the sound note (38 characters at 10px, 14 characters at 12px, tracking -0.1px for both). +- **Wordmark, FuturaStd 256px, tracking -7.68px**: the giant "MOON" (4 characters). On mobile it measures 80px. It is a graphic headline; it is not tokenised because the generator does not carry a weight for it. + +Apollo 11 and 1969 in the capture are in a heavier bold style than the surrounding mono captions, in grey. Letter-spacing is negative at all sizes (about -1% to -3% of the size). Foundry pages for the two families were not opened. + +## Layout + +The viewport is a fixed 1280px by about 800px scene. Content is centred: the title row spans roughly the middle two-thirds of the width, the information row (MISSION left, YEAR right) aligns to the same width, and the rule beneath it spans the same extent. The Moon limb is anchored to the bottom centre. The viewfinder corners sit in the four corners of the viewport with a gap from the edges, and the three round controls sit at the top left. Measured spacing: gaps of 10px (2 uses) and 50px (2); paddings of 20px (2) and 6px (2). These form the four spacing tokens. + +The vertical order is: control cluster and corner brackets at the edges; the title row; the wordmark; the intro text overlapping the lower part of the wordmark; the information row; a rule; the button; the sound note. The 804px scroll height is almost the viewport height, so this is an entry state. + +## Elevation & Depth + +No box shadows were measured. Depth is made with imagery and gradients: the Moon limb has a dark gradient and visible crater texture, the stars are a sparse pattern, and the wordmark "MOON" fades from `#d9d9d9` toward transparent at its base so that the Moon's silhouette shows through. Interface lines are thin and flat. There are no cards or raised surfaces. + +## Shapes + +Two radii were measured: `10px 0px 0px` (4 uses, the four viewfinder corner brackets, each drawn as a corner outline with one rounded corner) and `50px` (3 uses, the three circular controls). The button "SCROLL TO LAND" shows a rounded rectangle outline with small bracket marks at its corners in the capture; its own radius was not tied to a selector. Lines are hairlines, with rules in cream and corner brackets in copper. + +## Components + +- **Viewfinder corners**: four L-shaped copper `#e4b592` brackets at the viewport corners, 10px radius on one corner. +- **Round controls**: three circular icon buttons (menu, waveform, play) at the top left with a 50px radius and a translucent white border. +- **Title row**: "21HRS ON THE" flanked by two rules. +- **Wordmark**: "MOON" at 256px in `#d9d9d9` with a bottom fade. +- **Metadata row**: "MISSION / Apollo 11" and "YEAR / 1969", mono captions over grey bold values. +- **Scroll prompt**: outlined "SCROLL TO LAND" button in mono 10px, with the note "BEST EXPERIENCED WITH SOUND". + +Hover states: none recorded (the hover list is empty). + +## Design System Architecture + +No public design system or brand guidelines were found. The fetched page (https://www.21hrs.space/) exposed only its title text, with no credits or links, so no source is cited beyond the page itself. The de-facto system is a small set of root CSS variables with instrument names: `--color-background`, `--color-text`, `--color-mainTitle`, `--color-frameCorner`, `--color-progressBar`, `--color-carouselLines`, `--color-vuMeter`, `--color-viewfinder`, `--color-compass`, `--color-hints` and `--color-pop`. Two web fonts (FuturaStd, AkkuratMonoLL) and a tiny scale of spacing (6, 10, 20, 50px) complete it. + +## Do's and Don'ts + +- Do keep the canvas pure black and use the warm cream `#fff3ea` for text and instrument graphics. +- Do set titles in FuturaStd bold uppercase with negative tracking, and captions in AkkuratMonoLL 10px. +- Do frame the screen with copper `#e4b592` corner brackets. +- Do let the giant wordmark fade into the Moon. +- Don't introduce filled buttons; the measured action is an outlined control. +- Don't use red `#ee1212` as an interface colour until it is measured on an element. +- Don't add shadows or cards. +- Don't describe later chapters from this file; only the landing screen was measured. + +## Responsive Behavior + +Mobile pass (390px wide): the title line is 20px / 700 uppercase with -0.26px tracking and 10px side padding (173px wide, 25px high); the intro text measures 16px (18px on desktop); the wordmark measures 80px (256px on desktop); the 10px and 12px labels keep their size. Mobile character-weighted sizes: 16px, 10px, 12px, 20px and 80px. The mobile pass found no other role. Positions of the corner brackets, the Moon limb and the controls on small screens were not measured. + +## Iteration Guide + +1. Black canvas, cream `#fff3ea` ink, one grey `#d9d9d9` for the title; copper only for frames. +2. FuturaStd 700 uppercase for titles and intro text, AkkuratMonoLL 300 10px for captions. +3. Use a 10px corner radius for frames and 50px for round controls. +4. Measure the scroll chapters (with the extractor on a later state, or a probe) before adding more tokens. +5. Run `node web/scripts/verify-designs.mjs --slug=21-hrs-on-the-moon` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/22-09-2000-he-was-born/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/22-09-2000-he-was-born/DESIGN.md new file mode 100644 index 0000000..6054680 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/22-09-2000-he-was-born/DESIGN.md @@ -0,0 +1,188 @@ +--- +version: alpha +name: Hardik Bhansali +category: "Business & Corporate" +description: "Hardik Bhansali portfolio (hardikbhansali.com, queued as 22.09.2000 - HE WAS BORN): near-black #030300 stage, electric yellow #ffea63 text and #e3ca54 buttons, Pixel monospace uppercase headlines at 24px and 57.3px with negative tracking, Helvetica 12px body, 6px radius." +colors: + canvas: "#030300" + ink: "#ffea63" + primary: "#e3ca54" + on-primary: "#000000" + surface-yellow: "#ffea63" + ink-white: "#ffffff" + overlay-dark: "#00000099" +typography: + display: + fontFamily: Pixel, monospace + fontSize: 24px + fontWeight: 400 + lineHeight: 32px + letterSpacing: "-0.96px" + textTransform: uppercase + display-xl: + fontFamily: Pixel, monospace + fontSize: 57.3338px + fontWeight: 400 + lineHeight: 57.3338px + letterSpacing: "-2.29335px" + textTransform: uppercase + heading: + fontFamily: Pixel, monospace + fontSize: 14.4px + fontWeight: 400 + lineHeight: 21.6px + letterSpacing: "-0.576px" + textTransform: uppercase + body: + fontFamily: Helvetica, sans-serif + fontSize: 12px + fontWeight: 400 + lineHeight: 18px + letterSpacing: "-0.48px" + button: + fontFamily: Helvetica, sans-serif + fontSize: 14px + fontWeight: 600 + lineHeight: 14px + letterSpacing: "-0.56px" + chip: + fontFamily: Pixel, monospace + fontSize: 16px + fontWeight: 400 + lineHeight: 16px + letterSpacing: "-0.64px" + textTransform: uppercase +rounded: + xs: 4px + sm: 6px + md: 8px + pill: 9999px +spacing: + s1: 4px + s2: 6px + s3: 8px + s4: 12px + s5: 16px + s6: 20px + s7: 24px + s8: 32px + s9: 40px + s10: 48px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 8px 12px + height: 30px + chip-yellow: + backgroundColor: "{colors.surface-yellow}" + textColor: "{colors.on-primary}" + typography: "{typography.chip}" + rounded: "{rounded.xs}" + padding: 6px 12px + height: 34px + borderColor: "{colors.surface-yellow}" + chip-dark: + backgroundColor: "{colors.overlay-dark}" + textColor: "{colors.ink}" + typography: "{typography.chip}" + rounded: "{rounded.xs}" + padding: 6px 12px + borderColor: "{colors.ink}" + nav: + textColor: "{colors.ink}" + typography: "{typography.display}" + card-video: + rounded: "{rounded.sm}" + borderColor: "{colors.primary}" + footer: + textColor: "{colors.ink}" + padding: 24px 0px 89.5938px +--- + +## Overview + +The measured site is the portfolio of Hardik Bhansali, titled "Hardik Bhansali" (hardikbhansali.com), which the award-site queue lists as "22.09.2000 - HE WAS BORN". The document is named after the measured site. The fetched page text contained only the name, so the facts below come from the extraction's DOM text and the capture. + +The capture shows the entry gate: a near-black screen (`#030300`) with a yellow rounded-border box reading "Hardik Bhansali is a designer, a digital experience designer who can lucid dream design concepts and bring them to life on a digital canvas. It's a super power to bend reality in today's time and age.", and a blurred, dim serif prompt "CLICK ANYWHERE TO ENTER". The rest of the capture is white blank page below the 600px scene, which is why the measured body background is `#ffffff`. The extractor also read DOM text that exists behind the gate (the extraction counted 204 visible elements and a 7,200px scroll height): the h1 "HARDIK BHANSALI", an h2 "BORN IN THE AGE OF MACHINES (KAL-YUGA), TO SERVE THE WORLD W…", an h3 "HE NEVER THOUGHT OF BEING A DESIGNER", a "Refresh Webcam" button with a video element framed by a yellow border, testimonial chips attributed to named people (for example "OSCAR PÉREZ PINAZO, CEO - AWWWARDS"), a "View Project" link and a footer address "HARDIK@LUCERRA.CO". How these are arranged after the gate is opened was not measured. + +The style is a yellow-on-black terminal look: pixel monospace capitals with negative tracking, tiny Helvetica body copy, and glowing yellow outlines. The font list also includes `lil-gui`, a debug panel library, which is a development control and not part of the brand. + +## Colors + +- **Canvas `#030300`**: the largest background area (weight 1,024) and the dominant colour of the capture's scene. +- **Ink `#ffea63`**: electric yellow, used for 1,440 of 1,687 measured text characters, borders on 20 elements, and chip backgrounds. +- **Primary `#e3ca54`**: a darker, desaturated yellow used as the "Refresh Webcam" button fill and the 2px video border. +- **On-primary `#000000`**: label colour on yellow fills (80 characters). +- **Surface yellow `#ffea63`**: filled chips (for example the named testimonial chip and the "View Project" link). +- **Overlay `#00000099`**: translucent black fill of dark chips (115 area weight); a `#0000004d` overlay also occurs. +- **White `#ffffff`**: 147 characters of white text; also the body background of the page below the gate. + +Unmeasured roles: grey `#3c3c3c` text (20 characters), `#374151` background (8 area weight) and the blue ring colour `rgb(59 130 246 / .5)` were not tied to an element and are not assigned a role. The root declares only Tailwind ring and shadow variables. + +## Typography + +Fonts loaded: **Pixel** (weight 400, 883 characters), **Helvetica** (720 characters), **HelveticaLight** (47 characters) and the debug panel's `lil-gui`. + +- **Display, Pixel 24px / 400 / 32px, -0.96px, uppercase**: the h1 "HARDIK BHANSALI". +- **Display XL, Pixel 57.3338px / 400 / 57.3338px, -2.29335px, uppercase**: the h3 "HE NEVER THOUGHT OF BEING A DESIGNER" (151 characters). +- **Heading, Pixel 14.4px / 400 / 21.6px, -0.576px, uppercase**: the h2 statement. +- **Body, Helvetica 12px / 400 / 18px, -0.48px**: the most used size (567 characters). +- **Button, Helvetica 14px / 600 / 14px, -0.56px**. +- **Chip, Pixel 16px / 400 / 16px, -0.64px, uppercase**. +- Other measured sizes: 92.16px (26 characters), 64px (20), 28px (17, footer address) and 36px (10). Tracking is about -4% of the size throughout. + +Foundry or licence pages for Pixel were not opened. + +## Layout + +The page is a stack of full-width bands: the measured nav/header block is 528px wide and 104px tall and carries a transform of -264px (it is centred by translation), and the h2 block is 1,280px wide. The footer is 800px tall with padding `24px 0px 89.5938px` and the 28px / 42px email. The video preview is 480px by 272px. Spacing steps are 4, 6, 8, 12, 16, 20, 24, 32, 40 and 48px; the most used gaps are 8px (26 uses) and 4px (4), the most used paddings are 12px (23) and 6px (19). Larger paddings of 48px, 64px and 128px appear for sections. The scroll height is 7,200px. + +## Elevation & Depth + +No box shadows were measured. In the capture the intro box has a soft yellow glow around its border and the "CLICK ANYWHERE TO ENTER" prompt is blurred; those are effects on the gate, and the glow value was not captured as a shadow token. Depth elsewhere comes from translucent black chips over imagery (`#00000099`, `#0000004d`) and from contrast between yellow and black. + +## Shapes + +Radii: `6px` (19 uses: buttons, video frame, bordered box), `4px` (4: chips), `8px` (2) and `50%` (1). The gate box shows a rounded outline with a 6px to 8px corner in the capture. Borders are 1px or 2px solid yellow (`#ffea63` on 20 elements, `#e3ca54` once). + +## Components + +- **Primary button "Refresh Webcam"**: `#e3ca54` fill, `#000000` Helvetica 14px / 600 label, 6px radius, 8px 12px padding, 123px by 30px. +- **Yellow chip** (named testimonial, "View Project"): `#ffea63` fill, black Pixel 16px label, 4px radius, 1px yellow border, 6px 12px padding, 34px high. +- **Dark chip**: `#00000099` fill, yellow text and a yellow border (1px; the "HUMARE SAATH SHREE RAGHUNAATH" button has a 2px border and 6px radius). +- **Video frame**: a 480px by 272px video with a 2px `#e3ca54` border and 6px radius. +- **Entry prompt**: "CLICK ANYWHERE TO ENTER", blurred grey serif capitals. +- **Header**: the name in Pixel 24px, uppercase, yellow. +- **Footer**: an email line in yellow Pixel 28px. + +Hover states: not recorded. + +## Design System Architecture + +No public design system or brand guidelines exist for this portfolio. The site (https://www.hardikbhansali.com/) returned only its name as fetched text. The de-facto system is minimal: the root holds Tailwind ring and shadow variables, the stylesheet defines two type families (Pixel and Helvetica), a yellow pair `#ffea63` and `#e3ca54`, a spacing ladder of 4 to 48px and radii of 4, 6 and 8px. A debug GUI library is present in the font list and is not a design token. + +## Do's and Don'ts + +- Do use `#ffea63` for text and borders on `#030300`; use `#e3ca54` for filled buttons. +- Do set headlines in Pixel monospace capitals with negative tracking. +- Do keep body copy at 12px Helvetica with -0.48px tracking. +- Do give controls a 6px radius and chips 4px. +- Don't add shadows as tokens; none were measured. +- Don't document the `lil-gui` debug panel as brand UI. +- Don't use the blue ring colour or the grey `#3c3c3c` as brand colours. +- Don't describe the opened experience's layout from this file; only the gate was captured. + +## Responsive Behavior + +Mobile pass (390px wide): h1 24px / 400 / 32px, 175px wide; h2 14.4px; body 12px / 18px with a 327px-wide block; the CTA candidate is the named chip at 16px with 6px 12px padding and a 4px radius (297px by 34px); the header block is 342px wide, 113px tall and translated by -171px. Mobile character-weighted sizes: 16px, 12px, 14px, 10px, 36px, 14.4px, 24px, 27.3px, 31.2px, 28px and 89.7px. Layout of the opened experience on small screens was not measured. + +## Iteration Guide + +1. Black `#030300` field, yellow `#ffea63` text and borders, `#e3ca54` buttons. +2. Pixel monospace uppercase headlines (24px and 57.3338px), Helvetica 12px body. +3. Keep radii 4 to 8px, borders 1px to 2px yellow, translucent black chips. +4. Re-measure after the gate is opened (a click-through capture) before adding layout claims. +5. Run `node web/scripts/verify-designs.mjs --slug=22-09-2000-he-was-born` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/2c2p/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/2c2p/DESIGN.md new file mode 100644 index 0000000..1b971df --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/2c2p/DESIGN.md @@ -0,0 +1,167 @@ +--- +version: alpha +name: 2C2P by Antom +category: "Thai Brands" +description: "2C2P by Antom is a Southeast Asian payments brand whose homepage is a saturated #0088ff blue hero with white Poppins-SemiBold headlines at 60px, a white content body, an aqua #a7eaeb band and square outlined uppercase buttons, set in the Poppins family at regular weight 17px body." +colors: + canvas: "#0088ff" + page-body: "#ffffff" + ink: "#000000" + primary: "#0088ff" + surface-aqua: "#a7eaeb" +typography: + display: + fontFamily: Poppins-SemiBold + fontSize: 60px + fontWeight: 400 + lineHeight: 65px + letterSpacing: "-5px" + display-mobile: + fontFamily: Poppins-SemiBold + fontSize: 40px + fontWeight: 400 + lineHeight: 45px + letterSpacing: "-2px" + subheading: + fontFamily: Poppins-Medium + fontSize: 27px + fontWeight: 400 + lineHeight: 34px + letterSpacing: "-0.81px" + body: + fontFamily: Poppins-Regular + fontSize: 17px + fontWeight: 400 + lineHeight: 25px + letterSpacing: 0.34px + nav: + fontFamily: Poppins-Medium + fontSize: 12px + fontWeight: 400 + lineHeight: 24px + letterSpacing: 0.24px + textTransform: uppercase + button-secondary: + fontFamily: Poppins-Semibold + fontSize: 12px + fontWeight: 400 + textTransform: uppercase + input: + fontFamily: Poppins-Regular + fontSize: 13px + fontWeight: 400 + lineHeight: 20px + letterSpacing: 0.26px +rounded: + xs: 10px + sm: 50px + pill: 9999px +spacing: + s1: 4px + s2: 10px + s3: 13.5px + s4: 14.25px + s5: 15px + s6: 18.5px + s7: 25px + s8: 25.6px + s9: 35px + s10: 40px +components: + button-secondary: + textColor: "{colors.page-body}" + typography: "{typography.button-secondary}" + padding: 10px + height: 40px + borderColor: "{colors.page-body}" + link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + text-input: + textColor: "{colors.ink}" + typography: "{typography.input}" + padding: 0px 0px 10px + height: 31px +--- + +## Overview + +2C2P presents itself on its own about page as "a full-suite payments platform powering businesses of all sizes across Southeast Asia", headquartered in Singapore, and the homepage wears the logo lockup "2C2P by Antom". The visual identity measured from the live homepage is built from very few ingredients: one electric blue (`{colors.primary}`, the site's own `--accent-color` custom property), pure white, pure black text, and a pale aqua band (`{colors.surface-aqua}`). The first screen is a full-bleed blue hero carrying a three-line white headline, "Payments for Southeast Asia businesses", with each line indented further than the one above it, a one-line subhead and a single outlined button. Behind the headline a field of fine white contour lines sweeps across the blue like a wave, a motif that returns on the aqua band further down the page where the same lines are drawn in blue. + +Below the hero the page turns white: a short client-logo strip (airline, hotel, marketplace and insurance names rendered in grey), a second headline, "Accept any type of payment", set in the same blue as the hero over a softly blurred photograph of hands holding phones, then three narrow columns separated by thin vertical rules, each with a line icon in blue, a medium-weight title and a short paragraph. A cream tone (`--background-color-1`, #fff9e7) and a yellow (`--main-yellow`, #ffe79c) exist in the site's CSS variables; the yellow shows up as a small dot inside the hero button. + +The tone is plain and confident: short declaratives ("Make payments simple", "Pay by instalments"), uppercase micro-labels for navigation, and no decorative illustration beyond the line icons and the wave pattern. The page is generous with vertical space, and sections alternate blue, white, aqua, cream, so each message gets its own colour field. + +## Colors + +The palette is measured, not inferred. Area-weighted background colors on the desktop capture are white (`{colors.page-body}`), blue (`{colors.canvas}`, identical to `{colors.primary}`), aqua (`{colors.surface-aqua}`) and cream. Text by character count is `{colors.ink}` (pure black) for body copy and titles, `{colors.primary}` for display headlines on white, and white for text on the blue hero. + +- **Blue `{colors.primary}`**: the signature. It fills the hero, colours the second-level headlines on white and appears in line icons and the small header "Contact us" pill. It also doubles as the canvas token because it is the dominant above-the-fold field. +- **White `{colors.page-body}`**: body background of the content sections and the text color on blue. +- **Black `{colors.ink}`**: all paragraph and card-title text. There is no grey ramp for body copy; hierarchy comes from weight and size. +- **Aqua `{colors.surface-aqua}`**: the "Make payments simple" band, a calm secondary field carrying blue headlines. + +Browser default link colours are not part of the brand and are not used here. The site's CSS also ships unrelated WordPress preset colours (for example a vivid purple) and cookie-banner variables; these are platform noise and are not documented as brand colours. + +## Typography + +One family carries everything: Poppins, loaded as three separate faces named Poppins-Regular, Poppins-Medium and Poppins-SemiBold, so weight is expressed by choosing the face rather than by a numeric font-weight (the computed font-weight is 400 throughout, which is why the tokens say 400). Poppins is a geometric sans from the Google Fonts ecosystem; the faces here are self-hosted on the site. + +- **Display** (`{typography.display.fontSize}` / `{typography.display.lineHeight}`, letter-spacing `{typography.display.letterSpacing}`): the hero h1, in Poppins-SemiBold, white. The very tight tracking gives the headline a dense, poster-like look. On a 390px viewport it drops to `{typography.display-mobile.fontSize}` with `{typography.display-mobile.letterSpacing}` tracking. +- **Subheading** (`{typography.subheading.fontSize}`, Poppins-Medium, `{typography.subheading.letterSpacing}`): titles of the three feature columns. +- **Body** (`{typography.body.fontSize}` / `{typography.body.lineHeight}`, Poppins-Regular, `{typography.body.letterSpacing}`): paragraphs, slightly open tracking. +- **Nav** (`{typography.nav.fontSize}`, Poppins-Medium, uppercase, `{typography.nav.letterSpacing}`): header links such as Solutions, Who we serve, About us, Resources, and the announcement strip above the header. +- **Button label** (`{typography.button-secondary.fontSize}`, Poppins-Semibold, uppercase). +- **Input** (`{typography.input.fontSize}`, Poppins-Regular). + +Poppins is freely available, so no substitute is required; if the faces fail to load, any geometric sans with a large x-height such as Montserrat is the closest fallback. + +## Layout + +The desktop capture is 1280px wide and about 6,238px tall. Content sits on a wide left-aligned container with a left margin visible at roughly the same position for every heading; the hero headline lines step progressively to the right, creating a staircase. Feature sections use three columns divided by one-pixel vertical rules instead of cards. Spacing values measured on the page include `{spacing.s1}`, `{spacing.s2}`, `{spacing.s5}`, `{spacing.s7}`, `{spacing.s9}` and `{spacing.s10}`; the site's header-height variable is 61px. Alternating full-width colour bands separate topics. + +## Elevation & Depth + +The extraction recorded no box shadows on the page. Depth comes from colour fields, the blurred photograph behind "Accept any type of payment" and the layered line pattern, not from drop shadows. The WordPress theme declares an "outlined" shadow preset, but no element on the measured homepage uses a shadow, so do not add them. + +## Shapes + +Radii measured on the homepage: `{rounded.xs}`, `{rounded.sm}` and fully round (`{rounded.pill}` token). The outlined hero button is square (0px radius), the header "Contact us" control is a pill, and circular icon containers use 50%. The contrast between the square hero button and the pill header control is part of the look: large primary-section buttons are rectangular, small utility actions are rounded. + +## Components + +- **Outlined hero button** (`button-secondary`): transparent fill, 1px white border, white uppercase Poppins-Semibold label, 10px padding, 40px high, 200px wide in the capture. A small yellow dot sits before the label. On hover the label turns black while the border stays white (measured hover state). +- **Navigation**: uppercase Poppins-Medium links in black on a white bar with the logo at left; a "Contact us" pill and "Login" link at right, plus a country selector. An announcement strip above the header carries a dismiss control; that and any cookie or language popups are chrome, not brand UI. +- **Text input**: bottom-padded, borderless field, 13px text, 31px tall, 400px wide. +- **Feature columns**: line icon, `{typography.subheading.fontSize}` title, body paragraph, separated by 1px vertical rules. + +## Design System Architecture + +No public design system or token package for 2C2P was found. The about page (https://www.2c2p.com/about-us) mentions a downloadable brand guide, but the guide itself was not opened, so none of its contents are used here. The de-facto system is a WordPress theme: custom properties include `--accent-color: #0088FF`, `--background-color-1: #FFF9E7`, `--main-yellow: #ffe79c`, `--yellow-variant-2: #fff3cf`, `--pink-variant-3: #fcd5f6`, `--orange-variant-2: #ffbd98`, `--header-height: 61px`, together with standard `--wp--preset--*` variables. Colour tints are named as variants (yellow, apricot, pink, orange), indicating a palette of pastel supporting fields beyond the blue and aqua visible above the fold. + +## Do's and Don'ts + +- Do use `{colors.primary}` as the dominant field and as headline colour on white. +- Do keep headlines in Poppins-SemiBold with tight negative tracking. +- Do use uppercase tracked micro-type for navigation and buttons. +- Do alternate full-width colour bands. +- Don't add drop shadows; the site uses none. +- Don't set body text in grey; the site uses pure black `{colors.ink}`. +- Don't round the large hero outline button. +- Don't treat cookie, language or announcement controls as brand components. + +## Responsive Behavior + +The extractor also captured a 390px mobile viewport. The h1 shrinks from `{typography.display.fontSize}` to `{typography.display-mobile.fontSize}` (line height 45px, tracking `{typography.display-mobile.letterSpacing}`), and the headline block narrows to 360px wide. The staircase indentation, the three-column layout and the header navigation were not individually measured at mobile width, so they are not described here. + +## Iteration Guide + +1. Start from the blue field: set canvas to `{colors.canvas}` and white text in Poppins-SemiBold at `{typography.display.fontSize}`. +2. Add one outlined, square, uppercase button before introducing any filled button. +3. Add a white section with black Poppins-Regular text at `{typography.body.fontSize}`. +4. Introduce `{colors.surface-aqua}` only for a secondary band carrying blue headlines. +5. Add the wave line motif as a background accent, never behind body copy. +6. Re-measure any new component with the extractor before adding a token. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/2xa-studio/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/2xa-studio/DESIGN.md new file mode 100644 index 0000000..ac7350d --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/2xa-studio/DESIGN.md @@ -0,0 +1,163 @@ +--- +version: alpha +name: 2xA Studio +category: "Agencies & Studios" +description: "2xA Studio (2xa.studio), a code-driven design studio between Amsterdam and Athens: #0f0f0f black canvas, #858585 ash body in 2XAMONOVF monospace at 19px, 128px HelveticaProRoman headline in #cecece, #fdfdfd paper sections, 1.6px corner radius and no shadows." +colors: + canvas: "#0f0f0f" + ink: "#858585" + primary: "#0f0f0f" + surface-paper: "#fdfdfd" + ink-light: "#cecece" + coal: "#1a1a1a" + accent-blue: "#0000ff" + accent-red: "#d4373a" +typography: + display: + fontFamily: "\"2XAMONOVF\", monospace" + fontSize: 23.75px + fontWeight: 400 + lineHeight: 23.75px + display-mobile: + fontFamily: "\"2XAMONOVF\", monospace" + fontSize: 20px + fontWeight: 400 + lineHeight: 20px + heading: + fontFamily: HelveticaProRoman, Helvetica, sans-serif + fontSize: 128px + fontWeight: 400 + lineHeight: 128px + letterSpacing: "-1.92px" + heading-mobile: + fontFamily: HelveticaProRoman, Helvetica, sans-serif + fontSize: 58.5px + fontWeight: 400 + lineHeight: 58.5px + letterSpacing: "-0.8775px" + subheading: + fontFamily: HelveticaProRoman, Helvetica, sans-serif + fontSize: 23.75px + fontWeight: 400 + lineHeight: 23.75px + letterSpacing: "-0.35625px" + body: + fontFamily: "\"2XAMONOVF\", monospace" + fontSize: 19px + fontWeight: 400 + lineHeight: 23.75px + body-mobile: + fontFamily: "\"2XAMONOVF\", monospace" + fontSize: 16px + fontWeight: 400 + lineHeight: 20px + link: + fontFamily: HelveticaProRoman, Helvetica, sans-serif + fontSize: 28.5px + fontWeight: 400 + lineHeight: 28.5px +rounded: + xs: 1.6px +spacing: + s1: 5px + s2: 10px + s3: 16px + s4: 80px + s5: 160px +components: + link: + textColor: "{colors.canvas}" + typography: "{typography.link}" + nav: + textColor: "{colors.surface-paper}" + padding: 16px + nav-link: + textColor: "{colors.surface-paper}" + typography: "{typography.display}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.surface-paper}" + padding: 16px 16px 0px +--- + +## Overview + +2xA Studio describes itself, on the page fetched from 2xa.studio, as a code-driven design studio based between Amsterdam and Athens, working on digital product design, brand identity, UX/UI and custom web development "combining design and computation". Its tagline is "Generative Code Explorations" and the main line is "Form follows process." The navigation lists About, Projects and Contact, plus two city/date items in the header (ATH(GR) 07 11, AMS(NL) 06 11). The page shows three of five projects: ABR Festival (a modular, motion-first identity), Buna Tetu (posters for a jazz cafe, generated in Processing from sound analysis) and MiAO World (a digital platform for a Chinese gaming studio with pixel type). It also lists awards from CSS Design Awards, Awwwards and EBGE Awards, and a manifesto about computational design. + +The measured page (1280px wide, 7,694px tall, 247 visible elements) is a black screen with a thin grey top bar, a large generative canvas in the first view (a clock-like dot constellation, a yellow-on-grey letterform "M" with Cyrillic text running along its strokes, and a column of ASCII-art text), then a very large black field with the headline "Generative Code Explorations" set in huge light grey Helvetica, overlapping project thumbnails, and finally an off-white section with a spaced-out manifesto line ("ON COMPUTATION AS A WAY OF THINKING") and three columns of small monospace paragraphs. The cookie-consent dialog that the site uses was hidden by the extractor and is not documented. + +The voice is academic and terse: lowercase-capital mixes, parenthetical links such as "(Read More)", and monospace for everything small. Colour in the interface is limited; colour comes from the generative artwork. + +## Colors + +The CSS variables name the whole palette: `--black #0f0f0f` (also `--background`), `--white #fdfdfd`, `--grey #cecece` (`--foreground`), `--ash #858585` (`--foreground-dim`), `--coal #1a1a1a` (`--foreground-dimmed`), `--vanta #000000`, `--blue #0000ff` (`--accent`) and `--red #d4373a`. + +- **Canvas `#0f0f0f`**: the page background; the second background by area (1,024) after the off-white sections. +- **Paper `#fdfdfd`**: the largest background by area (5,155), the manifesto section; also the text colour of the header (56 characters). +- **Ink `#858585`**: the most-read text colour (2,674 of 2,872 characters), used for the small monospace paragraphs. +- **Light grey `#cecece`**: the 128px headline. +- **Coal `#1a1a1a`**: a darker grey, 16 characters. +- **Primary `#0f0f0f`**: the colour of the "(Read More)" link on paper sections; the site has no filled button, so primary here is the dark link colour. +- **Accent blue `#0000ff` and red `#d4373a`**: declared in the root; no measured element on the home page displayed them, so they are not used in component tokens. The root also contains a `--swiper-theme-color #007aff` (a slider library default) and cookie-banner variables (`--cc-*`) that are not brand colours. + +## Typography + +Two families: **2XAMONOVF** (a variable monospace, weights 100 to 900 loaded; 2,701 characters; the studio's own name with "MONOVF") and **HelveticaProRoman** (171 characters, with Helvetica as fallback). + +- **Display, 2XAMONOVF 23.75px / 400**: the header links (2xA STUDIO, ABOUT, PROJECTS, CONTACT, city labels). On mobile 20px. +- **Heading, HelveticaProRoman 128px / 400 / 128px, -1.92px**: the h2 "Generative Code Explorations", 1,248px wide and 404px tall on desktop. On mobile 58.5px with -0.8775px. +- **Subheading, HelveticaProRoman 23.75px / 400, -0.35625px**: the h3 project titles. +- **Body, 2XAMONOVF 19px / 400 / 23.75px**: the dominant size (2,198 characters, -0.285px tracking on 79 of them). On mobile 16px / 20px. +- **Link, HelveticaProRoman 28.5px / 400**: "(Read More)". + +The pairing is a technical monospace for text and a plain grotesk at extreme size for headlines. The root variables define a type scale (`--font-sm` 1rem, `--font-sd` 1.25rem, `--font-md` 1.5625rem, `--font-lg` 1.875rem, all multiplied by `--font-scale: 1`); the measured sizes 19px, 23.75px and 28.5px are the 1.1875 multiples of 16px, 20px and 24px. No foundry pages were opened. + +## Layout + +The grid has breakpoints declared as variables: `--xs 584px`, `--sm 768px`, `--md 1024px`, `--lg 1280px`, `--xl 1512px`. Base padding is `--pad: 1rem` (16px) and the gap `--gap: .625rem` (10px). The header is a 56px-high bar (`--nav-height` is the medium font size plus two pads) with a 16px padding; city/date items sit in the centre columns and the page links at the right. The headline block is 1,248px wide, nearly the full viewport width minus 16px margins. The manifesto row spreads words across the full width with large gaps, and below it the three text columns share the width. Measured gaps: 10px (18 uses); paddings: 16px (29), 5px (11), 10px (6), 80px (2), 160px (1) and 200px (1). The large 80px and 160px steps mark section transitions. The page has very large vertical emptiness between the first generative scene and the headline in the capture. + +## Elevation & Depth + +No shadows (`--box-shadow: none` is declared and no shadow was measured). There are no cards or overlays on the home page. Depth comes from overlap: thumbnails sit over the letters of the huge headline, and the headline letters are clipped by the next section. Dark-to-light section changes (black to `#fdfdfd`) separate bands, with no borders (the border-colour list is empty). + +## Shapes + +The one measured radius is `1.6px` (19 uses), declared as `--border-radius: .1rem`; the root also declares `--border-radius-text: .15rem`. Images and thumbnails are rectangles with that almost imperceptible rounding. The only shapes with strong curves are inside the generative artwork (the yellow capsule strokes of the letterform and the dot constellation), which is content, not interface. + +## Components + +- **Top bar**: black bar, 1,280px wide and 56px high; monospace 23.75px labels in `#fdfdfd`; includes the studio name, two city/date labels and three links. +- **Headline**: "Generative Code Explorations" at 128px in `#cecece`, left aligned over three lines. +- **Project thumbnails**: small rectangular previews (1.6px radius) that overlap the headline. +- **"(Read More)" link**: HelveticaProRoman 28.5px, `#0f0f0f`, on the paper section; parentheses are part of the label. +- **Manifesto row and columns**: spaced monospace caps line, then three columns of 19px monospace text in `#858585`. +- **Footer**: `#0f0f0f` background, `#fdfdfd` text, 16px 16px 0 padding, 800px tall. + +Hover states: none recorded. + +## Design System Architecture + +No public design system or brand guidelines were found. The studio page (https://2xa.studio/) lists contact details, Instagram, Behance and a Spotify playlist and mentions no guidelines; no design-system link is present. The de-facto system is a root-variable set: colour names (`--black`, `--white`, `--grey`, `--ash`, `--coal`, `--blue`, `--red`), semantic aliases (`--background`, `--foreground`, `--foreground-dim`, `--foreground-dimmed`, `--accent`), a font scale with `--font-scale`, spacing (`--pad`, `--gap`), five breakpoints and a family of easing curves (`--ease-in-out: cubic-bezier(.785, .135, .15, .86)`, `--ease-out-expo: cubic-bezier(0, 1, 0, 1)`). A third-party cookie-consent stylesheet (`--cc-*`) and the Swiper slider library are also loaded. + +## Do's and Don'ts + +- Do set small text in the monospace at 19px / 23.75px with `#858585` on black. +- Do use one huge grotesk headline (128px, -1.92px tracking) in `#cecece`. +- Do alternate black (`#0f0f0f`) and paper (`#fdfdfd`) bands without borders. +- Do keep radii at 1.6px and avoid shadows. +- Don't add filled buttons; links are parenthesised text. +- Don't document the cookie dialog or slider arrows as brand UI. +- Don't use `#0000ff` or `#d4373a` on the interface until measured on an element. +- Don't copy the generative artwork's colours (yellow, pink, teal) as UI tokens. + +## Responsive Behavior + +The mobile pass (390px wide) measured: the header link 20px with `8px` padding (nav 36px high, 390px wide) and the three links About, Projects and Contact; the h2 58.5px / 400 with -0.8775px tracking (374px wide, 192px tall); body 16px / 20px (374px wide). Character-weighted mobile sizes: 16px, 20px and 58.5px. The city/date labels are not present in the mobile nav text. Root variables declare breakpoints at 584px, 768px, 1024px, 1280px and 1512px. Layout of the thumbnails and columns at 390px was not measured. + +## Iteration Guide + +1. Black `#0f0f0f`, ash `#858585` body text, light grey `#cecece` headline, paper `#fdfdfd` sections. +2. Monospace 2XAMONOVF at 19px for text; HelveticaProRoman 128px for the headline. +3. 1.6px corners, no shadows, no borders; section changes by colour. +4. Keep links as parenthesised text; no filled buttons. +5. Run `node web/scripts/verify-designs.mjs --slug=2xa-studio` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/35mm/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/35mm/DESIGN.md new file mode 100644 index 0000000..02ceb01 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/35mm/DESIGN.md @@ -0,0 +1,139 @@ +--- +version: alpha +name: 35mm +category: "Tech & AI" +description: "35mm, a Canon F-1 wireframe showcase served from lab.chakibmzn.com: #141414 charcoal canvas, B612 Mono throughout, a 145.92px bold uppercase TIMELESS CRAFT headline with -7.296px tracking, 11.5556px #c8c8c8 body, #bf6d15 orange accent, thin #555555 lines and no radius." +colors: + canvas: "#141414" + ink: "#c8c8c8" + primary: "#bf6d15" + line-grey: "#555555" + ink-bright: "#ffffff" +typography: + display: + fontFamily: "\"B612 Mono\"" + fontSize: 145.92px + fontWeight: 700 + lineHeight: 145.92px + letterSpacing: "-7.296px" + textTransform: uppercase + display-mobile: + fontFamily: "\"B612 Mono\"" + fontSize: 41.73px + fontWeight: 700 + lineHeight: 41.73px + letterSpacing: "-2.0865px" + textTransform: uppercase + body: + fontFamily: "\"B612 Mono\"" + fontSize: 11.5556px + fontWeight: 400 + lineHeight: 17.3333px + body-mobile: + fontFamily: "\"B612 Mono\"" + fontSize: 7.92188px + fontWeight: 400 + lineHeight: 11.8828px +rounded: + xs: 2px + pill: 9999px +spacing: + s1: 7.11px + s2: 10.67px + s3: 14.22px + s4: 17.78px + s5: 53.33px + s6: 88.89px +components: + headline: + textColor: "{colors.ink-bright}" + typography: "{typography.display}" + body-text: + textColor: "{colors.ink}" + typography: "{typography.body}" + accent-label: + textColor: "{colors.primary}" + footer: + textColor: "{colors.ink-bright}" +--- + +## Overview + +35mm is a single-page interactive piece about 35mm photography. The measured address redirected from 35mm-one.vercel.app to https://lab.chakibmzn.com/35mm/, so it is served from an individual's lab domain; the page says nothing about its author, and no credits are listed. The page title is "35mm". The fetched text describes viewfinder-style placeholders ("35mm", "00fps", "0x0", "00:00:00"), a "0%" progress indicator and the headline "Timeless Craft", then content about the Canon F-1 (introduced in 1971 as Canon's professional SLR), 35mm film (24x36mm frames, 3:2 ratio, C-41, E-6 and black-and-white development), a table of five film stocks (Kodak Portra 400, Ilford HP5 Plus, Kodak Ektar 100, Fujifilm Superia X-TRA 400, Cinestill 800T) and a cross-section of colour negative film layers. + +The capture shows a 960px-wide, very tall view: the headline "TIMELESS CRAFT" in huge white bold monospace across the top, and below it a large white-line wireframe drawing of a Canon-style SLR camera (pentaprism, lens barrel with ribbed rings, film-advance lever) on charcoal. Two short columns of small monospace text overlay the drawing (the F-1 history paragraphs). At the top left, tiny grey readouts "10fps 1280x800", at the top right an orange dot with "00:00:09", and corner brackets and a tick-mark ruler at the bottom give a viewfinder frame. A white vertical tab at the right edge reads "Site of the Day"; it is an award-site widget and not part of the design. + +The voice is technical and archival; the interface imitates camera instrumentation. Measured scroll metrics: the page is 2,400px high with an inner scroller of 14,065px, so the story runs through an internal scroll container, and 403 visible elements were counted. + +## Colors + +- **Canvas `#141414`** (`--color-dark-1: 20 20 20`): the single background (4,416 area weight). +- **Ink `#c8c8c8`** (`--color-light-1: 200 200 200`): body text, 3,002 of 3,335 measured characters. +- **Primary `#bf6d15`** (`--color-orange-1: 191 109 21`): the orange of small labels and the recording dot (270 characters). A darker orange, `--color-orange-2: 100 50 0`, is also declared. +- **Line grey `#555555`** (`--color-dark-2: 85 85 85`): borders (7 uses) and secondary text (36 characters). +- **Bright `#ffffff`**: the headline and the footer text (27 characters). +- `--color-dark-3: 150 150 150` is declared. Colour variables are stored as space-separated RGB triples. + +The wireframe lines are light grey on charcoal. Other values seen in the stylesheet (`#2cc9ff`, `#a2db3c`, `#9ca3af`, `#3b82f680` and similar) come from a debug panel library and utility styles; the font list includes `lil-gui`, a developer control panel, so those colours are not brand colours. + +## Typography + +**B612 Mono** carries almost everything (3,031 of 3,335 characters; weights 400 and 700). **Inter** appears for 304 characters (weight 600 is measured for 283 characters). + +- **Display, B612 Mono 145.92px / 700 / 145.92px, -7.296px, uppercase**: "TIMELESS CRAFT", 1,209px wide and 146px tall. A second line size of 135.04px (13 characters) is also measured. On mobile the headline is 41.73px with -2.0865px tracking, 341px wide. +- **Body, B612 Mono 11.5556px / 400 / 17.3333px**: 2,925 characters; paragraphs are narrow columns about 298px wide. +- **Small, 10.6667px (362 characters) and 9.77778px (21)**: readouts and labels. +- On mobile the body is 7.92188px / 11.8828px (2,979 characters), and labels are 7.3125px. + +The root defines `--vw: 640` and `--s: calc(100vw / var(--vw))`, a viewport-based unit; at the measured 1280px viewport the unit is 2px. The fractional pixel sizes (for example 11.5556px) differ between the desktop and mobile passes. Tracking on the headline is -5% of the size. Foundry pages were not opened. + +## Layout + +A 12-column grid is declared: `--grid-cols-count: 12`, `--grid-gap: calc(var(--s) * 20)`, `--column-width: calc((100vw - (12 * grid-gap)) / 12)`. A scanned-element height is defined as two thirds of the grid width (`--scan-element-height`) and `--scan-padding-y` centres it vertically in the dynamic viewport height; the page uses an inner scroller. The headline spans the whole width at the top. Text columns are narrow (298px) and positioned on the left and right of the drawing at different heights. Gaps measured: 17.7778px (25 uses) and 355.556px (4); paddings 17.7778px (23), 14.2222px, 88.8889px and 992.593px (once). The six spacing tokens are 7.11, 10.67, 14.22, 17.78, 53.33 and 88.89px. + +## Elevation & Depth + +No box shadows are used (the stylesheet contains `none`, a Tailwind ring variable with zero value and a 1px inset focus ring `inset 0 0 0 1px var(--focus-color)` from the debug panel). Depth is drawn with line weight and overlap: the wireframe camera is drawn in thin light lines, with text overlaid on top of the drawing and the headline over the top. There are no filled surfaces other than the charcoal canvas. + +## Shapes + +No border radius was measured on any element. The stylesheet contains `2px` and `9999px`, which are given as tokens `xs` and `pill`; their use on the home view was not measured. The visible shapes are straight lines, boxes, circles and ellipses from the wireframe lens, and the corner bracket marks of the viewfinder. The recording dot is a small circle in orange. + +## Components + +- **Headline**: bold uppercase monospace at 145.92px, white, spanning the width. +- **Text columns**: B612 Mono 11.5556px in `#c8c8c8`, about 298px wide, short paragraphs about the Canon F-1. +- **Viewfinder readouts**: fps and size at top left, timer with an orange dot at top right, corner brackets and a ruler at the bottom, all in small grey monospace. +- **Wireframe camera**: line drawing, not a UI component. +- **Interactive prompts**: the fetched text mentions "Hover on a lens part" and labelled parts (pentaprism, focus screen); their styling was not measured. +- **Footer**: 2,400px-tall footer element with white 16px / 24px text, empty text content. + +Hover states: none recorded in the extraction. + +## Design System Architecture + +No public design system or brand guidelines exist for this piece. The fetched page (https://lab.chakibmzn.com/35mm/) names no author or technology; its only external link is an Awwwards listing for the site, which was not opened. The de-facto system lives in root variables: RGB-triple colours (`--color-dark-1`, `--color-dark-2`, `--color-dark-3`, `--color-light-1`, `--color-orange-1`, `--color-orange-2`), a viewport unit (`--vw`, `--s`), a 12-column grid (`--grid-cols-count`, `--grid-gap`, `--column-width`) and scan-element sizing. Tailwind utility variables (`--tw-ring-*`, `--tw-shadow`) are present, as is the lil-gui debug panel. + +## Do's and Don'ts + +- Do use `#141414` with `#c8c8c8` text and `#ffffff` for the headline only. +- Do set everything in B612 Mono, with the headline bold, uppercase and tightly tracked (-7.296px at 145.92px). +- Do use orange `#bf6d15` sparingly for the live indicator and labels. +- Do keep lines thin and light and avoid fills. +- Don't add shadows or rounded cards. +- Don't treat the "Site of the Day" tab or the `lil-gui` panel as design elements. +- Don't use the debug panel's colours (`#2cc9ff`, `#a2db3c`). +- Don't hard-code pixel sizes without the viewport unit; sizes are fractional because they scale. + +## Responsive Behavior + +The mobile pass (390px wide) measured: headline 41.73px / 700 with -2.0865px tracking (341px wide, 42px tall); body 7.92188px / 400 / 11.8828px in a 177px-wide column (392px tall); other sizes 7.3125px and 41.145px. The desktop headline is 145.92px at 1280px. Column layout of the text and drawing at 390px was not measured beyond those widths. + +## Iteration Guide + +1. Charcoal `#141414`, grey text `#c8c8c8`, white headline, orange `#bf6d15` indicator. +2. B612 Mono only; headline 145.92px bold uppercase, body 11.5556px / 17.3333px. +3. Compute sizes from `--s = 100vw / 640`. +4. Draw with thin light lines; no shadows, no fills. +5. Measure the film-table and negative-layer sections (an inner-scroller capture) before documenting them. +6. Run `node web/scripts/verify-designs.mjs --slug=35mm` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/3bb/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/3bb/DESIGN.md new file mode 100644 index 0000000..1ea22a0 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/3bb/DESIGN.md @@ -0,0 +1,165 @@ +--- +version: alpha +name: 3BB Fibre3 +category: "Thai Brands" +description: "3BB Fibre3 (fiber.3bb.co.th, AIS group home broadband, Thai): DB Heavent 62px bold brown #65260f section titles on white, #f5781e orange accent and hover, charcoal #414143 nav bar, 8px card radius and photographic promo banners." +colors: + canvas: "#ffffff" + ink: "#262626" + primary: "#f5781e" + surface-nav: "#414143" + surface-light: "#f5f5f5" + surface-black: "#000000" + ink-secondary: "#7b7b7b" + heading-brown: "#65260f" + primary-dark: "#ae5515" + secondary-orange: "#da5220" + primary-tint: "#fef2e9" + hairline: "#d9d9d9" +typography: + display: + fontFamily: >- + "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 62px + fontWeight: 700 + lineHeight: 64px + display-mobile: + fontFamily: >- + "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 40px + fontWeight: 700 + lineHeight: 40px + body-lg: + fontFamily: >- + "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 24px + fontWeight: 400 + lineHeight: 28px + body: + fontFamily: >- + "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 20px + fontWeight: 400 + lineHeight: 20px + input: + fontFamily: >- + "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 20px + fontWeight: 700 + lineHeight: 20px +rounded: + xs: 8px + sm: 30px + md: 48px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 8px + s4: 9px + s5: 10px + s6: 12px + s7: 14px + s8: 16px + s9: 23px + s10: 24px +components: + nav: + backgroundColor: "{colors.surface-nav}" + textColor: "{colors.canvas}" + padding: 0px 0px 0px 8px + nav-link-hover: + textColor: "{colors.primary}" + text-input: + textColor: "{colors.canvas}" + typography: "{typography.input}" + padding: 0px 29px 0px 10px + height: 24px + card: + backgroundColor: "{colors.surface-black}" + textColor: "{colors.primary}" + typography: "{typography.body-lg}" + rounded: "{rounded.xs}" +--- + +## Overview + +The queued address www.3bb.co.th resolved to https://www.fiber.3bb.co.th/main, the Thai-language home page titled "3BB Fibre3 | ที่หนึ่งของเน็ตบ้านคุณภาพ มาตรฐานความเร็ว 1 Gbps". This document is named after the measured site, 3BB Fibre3, a home broadband service of 3BB Broadband Public Company Limited (บริษัท ทริปเปิลที บรอดแบนด์ จำกัด (มหาชน)), which the page says is part of the AIS group. The page header shows the AIS 3BB Fibre3 lockup. + +The page (1280px wide, 6,475px tall, 673 visible elements) opens with an orange utility bar (payment channels, help, log in, a Thai flag language selector), a charcoal main navigation bar with the logo and the items Internet packages, Promotions, Points and privileges, Current customers and About us, a full-width promotional banner carousel (for example "AIS Cloud PC", "แพ็กเกจเริ่ม 299.-/เดือน"), a section with an embedded video on a yellow-to-orange gradient ("ศักยภาพที่เกิดจากในบ้าน สู่หนัง AI เรื่องแรกในไทย"), a grey "ไฮไลท์" section of three promotional tiles, a "แพ็กเกจแนะนำ" section with four package cards (Home FibreLAN MAX, Smart Soundbar, Super FAST Plus 7, Home FibreLAN PLUS) each with a photo, bold name, grey description and an orange "ดูเพิ่มเติม" link, and a charcoal footer with the company address. The page lists headline offers such as a Smart Soundbar service at 250 THB per month, speeds of 1 Gbps and 2 Gbps, and package prices from 199 THB per month. + +Imagery is bright, saturated promotional artwork with smiling presenters, devices and 3D mascots. The language is Thai, with English product names. No popup or consent overlay appears in the capture. + +## Colors + +- **Canvas `#ffffff`**: the body background. Light sections use `#f5f5f5` (area weight 846). +- **Ink `#262626`** (`--cms-color-defaultText`, `--cms-color-darkestGrey`): headings and card titles (494 characters). +- **Primary `#f5781e`** (`--cms-color-primary`, `--cms-btn-default`, `--cms-border-primary`): the brand orange, used for the "ดูเพิ่มเติม" links (330 characters), the video play glyph, and nav hover. The utility bar behind it measures `#f57921`. +- **Heading brown `#65260f`** (`--cms-color-secondary`, `--cms-color-back-button`): section titles such as "ไฮไลท์" and "แพ็กเกจแนะนำ" (96 characters). +- **Navigation surface `#414143`**: the main bar and the footer (area weight 860, the largest). +- **Secondary text `#7b7b7b`** (`--cms-color-dark-grey`): card descriptions, the most-read colour (1,182 characters). White text `#ffffff` (723 characters) sits on the charcoal surfaces. +- **Black `#000000`**: the video frame background. +- **Hairline `#d9d9d9`** (`--cms-color-grey`, `--cms-color-border-bottom`). +- A numbered orange ramp is declared: `--cms-color-primary50 #fef2e9`, `primary100 #fcd5b9` to `primary900 #67320d`, including `primary700 #ae5515`, and a secondary ramp (`secondary600 #da5220`, `secondary900 #65260f`). Green (`kellyGreen`, `museGreen`) and sand (`serenade`) ramps and a purple-to-pink gradient `--cms-color-privilege-gradient` (`#8e30e1` to `#e6007e`) are declared; they were not measured as element colours on this page. +- The root also holds Bootstrap defaults (`--bs-primary #0d6efd` and others). Those are framework defaults and not brand colours. + +## Typography + +One family: **DB Heavent** (2,825 characters, weights 400 and 700, plus a 500 to 600 range loaded), with a system fallback stack. + +- **Display 62px / 700 / 64px**: section titles in `#65260f`, 1,140px wide (mobile 40px / 40px). +- **Body large 24px / 400 / 28px**: the most used size (1,518 characters), card names and descriptions. +- **Body 20px / 400 / 20px**: footer address and nav text (717 characters; 1,637 characters on mobile). +- **Input 20px / 700 / 20px**: the language select. +- **32px (494 characters)**: card titles in `#262626`; its weight was not tied to an element, so it has no token. + +The root defines a CMS type scale (`--cms-font-h4-size: 32px`, `--cms-font-h5-size: 28px`, `--cms-font-h5-line-height: 28px`, `--cms-font-h3-line-height: 40px`, `--cms-font-body2-line-height: 24px`, `--cms-font-keywords-size: 12px`). Thai text has line heights near 1.0 to 1.17 in these measurements, which are copied as measured. No foundry pages were opened. + +## Layout + +Content sits in a centred 1,140px container within the 1,280px viewport (the h1 block is 1,140px wide). The carousel and video band are full-bleed. The highlight section is a two-column tile grid (one large tile on the left, two stacked tiles on the right), and the package section is a four-card row with arrows for a carousel. Measured gaps are 16px (34 uses), 8px (12), 40px (8), 24px (4), 9px, 80px and 39px; paddings 12px (43), 4px (11), 80px (9), 24px (5), 70px (3), and 2px, 40px, 14px and 44px. The main nav is 24px tall in its language control and the bar itself spans the full width. Section spacing is large (80px paddings) relative to the 20px text. + +## Elevation & Depth + +No box shadows were measured. Separation uses colour fields: a white page, light grey `#f5f5f5` bands, charcoal `#414143` navigation and footer, and a gradient video band. The video frame is a black rounded rectangle on the gradient. Promotional tiles carry their own artwork and no outlines. A rgba(0,0,0,0.86) dark-brown background and `rgba(255,255,255,0.2)` SVG image border are declared in the root variables. + +## Shapes + +Radii: `8px` (19 uses: cards, tiles and the video), `30px` (5), `48px` (4) and `50%` (4, circular carousel arrows and icons). Larger radii of 30px and 48px belong to rounded promotional elements. The package cards and banners have 8px corners; the images inside the cards have the same 8px. + +## Components + +- **Utility bar**: orange (`#f57921`) strip with payment, help, login and language items in white. +- **Main nav**: `#414143` bar, white 20px links, hover colour `rgb(245, 120, 30)` (`#f5781e`) in 28px-high link boxes, a search icon and a location icon. +- **Language select**: TH/EN `select`, 58px by 24px, 20px / 700, white arrow image, padding `0px 29px 0px 10px`. +- **Carousel**: full-width banner with circular arrows and dot indicators. +- **Video card**: a 752px by 423px YouTube embed with 8px radius and a black background, orange play label. +- **Package card**: photo, 24px bold name, grey description in `#7b7b7b`, orange "ดูเพิ่มเติม" link with a chevron. +- **Footer**: `#414143` with white 20px text including the company address (89 Cosmo Office Park, Popular Road, Ban Mai, Pak Kret, Nonthaburi, as the page text states). + +## Design System Architecture + +No public design system or brand guidelines were found: the page (https://www.fiber.3bb.co.th/main) links privacy, careers, contact, CSR and complaint pages but no guidelines. The de-facto system is a CMS token layer in root variables: `--cms-color-*` ramps (primary50 to 900, secondary50 to 900, grey scale, kellyGreen, museGreen, serenade), `--cms-bg-color-*`, `--cms-font-*` sizes and line heights, `--cms-border-primary` and `--cms-btn-default`, on top of a Bootstrap 5 base (`--bs-*`) and Font Awesome 6. The loaded select-arrow icon URL shows client libraries served from an `etc.clientlibs/ais/clientlibs` path. + +## Do's and Don'ts + +- Do use orange `#f5781e` for links and hover states and brown `#65260f` for section titles. +- Do use charcoal `#414143` for navigation and footer with white text. +- Do round cards and video at 8px. +- Do pair bright promotional art with plain white and `#f5f5f5` bands. +- Do keep Thai text in DB Heavent at 20px and 24px. +- Don't use Bootstrap's `#0d6efd` or other `--bs-*` colours as brand colours. +- Don't add shadows; none were measured. +- Don't use the green, sand or purple-pink gradient ramps until measured on an element. + +## Responsive Behavior + +Mobile pass (390px wide): the section title is 40px / 700 / 40px, 358px wide; the footer address is 20px / 400 / 20px, 358px wide and 100px tall; the character-weighted sizes are 20px (1,637 characters), 24px (535), 16px (99), 40px (96) and 18px (41). The mobile pass found no nav or CTA role. Layout of cards, carousel and navigation at 390px was not measured. + +## Iteration Guide + +1. White canvas, `#262626` ink, `#f5781e` orange accent, `#65260f` brown titles, `#414143` bars. +2. DB Heavent only: 62px / 700 titles, 24px and 20px body. +3. 8px corners; no shadows; colour-field sections. +4. Use the CMS ramps (primary50 to primary900) for tints rather than inventing new oranges. +5. Run `node web/scripts/verify-designs.mjs --slug=3bb` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/3m-g/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/3m-g/DESIGN.md new file mode 100644 index 0000000..f6b7deb --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/3m-g/DESIGN.md @@ -0,0 +1,246 @@ +--- +version: alpha +name: 3M +category: "Business & Corporate" +description: "3M's US corporate home (3m.com) sets everything in the proprietary 3MCircular face, uses 3M red #d10411 for buttons and active tabs, a deep #8a041f burgundy band for news cards, #4b4b4b/#202024 text on white, 2px button corners and a 20px-radius search pill." +colors: + canvas: "#ffffff" + ink: "#4b4b4b" + ink-body: "#202024" + ink-black: "#000000" + primary: "#d10411" + on-primary: "#ffffff" + burgundy: "#8a041f" + gray-light: "#d3d3d3" + hairline: "#e5e5e5" + text-input-bg: "#fafafa" + text-input-border: "#d6d6d6" +typography: + display: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 32px + fontWeight: 700 + lineHeight: 40px + display-mobile: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 18px + fontWeight: 700 + heading: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 42px + fontWeight: 700 + lineHeight: 50px + heading-mobile: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 26px + fontWeight: 700 + lineHeight: 38px + subheading: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 18px + fontWeight: 700 + lineHeight: 28px + body: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + body-mobile: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 22px + button: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 16px + fontWeight: 700 + lineHeight: normal + tab: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 16px + fontWeight: 700 + lineHeight: 24px + small: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 14px + link: + fontFamily: "\"3MCircular\", Arial, sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 28px +rounded: + none: 0px + xs: 2px + sm: 20px +spacing: + s1: 1px + s2: 4px + s3: 5px + s4: 6px + s5: 7px + s6: 10px + s7: 15px + s8: 20px + s9: 30px + s10: 35px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 0px 35px + height: 45px + industry-tab-active: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.tab}" + rounded: "{rounded.none}" + padding: 15px + height: 56px + borderColor: "{colors.primary}" + news-card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-black}" + typography: "{typography.subheading}" + rounded: "{rounded.none}" + boxShadow: rgba(75, 75, 75, 0.1) 0px 10px 20px 0px + link: + textColor: "{colors.canvas}" + typography: "{typography.link}" + rounded: "{rounded.none}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.none}" + padding: 0px 0px 1px + search-input: + backgroundColor: "{colors.text-input-bg}" + textColor: "{colors.ink}" + typography: "{typography.body}" + rounded: "{rounded.sm}" + padding: 6px 60px 5px 15px + height: 40px + borderColor: "{colors.text-input-border}" +--- + +## Overview + +3m.com (US English, measured at 1280px and 390px) is a corporate gateway for a science and manufacturing conglomerate. The page title is "3M Science. Applied to Life. 3M United States", and the logo lockup in the header repeats that line beside the red 3M wordmark. The home page is short on selling and long on routing: a wide search pill, three top categories (Products, Industries, Brands), a hero statement, a news grid, an AI-assistant promotion, an industry tab panel, a "Who we are" link block and a dense multi-column footer. + +The look is corporate and restrained. Everything is set in one family, the proprietary 3MCircular, in three weights. Colour is concentrated in two reds: the bright 3M red `#d10411` used for buttons, the active industry tab, the red promo tile and in-text links, and a deep burgundy `#8a041f` that fills the full-width "What's new" band behind white news cards. The rest of the page is white with grey and black type. + +Photography is industrial and documentary: a macro shot of a perforated material in the hero, a robot arm over a red car body, a person at a monitor, product shots inside news cards. Icons in the "Who we are" block are thin red line drawings on a black textured background. + +Note on the capture: the screenshot shows a country-selector dialog (Thailand / United States) over the hero. It is a geolocation prompt, not brand UI, and is not documented here. + +## Colors + +- **3M red `#d10411`** (`primary`) — the "Try Ask 3M" button, the active industry tab ("Automotive"), the large red tile in "Who we are", and red in-text links in the industry panel ("Auto Care", "Collision Repair", "Solventum"). 93 measured characters of text use it. +- **Burgundy `#8a041f`** — the second-largest background area on the page: the full-width "What's new" band. +- **Canvas `#ffffff`** — page background, header, news cards. +- **Ink `#4b4b4b`** — the body element's text color, header navigation, the search field text. +- **Body text `#202024`** (`ink-body`) — paragraph copy such as "Our solutions help manufacture, maintain, or advance nearly every vehicle in the world". +- **Black `#000000`** (`ink-black`) — news card headlines and section headings on white ("What we do"). +- **Light grey `#d3d3d3`** — a large grey background area; **`#e5e5e5`** — hairline borders and a small background area. +- **Search field** — `#fafafa` fill with a `#d6d6d6` border. + +White text (`#ffffff`) is the single most-read text color by character count, because the hero, burgundy band and "Who we are" block all set type in white. + +A `#0033cc` text color was measured; in the capture the only visible text of that color is the link inside the country-selector dialog, so it is not a token here. + +## Typography + +One family, **3MCircular** (loaded as normal, bold and 200), with Arial as the declared fallback. It is proprietary to 3M; a freely available geometric sans such as DM Sans can stand in as a fallback, since 3MCircular itself is the brand voice. + +| Role | Size / line-height | Weight | +| --- | --- | --- | +| Section heading ("What's new") | 42px / 50px | 700 | +| Hero headline (h1) | 32px / 40px | 700 | +| Card headline (h3) | 18px / 28px | 700 | +| Link (large) | 18px / 28px | 400 | +| Body | 16px / 24px | 400 | +| Button | 16px / normal | 700 | +| Tab | 16px / 24px | 700 | +| Small / utility | 14px / 14px | 400 | + +Other measured sizes are 36px, 22px, 13px and 12px; 14px carries the most characters (footer and utility links). One letter-spacing value was measured: 2px at 14px, used for the tracked uppercase footer column labels (OUR COMPANY, NEWS, REGULATORY, HELP, FOLLOW US). Weight 200 carries 684 measured characters. All headings are sentence case. + +## Layout + +The measured desktop page is 1,280px wide and 4,871px tall, with content between x=85 and x=1190 in the band analysis. Measured gaps are 30px (16 times), 20px and 45px; paddings cluster at 15px, 10px, 30px and 50px. + +Order of sections in the capture: + +1. **Header** — logo lockup, a wide search field with an attached dark search button, locale switch (US - EN) at right; a second row with Products, Industries, Brands and Account. +2. **Hero** — a full-width photograph with the h1 "What the world needs next, we are making now." in a translucent dark box (`#00000099` measured background) at lower left. +3. **What's new** — burgundy band, centered 42px white heading, a 3-column grid of white news cards (image, date, bold headline), two rows. +4. **Ask 3M promo** — left-aligned headline, paragraph and red button over a photo that fades to white at the left. +5. **What we do** — left column of industry tabs (the active one red), right panel with photo, 18px headline, paragraph and a row of red underlined links, all inside a red-bordered box. +6. **Who we are** — black textured band with a red tile ("People. Ideas. Science. Reimagining what's possible.") and a two-column list of red line icons with underlined white links. +7. **Footer** — five columns with tracked uppercase labels, then a legal row with the 3M logo. + +The maximum card column count measured on desktop is 3. + +## Elevation & Depth + +One shadow was measured: `rgba(75, 75, 75, 0.1) 0px 10px 20px 0px`, on 8 elements (the news cards). Everything else is flat. Depth otherwise comes from colour blocks — white cards on burgundy, a red tile on black — and from the translucent black box behind the hero headline. + +## Shapes + +Corners are nearly square. Measured radii: **0px** on tabs and cards, **2px** on buttons and header links, **20px** on the search field, `0px 20px 20px 0px` on the attached search button (rounding only the right side so the field and button read as one pill), and `0px 0px 3px 3px` on one element. News images are hard-cut rectangles at the top of each card. + +## Components + +- **Primary button** ("Try Ask 3M") — `#d10411` fill, white 3MCircular 16px/700, padding 0px 35px, 45px tall, 2px radius, no border, no shadow. +- **Active industry tab** ("Automotive") — `#d10411` fill with a 1px `#d10411` border, white 16px/700 label, 15px padding, 56px tall, 0px radius. Inactive tabs are plain black text on white. +- **News card** — white, 0px radius, the 10px/20px soft shadow, image on top, small date line, 18px/700 black headline. +- **Search field** — `#fafafa` fill, 1px `#d6d6d6` border, 20px radius, padding 6px 60px 5px 15px (the right padding leaves room for the attached button), 40px tall, 605px wide. +- **Header navigation** — white, `#4b4b4b` text; hover on Products/Industries keeps the color and background unchanged in the measured hover pass. +- **Industry panel links** — red, underlined, inline in a row. +- **Footer** — tracked 14px uppercase column labels, plain link lists, social icons, legal row. + +## Design System Architecture + +No public design system or brand-guidelines page for 3M could be opened in this session: the fetch of https://www.3m.com/3M/en_US/company-us/about-3m/ timed out (recorded in SOURCES.json), and the re-extraction of the home page failed with an HTTP/2 protocol error. The site exposes no CSS custom properties at `:root` (zero root variables measured), so the de-facto system is read from the computed styles: a single proprietary family (3MCircular) with a custom icon font (`3MThemeIconFont`), one primary red, one burgundy, a grey ramp (`#4b4b4b`, `#d3d3d3`, `#d6d6d6`, `#e5e5e5`, `#fafafa`), radii of 0/2/20px and one card shadow. + +## Do's and Don'ts + +**Do** +- Set all text in 3MCircular; bold (700) for headings and buttons, regular (400) for body. +- Use `#d10411` for actions, the active state and in-text links. +- Use `#8a041f` only as a full-width band colour behind white cards. +- Keep corners at 0px for cards and tabs and 2px for buttons; reserve 20px for the search pill. +- Write headings in sentence case and keep microcopy plain ("What's new", "What we do", "Who we are"). + +**Don't** +- Don't put long body copy in red; the reds are for actions and accents. +- Don't introduce gradients or extra shadows beyond the single card shadow. +- Don't round buttons into pills. +- Don't document or imitate the country-selector dialog as part of the brand UI. +- Don't mix in a second typeface for headings. + +## Responsive Behavior + +Measured at 390px: + +- The header shows 3 links and a menu toggle labelled "Open Navigation" (desktop: 6 header links, no toggle). +- The hero headline measured 18px/700; the "What's new" heading measured 26px/38px; body paragraphs measured 14px/22px (16px/24px on desktop). +- Card grid: maximum card columns measured 1 (desktop 3). +- Content runs from x=15 to x=375 in most bands. +- The burgundy "What's new" band measured 1,105px tall; the "Who we are" photo band 726px; a `#d10411` 54px strip sits above the industry photo in the "What we do" section. +- The page ends with a `#f2f2f2` band (234px). + +Breakpoints between 390px and 1280px were not measured. + +## Iteration Guide + +1. Start from white, `#4b4b4b`/`#202024` text and 3MCircular at 16px/24px. +2. Add one red action per section: a 45px, 2px-radius `#d10411` button with 35px side padding. +3. For a news or story section, use a burgundy `#8a041f` band with a 3-column grid of white, square-cornered cards carrying the `rgba(75,75,75,0.1) 0 10px 20px` shadow; set gaps at 30px. +4. For category navigation, use a vertical tab list with a solid red active tab (0px radius, 56px tall) beside a red-bordered content panel. +5. Keep section headings at 42px/700 on desktop and 26px/700 on mobile. +6. Use industrial or laboratory photography; avoid stock lifestyle imagery that does not show a material, product or process. +7. Anything outside these measured values should be checked against a fresh extraction before use. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/8bit-ai/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/8bit-ai/DESIGN.md new file mode 100644 index 0000000..52d5154 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/8bit-ai/DESIGN.md @@ -0,0 +1,171 @@ +--- +version: alpha +name: 8bit.ai +category: "Tech & AI" +description: "8bit.ai (8bit.ai Inc.) AI compute and Neutrino platform site: pure black #000000 canvas with white Roboto Condensed 20px/500 body, Helvetica display lines at 61.04px with -3.052px tracking in steel blue #8faab2, white 8px-radius buttons with #1a1a1a labels." +colors: + canvas: "#000000" + ink: "#ffffff" + primary: "#ffffff" + on-primary: "#1a1a1a" + accent-steel: "#8faab2" +typography: + display: + fontFamily: >- + __helvetica_827732, __helvetica_Fallback_827732, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 61.04px + fontWeight: 400 + lineHeight: 73.248px + letterSpacing: "-3.052px" + display-mobile: + fontFamily: >- + __helvetica_827732, __helvetica_Fallback_827732, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 39.06px + fontWeight: 400 + lineHeight: 46.872px + letterSpacing: "-1.172px" + heading: + fontFamily: >- + __helvetica_827732, __helvetica_Fallback_827732, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 48.83px + fontWeight: 400 + lineHeight: 58.596px + letterSpacing: "-1.465px" + subheading: + fontFamily: >- + __helvetica_827732, __helvetica_Fallback_827732, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 25px + fontWeight: 400 + lineHeight: 30px + letterSpacing: "-0.75px" + body: + fontFamily: >- + __Roboto_Condensed_338de4, __Roboto_Condensed_Fallback_338de4, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 20px + fontWeight: 500 + lineHeight: 28px + letterSpacing: 0.2px + button: + fontFamily: >- + __Roboto_Condensed_338de4, __Roboto_Condensed_Fallback_338de4, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + letterSpacing: 0.32px +rounded: + xs: 8px +spacing: + s1: 3.13px + s2: 4px + s3: 7.63px + s4: 8px + s5: 12px + s6: 16px + s7: 24px + s8: 30px + s9: 32px + s10: 40px +components: + button-primary: + backgroundColor: "{colors.ink}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 24px 32px + height: 49px + button-secondary: + backgroundColor: "{colors.ink}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 24px 32px + height: 49px + headline-steel: + textColor: "{colors.accent-steel}" + typography: "{typography.display}" +--- + +## Overview + +8bit.ai presents itself with the wordmark "8bit.ai" (a stylised 8 followed by "bit.ai") and, per the extracted text, the headline "On-demand Accelerated Compute & End-to-End AI Solutions" and the product name Neutrino™ ("Neutrino™ renders a single source of truth conversational interface…"), with two buttons "Explore Neutrino" and "View Services". The page text fetched through WebFetch was mostly boilerplate: the copyright line names "8bit.ai Inc.", a "Scroll Down To Continue" prompt, a Menu toggle, a Privacy Policy link, a note that the site uses technical cookies only, and links to LinkedIn, X, Instagram and YouTube. It did not describe the company, so no company claims beyond the page's own words are made here. + +The measured home view (1280px wide, 800px scroll height, 749 visible elements) is a full-screen black scene with a field of white light streaks falling diagonally, and a large rounded "8" emblem outlined in light at the centre. In the capture, several headline lines are stacked and cross-fading at the same moment, so the text overlaps: "AI-as-a-Service", "Bespoke Solutions", "Supercomputing", "Multi-agentic AI Operations Platform for the Superintelligent Enterprise" and "On-demand Accelerated Compute & End-to-End AI Solutions", each in large Helvetica in steel blue or white, with small condensed paragraphs behind them. The overlap is a transition caught mid-animation, not a layout. A small cut-off pill at the top left carries the sound prompt, and a two-line menu icon sits at the top right. + +The mood is cinematic and technical: black, light lines, large light type. A cookie-consent container was hidden by the extractor (recorded in the extraction as `consentOverlaysHidden`) and is not documented. + +## Colors + +The measured palette is three values and a transparent white. + +- **Canvas `#000000`**: the body and the scene background. +- **Ink `#ffffff`**: 6,412 of 6,752 measured text characters; also the fill of the buttons (area weight 32) and a translucent `#ffffff1a` surface (1). +- **Primary `#ffffff`**: the buttons are white, so the action colour equals the ink. +- **On-primary `#1a1a1a`**: the button label colour (42 characters). +- **Accent steel `#8faab2`**: a cool blue-grey used for the h1, h2 and h3 headlines (298 characters), measured as the colour of the large display lines. + +The stylesheet root includes a Leva control panel (`--leva-colors-accent1 #0066dc`, `--leva-colors-elevation1 #292d39`, `--leva-colors-folderWidgetColor #8c92a4`, and more): Leva is a developer GUI for 3D scenes, and its variables are not brand colours. + +## Typography + +Two self-hosted families, hashed by the framework: **Helvetica** (`__helvetica_827732`, 378 characters; used for the large display lines) and **Roboto Condensed** (`__Roboto_Condensed_338de4`, 6,331 characters, loaded at 400 and 500; used for body, buttons and small text). Both have metric fallbacks and a system sans-serif stack. + +- **Display, Helvetica 61.04px / 400 / 73.248px, -3.052px**: h1 "Accelerating" (309px wide, 73px tall; mobile 39.06px / 46.872px / -1.172px). +- **Heading, Helvetica 48.83px / 400 / 58.596px, -1.465px**: the h2, 340px wide and 293px tall on desktop (five lines). +- **Subheading, Helvetica 25px / 400 / 30px, -0.75px**: the h3 "Accelerating" at 132px wide. +- **Large size 76.29px, tracking -3.052px** (80 characters): a bigger display line in the scene, not tokenised. +- **Body, Roboto Condensed 20px / 500 / 28px, 0.2px**: paragraphs (2,286 characters; 606px wide column). +- **Button, Roboto Condensed 16px / 400 / 24px, 0.32px**: 4,088 characters at 16px. + +Display tracking is negative (about -5% at 61.04px, -3% at 48.83px) while small text has positive tracking (+1.6% at 20px and 16px). The root variable `--font-size: clamp(10px, 0.6944444444444444vw, 11.5px)` sets a fluid base size. Foundry pages were not opened. + +## Layout + +The page is a full-viewport stage with fixed layers: a header (`--header-height: 6.1rem`) carrying the logo and menu toggle, a canvas of light streaks, and stacked text slides. The root declares `--margin: 2rem` and `--gutter: 1rem`. The body paragraph column measures 607px wide, and the headline blocks are narrow (309px, 340px), which leaves the right half of the screen to the emblem and light streaks. Measured gaps are 24px (36 uses), 30px (24), 40px (12), 16px (4) and 195px (4); paddings 4px (36), 100px (16), 12px (16), 7.629px (12), 8px, 16px, 3.125px, 24px and 32px. The scroll height is the 800px viewport; deeper pages respond to the "Scroll Down To Continue" prompt and were not measured. + +The page therefore has three planes: the black ground, the light-streak layer and emblem, and the text layer on top. The text layer holds two voices: large Helvetica statements in steel blue or white, and small condensed paragraphs in white that sit behind or beside them. The two buttons are the only filled elements in the measured view. + +## Elevation & Depth + +No box shadows were measured. Depth is produced by motion and light: white streaks of varying length and opacity, a glowing outline on the emblem, and cross-fading text layers with different opacities in the capture. Buttons are flat white fills. + +## Shapes + +One radius: `8px` (3 uses), on the white buttons. The emblem "8" is a rounded, outlined glyph with large curvature drawn in the artwork. The menu icon is two horizontal lines. Everything else is the free-form streak art. + +## Components + +- **Primary button "Explore Neutrino"**: white `#ffffff` fill, `#1a1a1a` Roboto Condensed 16px label, 8px radius, `24px 32px` padding, 230px by 49px. +- **Secondary button "View Services"**: the same white fill, label and radius, 212px wide; the extractor found no visual difference from the primary one. +- **Logo**: "8bit.ai" wordmark at top left. +- **Menu toggle**: two-line icon at top right. +- **Headline slides**: Helvetica lines in steel blue `#8faab2` or white, cross-fading. +- **Footer notes**: "This site uses technical cookies only", a Privacy Policy link and social links, as the fetched text lists. + +Hover states: none recorded. + +## Design System Architecture + +No public design system or brand guidelines were found: the fetched page (https://www.8bit.ai/) has a privacy link and social links but nothing about guidelines. The de-facto system is small: root variables `--font-family-roboto`, `--font-family-helvetica`, `--header-height`, `--margin`, `--gutter`, `--font-size` and `--vh`, together with Tailwind utility variables (`--tw-ring-*`) and the Leva GUI variables. Font names are the hashed names generated by a framework font loader. + +## Do's and Don'ts + +- Do keep the page black and let white light streaks supply the visual energy. +- Do set display lines in Helvetica 400 with strong negative tracking and body in Roboto Condensed 500 at 20px. +- Do use the steel `#8faab2` for headline lines and white for buttons and body. +- Do give buttons an 8px radius and a `#1a1a1a` label. +- Don't document the cookie container, sound prompt or Leva GUI as brand UI. +- Don't treat overlapping headline text as a layout; it is a transition frame. +- Don't add shadows or additional accent colours; none were measured. + +## Responsive Behavior + +Mobile pass (390px wide): the h1 and h2 are both 39.06px / 400 / 46.872px with -1.172px tracking (the h1 215px wide and 47px tall; the h2 310px wide and 234px tall); the body paragraph is 20px / 500 / 28px in a 306px-wide column (476px tall); the primary button keeps its 16px label, `24px 32px` padding, 8px radius, 230px by 49px. Character-weighted mobile sizes: 16px (4,056), 20px (2,261), 39.06px (378) and 10.24px (15). Header and streak layout at 390px were not measured. + +## Iteration Guide + +1. Black canvas, white ink, one steel accent `#8faab2` for headline lines. +2. Helvetica 61.04px / -3.052px for display, Roboto Condensed 20px / 500 for body. +3. White 8px-radius buttons with `#1a1a1a` labels. +4. Let imagery (light streaks, the 8 emblem) carry decoration; keep UI flat. +5. Re-measure after the scroll prompt is passed before documenting inner sections. +6. Run `node web/scripts/verify-designs.mjs --slug=8bit-ai` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/a-day/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/a-day/DESIGN.md new file mode 100644 index 0000000..dc7630b --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/a-day/DESIGN.md @@ -0,0 +1,163 @@ +--- +version: alpha +name: a day magazine +category: "Thai Brands" +description: "Thai lifestyle magazine and media brand (Day Poets Company Limited) measured at adaymagazine.com - warm off-white page #efeee7, black ink #000000, orange accent #fe552c, a single geometric Thai-Latin family lineSeedSansTH from 400 to 800, pill-shaped 9999px outline buttons, and full-bleed photographic tiles." +colors: + canvas: "#ffffff" + page-largest: "#efeee7" + ink: "#000000" + primary: "#fe552c" + on-primary: "#9ac2ff" + ink-soft: "#1a1a1ae6" + on-dark-strong: "#ffffffd9" + on-dark-soft: "#ffffffcc" + ink-muted: "#6a7282" + button-primary-bg: "#9ac2ff26" +typography: + display: + fontFamily: lineSeedSansTH, "lineSeedSansTH Fallback" + fontSize: 38px + fontWeight: 700 + lineHeight: 43.7px + display-mobile: + fontFamily: lineSeedSansTH, "lineSeedSansTH Fallback" + fontSize: 24px + fontWeight: 700 + lineHeight: 27.6px + heading: + fontFamily: lineSeedSansTH, "lineSeedSansTH Fallback" + fontSize: 20px + fontWeight: 800 + lineHeight: 26.6667px + subheading: + fontFamily: lineSeedSansTH, "lineSeedSansTH Fallback" + fontSize: 60.992px + fontWeight: 700 + lineHeight: 83.864px + body: + fontFamily: lineSeedSansTH, "lineSeedSansTH Fallback" + fontSize: 18px + fontWeight: 400 + lineHeight: 28px + button: + fontFamily: lineSeedSansTH, "lineSeedSansTH Fallback" + fontSize: 11px + fontWeight: 500 + lineHeight: 16.5px + letterSpacing: 0.88px + textTransform: uppercase + nav: + fontFamily: lineSeedSansTH, "lineSeedSansTH Fallback" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + pill: 9999px +spacing: + s1: 4px + s2: 8px + s3: 12px + s4: 16px + s5: 20px + s6: 24px + s7: 28px + s8: 32px + s9: 40px + s10: 48px +components: + button-primary: + backgroundColor: "{colors.button-primary-bg}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 8px 20px + height: 35px + borderColor: "{colors.on-primary}" + link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + nav: + backgroundColor: "{colors.ink}" + textColor: "{colors.ink}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + text-input: + textColor: "{colors.ink}" + typography: "{typography.nav}" + height: 27px + footer: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" +--- + +## Overview +a day magazine is the Thai editorial and media brand run by Day Poets Company Limited in Bangkok. The homepage, which declares `lang="th"` and is titled "a day magazine", describes the brand as a companion for "Figuring-it-out Adults" and signs off with the line "MAY A DAY BE A FRIEND TO FIGURE OUT LIFE TOGETHER". The navigation lists Home, Video, Podcast, Series, Magazine and Activities, with About Us, Contact and Privacy Policy as utility pages. + +The capture is photography first. A black top bar holds the lowercase bold wordmark "a day" at the left and three icons at the right (language, search and an orange mark). Below it a full-width hero photograph carries a white headline over a dark gradient with a small category label ("LIFE & CULTURE") above it. Under the hero, a row of three photo thumbnails sits on the warm page background, followed by two large square tiles labelled "main course" and "wake up" in big white lowercase type, and a final full-bleed portrait. Colour in the interface itself is minimal: black, off-white, white and one orange. + +## Colors +The measured page background is `{colors.page-largest}` (#efeee7), a warm paper tone that covers the largest area of the page (5383 area-weight units against 1306 for black). The generator-assigned `{colors.canvas}` is #ffffff; the body role itself reports #efeee7. Text is `{colors.ink}` (#000000) with the most characters (738), then white (300) on photographs, `{colors.ink-soft}` (#1a1a1ae6), and two translucent whites (`{colors.on-dark-strong}` #ffffffd9 and `{colors.on-dark-soft}` #ffffffcc) used on the photo overlays. `{colors.ink-muted}` (#6a7282) is a grey secondary text. + +`{colors.primary}` (#fe552c) is the orange measured on the accent text (37 characters) and in the h2 child spans, and it is the colour of the top-bar mark in the capture. The single measured button is a translucent-blue outline pill: fill `{colors.button-primary-bg}` (#9ac2ff26) with text and border `{colors.on-primary}` (#9ac2ff), found on the hero's "ตามไปดู" (Follow) button. The hover probe of a pill labelled "Q AND A DAY" shows a yellow variant (rgb 234, 213, 13) whose fill goes from 15 percent alpha to solid on hover and whose text turns white; it is a per-section accent and not a global token, so it is not declared. The hairline colour is a 15 percent black border. + +## Typography +One family carries everything: `lineSeedSansTH` with a generated fallback, loaded at weights 100, 400, 700 and 800 (loadedFonts). The stylesheet also references `thongterm` and `eqTh` families and the Geist variables from the framework default, but the measured roles use only lineSeedSansTH. + +- `{typography.display}`: 38px weight 700, line-height 43.7px, the hero headline in white (24px with 27.6px line-height at the 390px mobile pass). +- `{typography.heading}`: 20px weight 800, line-height 26.6667px, used for the tagline h2 "MAY A DAY BE A FRIEND TO FIGURE OUT LIFE TOGETHER". +- `{typography.subheading}`: 60.992px weight 700, line-height 83.864px, for the large white tile titles ("main course"). +- `{typography.body}`: 18px weight 400, line-height 28px, black on the page background. +- `{typography.button}`: 11px weight 500, uppercase, letter-spacing 0.88px. +- `{typography.nav}`: 16px weight 400, line-height 24px. + +The body role reports `text-transform: lowercase` at 32px, matching the lowercase editorial voice of tile titles. + +Font substitutes: lineSeedSansTH is a LINE Seed Sans Thai-capable face; when it is not available use any geometric sans with Thai coverage and keep the 400/700/800 weights. This substitution advice is a design suggestion, not a measurement. + +## Layout +The measured desktop width is 1280px and the page scroll height is 5491px. The layout is full-bleed: the hero photograph spans the full viewport width, the three-up thumbnail row runs nearly edge to edge with thin gutters, and the two tiles split the width into two columns of different widths. Spacing tokens measured from gaps and paddings step 4, 8, 12, 16, 20, 24, 28, 32, 40 and 48px (`{spacing.s1}` to `{spacing.s10}`). Body copy sits in a narrow measure (the bodyText block is 460px wide). Density is low: few text blocks, large images, generous empty page background between sections. + +## Elevation & Depth +There are no measured drop shadows on the roles: the h1, body and button all report no box-shadow, and the stylesheet's shadow values are Tailwind variable chains that resolve to none. Depth comes from photography and dark overlays (the frequency table lists black at 10 percent, 45 percent and 55 percent alpha as background fills over images), not from cards with shadows. Do not add shadows. + +## Shapes +Radii measured in the CSS corpus are 9999px (5 uses), 4px, 8px, 24px, 28px and 30px. The pill `{rounded.pill}` (9999px) is the button shape; the border-radius frequency table reports only the pill. Photo tiles in the capture are square-cornered. + +## Components +**Primary button** (`button-primary`): pill, 35px high, padding 8px 20px, 11px uppercase medium text at 0.88px tracking, blue text and 1px-style border `{colors.on-primary}` over a translucent blue fill. It sits on photography. On hover the probed sibling button fills solid and its text turns white. + +**Navigation**: a black bar (`{colors.ink}` background) with the lowercase white wordmark at the left and icons at the right. Nav link text is `{typography.nav}`. + +**Text input**: 27px high, nav typography, black text. + +**Footer**: black background with white text (`{colors.canvas}`). + +**Category label**: small uppercase tracked label above a headline, in blue on the hero and in orange on a tile (seen in the capture). Its size is not separately measured. + +A cookie consent dialog appears at the bottom of the capture ("เราใช้คุกกี้" with three buttons). It is a consent control and is not documented as brand UI or tokens. + +## Design System Architecture +No public design system or brand guideline is linked from the homepage; the fetched homepage lists no such link. The de-facto system is Tailwind-based: the root variables include Tailwind v4 names (`--text-2xl: 1.5rem`, `--text-lg: 1.125rem`, `--spacing: .25rem`, `--container-5xl: 64rem`, `--leading-relaxed`, `--font-weight-black`), orange and neutral scale colours, and `--background: #fff`. That gives a 4px base spacing unit consistent with the measured spacing steps. Fonts are loaded as self-hosted faces named lineSeedSansTH. The site source is https://adaymagazine.com/, opened for this document. + +## Do's and Don'ts +- Do let photography fill the width; put white lowercase titles directly on dimmed photos. +- Do keep the page background `{colors.page-largest}` and ink `{colors.ink}`. +- Do use one typeface family and vary weight 400, 700, 800. +- Do use the 9999px pill for outline buttons. +- Don't add shadows or heavy borders. +- Don't use the orange `{colors.primary}` for large fills; it is measured only on small accents. +- Don't style the cookie dialog as part of the brand. +- Don't use more than one accent colour per section. + +## Responsive Behavior +The extractor ran one mobile pass at 390px. Measured there: the h1 drops from 38px to 24px (line-height 27.6px), the h2 stays 20px (line-height 28px) and the body text stays 18px with 28px line-height. The h1 box is 342px wide on mobile; the h2 box is 230px wide and the body box 230px wide. Breakpoints, navigation collapse behaviour, and touch target sizes were not measured. + +## Iteration Guide +1. Start from `{colors.page-largest}` as the page fill and `{colors.ink}` as text. +2. Set all text in lineSeedSansTH; headline 38px/700, tile title 60.992px/700, body 18px/400. +3. Build the button as a 35px pill with a translucent fill and matching colour border. +4. Fill sections with edge-to-edge photographs; overlay white titles. +5. Use `{colors.primary}` only for small accents such as category labels and icons. +6. Anything not listed in the frontmatter (dark mode, tablet breakpoints, focus states) is not measured: check the live site before adding it. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aalto-university/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aalto-university/DESIGN.md new file mode 100644 index 0000000..5e5716f --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aalto-university/DESIGN.md @@ -0,0 +1,173 @@ +--- +version: alpha +name: Aalto University +category: "Design Systems" +description: "Aalto University's website is a Finnish-language, Inter-only editorial layout on white (#ffffff) with near-black ink (#2d2d2d), a 132px bold wordmark headline, full-width #151515 feature cards with white text, square zero-radius buttons 48px tall, and a yellow (#f7e159), red (#fd6360) and blue (#46a5ff) brand palette." +colors: + canvas: "#ffffff" + page-largest: "#f2f2f2" + ink: "#2d2d2d" + primary: "#151515" + on-primary: "#ffffff" + surface-black: "#151515" + ink-muted: "#505050" + neutral-100: "#fafafa" + neutral-300: "#e0e0e0" + aalto-yellow: "#f7e159" + aalto-red: "#fd6360" + aalto-blue: "#46a5ff" +typography: + display: + fontFamily: inter, sans-serif + fontSize: 132px + fontWeight: 700 + lineHeight: 128px + letterSpacing: "-2px" + display-mobile: + fontFamily: inter, sans-serif + fontSize: 44px + fontWeight: 700 + lineHeight: 52px + letterSpacing: "-1px" + heading: + fontFamily: inter, sans-serif + fontSize: 32px + fontWeight: 700 + lineHeight: 40px + letterSpacing: "-0.48px" + subheading: + fontFamily: inter, sans-serif + fontSize: 20px + fontWeight: 700 + lineHeight: 24px + letterSpacing: "-0.1px" + body: + fontFamily: inter, sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 32px + button: + fontFamily: inter, sans-serif + fontSize: 18px + fontWeight: 700 + nav: + fontFamily: inter, sans-serif + fontSize: 16px + fontWeight: 700 + lineHeight: 18px +rounded: + none: 0px + xs: 1px + sm: 24px + md: 32px + pill: 9999px +spacing: + d1: 4px + d2: 8px + d3: 16px + d4: 24px + d5: 32px + d6: 40px + d7: 48px + d8: 56px + d9: 64px + d10: 80px + d11: 96px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.none}" + height: 48px + button-default: + textColor: "{colors.surface-black}" + typography: "{typography.button}" + rounded: "{rounded.none}" + height: 48px + borderColor: "{colors.surface-black}" + button-on-page: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.subheading}" + rounded: "{rounded.none}" + padding: 15px 40px + height: 80px + link: + textColor: "{colors.canvas}" + typography: "{typography.subheading}" + rounded: "{rounded.none}" + padding: 8px 0px 8px 24px + nav: + textColor: "{colors.ink}" + rounded: "{rounded.none}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + padding: 4px + footer: + textColor: "{colors.canvas}" + rounded: "{rounded.none}" + padding: 24px 40px +--- + +## Overview + +The capture of aalto.fi (title "Aalto-yliopisto", Finnish interface) opens with an unmistakable move: the university's name, "Aalto-yliopisto", set in Inter Bold at 132px with -2px tracking and a 128px line-height, filling almost the whole width under a slim utility bar. The utility bar carries a red square logo with a neon letter A, the campaign slogan "Merkki muutoksestA!", and small icon-plus-label links: Lahjoita (donate), Hae Aaltoon (apply), the language switch FI, Hae (search), Kirjaudu (sign in) and Valikko (menu). + +Below it the page is a stack of full-width feature cards, each a half text panel on near-black #151515 and a half photograph, alternating left and right. The photographs are saturated and expressive: green code projected across a hooded figure, a laughing woman in profile against a teal glow, a woman raising an arm in front of a wall of colourful letter-A tiles. Text on the black panels is white, with a bold headline, a short regular-weight paragraph, and underlined links prefixed with an arrow. Under the cards a "Kiinnostavia uutisia" (interesting news) heading sits beside an outlined "Lue kaikki yliopiston uutiset" button, followed by three news cards with a photo on top and a bold title on a #f2f2f2 grey panel. + +The voice is direct and plain: questions ("Mitä vaaroja siihen liittyy?"), short imperatives ("Lue lisää kampanjasta ja lahjoita!"), no decoration in the UI. All colour comes from photography and from the brand palette defined by the official brand library at https://brand.aalto.fi, which states that Aalto's brand colours are yellow, red and blue, used together with black and white. + +## Colors + +The page is organised by large flat areas. The largest background areas measured are #f2f2f2 (2,930 units), #ffffff (2,302) and #151515 (2,168); the white canvas is the page itself, while #f2f2f2 appears as the card grounds in the news band and #151515 as the feature cards. Ink is #2d2d2d (5,490 weighted characters), secondary text is #505050, and text on black is #ffffff. + +The brand library's colour page (https://brand.aalto.fi/en/brand/visual-guidelines/colours) publishes Aalto University Red #FD6360, Yellow #F7E159 and Blue #46A5FF, plus six school colours that may only be used for that school, and white and black. #f7e159 is also measured on the live page (599 units of background area), the only chromatic fill besides imagery. The design system's colour token page (https://brand.aalto.fi/en/ds/tokens/colours) lists a base palette of five groups (Aalto Brand, School, Neutral, Transparent, Tint) and notes that values should be used through tokens rather than by copying hex codes; its neutrals include #fafafa and #e0e0e0. The brand page advises white as the predominant background for clarity, black for drama, and brand colours as backgrounds only "sparsely and purposely". + +## Typography + +Inter is the only family in the measured page (8,178 weighted characters), at weights 400 and 700 only. The brand library's type page (https://brand.aalto.fi/en/brand/visual-guidelines/type) names Inter as the typeface for all media with Bold and Regular as the primary weights, Arial as a system substitute, and Besley as a complementary slab serif for publications with Georgia as its substitute. It specifies Inter Bold at tracking -25 for headlines and subheadlines, Inter Regular for intros and body, and -50 tracking for expressive headlines; it also asks for no upper case, no title-case headings and at most three sizes per surface. + +Measured on the homepage: display 132px/700 (128px line-height, -2px), mobile display 44px/700 (52px line-height, -1px), heading 32px/700 (-0.48px), subheading 20px/700 (-0.1px), body 18px/400 with 32px line-height, and navigation 16px/700. The design system's typography page lists the same scale as font-size tokens: 14, 16, 18, 20, 24, 32 and 64px, and letter-spacing tokens of 0, -1px and -2px. + +## Layout + +The design system's grid page (https://brand.aalto.fi/en/ds/tokens/grid) defines a 12-column layout grid from tablet upward and a 2-column grid on small phones, breakpoints at 320, 576, 768, 992 and 1616px, and a spacing scale of 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112 and 128px. Container padding references Dimension 3, 4, 6 and 6 (16, 24, 40 and 40px) across phone, tablet, desktop and XL, and gutters reference Dimensions 3, 3, 4 and 4 (16, 16, 24 and 24px). + +On the homepage, content sits in a container with about 30px margins at the 960px capture scale. Feature cards are edge-to-edge halves with no gutters between text and image; the three news cards are separated by narrow gutters. Padding values measured include 4px (28 uses), 40px (24), 24px (21) and 8px (18), with gaps of 16px and 24px. Aspect ratios for imagery follow the system's 16/9, 4/3 and 2.35/1 standards. + +## Elevation & Depth + +Depth is not used. The only shadow found is a transparent 1px ring (rgba(0, 0, 0, 0) 0px 0px 0px 1px) that is invisible. Separation comes from colour blocking: white, #f2f2f2 and #151515 areas butt against each other, and from 1px hairline rules under the link lists in the black cards. Overlay buttons for use on imagery are a documented Button variant. + +## Shapes + +The system is square. The measured buttons, links and navigation items have 0px radius. The only rounded values on the homepage are 32px (seven uses), 24px (one) and 1px (one); the design-system colour token page, measured, shows 24px (204 weighted uses) and 9999px radii on its own elements. Photographs are rectangular, edge to edge, with no rounded corners. Square geometry, large type and hard colour fields give the site a poster-like, architectural character. + +## Components + +The Aalto design system's Button component page (https://brand.aalto.fi/en/ds/components/button) documents Default, Primary, Icon, Overlay, Disabled and Button-with-icon variants. Measured on the official React Storybook (https://dx-react-components.aalto.fi) the Default button is transparent with #151515 text, a 1px #151515 border, 0px radius, 48px height and Inter 18px/700; the Primary button is filled #151515 with white text and the same 18px/700, 0px radius and 48px height. The guideline says a primary button indicates the main action and only one should appear per section or view. + +On the homepage the generated measurement found a white 80px-tall button with 15px 40px padding and #2d2d2d 20px/700 text (the "Lahjoita Aalto-yliopistolle" donate button), and an outlined 56px-tall "Katso kaikki tapahtumat" button with #151515 border. The "Lue kaikki yliopiston uutiset" button seen in the capture has a thin dark outline and bold centred label. Links inside black cards are white, bold, prefixed with an arrow icon and underlined. News cards are a photo above a #f2f2f2 text block with a bold title. + +## Design System Architecture + +Aalto University publishes its design system as part of the brand site at https://brand.aalto.fi/en/ds. The page describes it as documentation of all the digital resources, elements and instructions behind Aalto's digital services, built on atomic design: design tokens (colours, typography, grids and spacing, icons, motion), Components (for example Accordion, Avatar, Badge, Button, Checkbox, Chip, Dropdown, Link, Radio button, Search field, Tag, Text input), Modules (for example Breadcrumbs, Card, Date picker, Image tile), Sections and Templates. + +Developers consume it through npm packages in Aalto's private package registry: @aalto-dx/react-components, @aalto-dx/component-styles for non-React projects and @aalto-dx/react-starter, as described at https://brand.aalto.fi/en/ds/for-developers/resources, which also tells developers to import Inter from Google Fonts because the font is not bundled. Live components are shown in the public React Storybook at https://dx-react-components.aalto.fi. Designers and developers are pointed to a Teams community for questions and contributions. + +## Do's and Don'ts + +Do set the name and headlines in Inter Bold with negative tracking, left-aligned and ragged right. Do use white as the predominant background and #151515 for feature cards. Do keep corners square and buttons 48px tall. Do let expressive photography carry colour. Do use brand colours sparsely and only black text on them. + +Don't use upper case, or capitalise every word of a title (per the brand type page). Don't mix school colours. Don't use more than three type sizes on one surface. Don't put more than one primary button in a section. Don't use buttons as page links; the design system provides a Link component for that. + +## Responsive Behavior + +The design system defines breakpoints at 320px (phone portrait), 576px (phone landscape), 768px (tablet), 992px (desktop) and 1616px (XL), a 12-column grid from tablet up and a 2-column grid on phones. The measured mobile hero heading drops from 132px to 44px (52px line-height, -1px tracking). Container padding steps up from 16px on phones to 40px on desktop through the spacing tokens. The 50/50 text-image cards would be expected to stack at phone widths, but that stacking was not captured or verified here. + +## Iteration Guide + +Begin with a white page, #2d2d2d ink and Inter 400/700. Put the biggest possible Inter Bold headline at the top, then alternate #151515 half-cards with photographs. Use 0px radius, 48px buttons (#151515 primary, outlined default). Add colour only through photography or a single brand yellow, red or blue taken from the brand library. Before adding a value, find its token in https://brand.aalto.fi/en/ds/tokens. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aardvark-book-club/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aardvark-book-club/DESIGN.md new file mode 100644 index 0000000..c1d1aa3 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aardvark-book-club/DESIGN.md @@ -0,0 +1,199 @@ +--- +version: alpha +name: Aardvark Book Club +category: "Retail & E-commerce" +description: "Subscription book club for the USA and Canada, measured at aardvarkbookclub.com: white page, saturated yellow hero #ffd24a, magenta #ff008c membership button, black Champ 700 display headlines at 106.667px, Degular 600 body, tilted multicolour book cards and a handwritten script accent face." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#ff008c" + on-primary: "#ffffff" + pill-yellow: "#faed8f" + hero-yellow: "#ffd24a" + bright-pink: "#fd48f2" + violet: "#3b308f" + wine: "#670a2e" + text-input-text: "#333333" + card-slate: "#787b91" +typography: + display: + fontFamily: Champ, Arial, sans-serif + fontSize: 106.667px + fontWeight: 700 + lineHeight: 85.3333px + letterSpacing: "-1.06667px" + display-mobile: + fontFamily: Champ, Arial, sans-serif + fontSize: 50.4478px + fontWeight: 700 + lineHeight: 40.3582px + letterSpacing: "-0.504478px" + heading: + fontFamily: Champ, Arial, sans-serif + fontSize: 69.3333px + fontWeight: 700 + lineHeight: 55.4667px + letterSpacing: "-0.693333px" + subheading: + fontFamily: Champ, Arial, sans-serif + fontSize: 26.6667px + fontWeight: 700 + lineHeight: 23.4667px + body: + fontFamily: Degular, Arial, sans-serif + fontSize: 13.3333px + fontWeight: 600 + lineHeight: 16px + letterSpacing: "-0.266667px" + button: + fontFamily: Degular, Arial, sans-serif + fontSize: 16px + fontWeight: 600 + lineHeight: 19.2px + letterSpacing: "-0.106667px" + nav: + fontFamily: Degular, Arial, sans-serif + fontSize: 10.6667px + fontWeight: 600 + lineHeight: 20px + link: + fontFamily: Degular, Arial, sans-serif + fontSize: 13.3333px + fontWeight: 700 + lineHeight: 20px + letterSpacing: "-0.32px" + input: + fontFamily: Degular, Arial, sans-serif + fontSize: 16.6667px + fontWeight: 600 + lineHeight: 20px + letterSpacing: "-0.333333px" +rounded: + xs: 5.33px + sm: 10.67px + md: 16px + lg: 16.67px + xl: 17.33px + 2xl: 21.33px + 3xl: 48px + 4xl: 53.33px + none: 0px + pill: 9999px +spacing: + s1: 1.33px + s2: 2.67px + s3: 4.67px + s4: 5.33px + s5: 8px + s6: 8.67px + s7: 9.33px + s8: 10.67px + s9: 12px + s10: 13.33px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.none}" + button-secondary: + backgroundColor: "{colors.pill-yellow}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.none}" + height: 37px + link: + textColor: "{colors.canvas}" + typography: "{typography.link}" + rounded: "{rounded.none}" + transform: matrix(1, 0, 0, 1, 0, 0) + nav: + textColor: "{colors.ink}" + rounded: "{rounded.none}" + transform: matrix(1, 0, 0, 1, 0, 0) + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.text-input-text}" + typography: "{typography.input}" + padding: 16.6667px 17.7083px + height: 53px + card: + backgroundColor: "{colors.card-slate}" + textColor: "{colors.canvas}" + footer: + backgroundColor: "{colors.violet}" + textColor: "{colors.canvas}" + rounded: "{rounded.none}" + padding: 106.667px 0px 0px +--- + +## Overview +Aardvark Book Club is a subscription book club that ships to the USA and Canada (homepage title: "Aardvark Book Club - Unbox stories worth talking about"). Members choose up to 3 new hardcover books a month; the site also sells gift subscriptions, merch and an "Aardvark Exclusive" horror anthology. Navigation is All Books, Gifting, Merch, FAQ and Log-in / Sign-up, with Instagram and TikTok icon links and a link to a UK store. + +The capture is loud and colourful by design. A saturated yellow hero (`{colors.hero-yellow}`) with layered organic wave shapes in paler yellow and orange fills the first screen under a gigantic black headline "Unbox stories worth talking about". Below it, a white section titled "Our Oct books" carries a horizontal carousel of tilted book cards, each in its own colour (slate, lime, forest green, yellow, blue), and a pink rounded panel titled "How it works" holds four coloured step cards ("Step #1" to "Step #4") with line illustrations. Small handwritten annotations in a script face float beside headings ("Discover hidden gems and buzzy new releases", "Consider us your professional book curator"). The voice is playful: "Call us creatures of habit.", "We drop new books on the 1st of every month." + +## Colors +White `{colors.canvas}` (#ffffff) is the largest background area (13697 units), followed by `{colors.hero-yellow}` (#ffd24a), `{colors.bright-pink}` (#fd48f2), `{colors.pill-yellow}` (#faed8f), `{colors.violet}` (#3b308f), and pale cyan (#a4f6f8). Text is overwhelmingly `{colors.ink}` (#000000), then white on dark tiles, `{colors.violet}` (also the footer fill and handwritten annotation colour) and `{colors.wine}` (#670a2e). + +`{colors.primary}` (#ff008c) is the site's own "magenta" variable and the background of the Log-in / Sign-up button (measured on the mobile pass: white text on #ff008c). It is declared in the stylesheet as `--button-alt-color-background` and `--magenta`. The generator had picked the yellow nav pill (#faed8f, a region-switch and nav link button) as primary; that colour is kept as `{colors.pill-yellow}` and used for `button-secondary`. `{colors.card-slate}` (#787b91) is the Venus, Vanishing card colour from the capture. The root variables name a larger palette (periwinkle #9982de, orange #f9a220, green #2de124, cyan #1ce8ed, soft-pink #ffdbfd, wine #670a2e, olive #857521, soft-grey #f2f2f2 and more); they are listed in the extraction but only the tokens above are declared. + +## Typography +Three faces are loaded: Champ 700 (display and headings), Degular 600 and 700 (body, buttons, nav), and "Hello Organichand Webfont" 400 (handwritten annotations). Fallback is Arial / sans-serif. + +- `{typography.display}`: Champ 700 at 106.667px, line-height 85.3333px (0.8), letter-spacing -1.06667px. Mobile: 50.4478px / 40.3582px / -0.504478px. +- `{typography.heading}`: Champ 700 at 69.3333px / 55.4667px, -0.693333px. +- `{typography.subheading}`: Champ 700 at 26.6667px / 23.4667px, used for book titles. +- `{typography.body}`: Degular 600 at 13.3333px / 16px, -0.266667px. Mobile body is 15.5224px / 18.6269px. +- `{typography.button}`: Degular 600 at 16px / 19.2px, measured on the yellow nav pills. The pink mobile CTA is 19.403px at weight 700, line-height 29.1045px, -0.465672px tracking. +- `{typography.nav}`, `{typography.link}`, `{typography.input}`: Degular 600/700 at 10.6667px, 13.3333px and 16.6667px. + +All headings are tightly leaded and tightly tracked: the line-height is 0.8 of font size on display and heading. Font substitutes: Champ and Degular are commercial faces; use a heavy grotesque with tight tracking for headlines and a medium humanist sans for body, plus any casual script for annotations. This is a design suggestion, not a measurement. + +## Layout +Desktop width is 1280px with a page height of 11272px. The hero panel has large rounded lower corners (the radius table lists "0px 0px 21.3333px 21.3333px" seven times) and the headline is left-aligned in a 821px wide block while a handwritten note floats on the right. Sections are stacked full-width panels with generous vertical gaps. Spacing tokens are small (1.33px to 13.33px in the measured gap/padding set), reflecting an em-based system: the header height variable is 6.625em. The book carousel runs past the right edge, with round arrow buttons above it. + +## Elevation & Depth +Measured shadows are focus rings rather than elevation: `0 0 0 0.125em var(--button-color-focus)`, with a 0.25em white variant. There are no soft drop shadows. Depth comes from colour blocking, overlapping tilted cards and layered wave shapes in the hero. + +## Shapes +Radii are generous and varied: 5.33px (26 uses), 16px (24), 21.3333px (22), 10.6667px (13), 50% (8) for round icon buttons, 17.3333px, 48px and 53.3333px for large panels, and 9999px pill. The button-primary radius measured on the CTA wrapper is 0px; the capture shows an attached arrow segment. Book cards have rounded corners at the 16 to 21px scale. + +## Components +**Primary button** (`button-primary`): magenta `{colors.primary}` with white text. In the capture it is a two-part button: a label segment and a small arrow segment. Used for "Log-in / Sign-up now" and "Become a member". The mobile instance is 246px wide and 47px tall. + +**Secondary pill** (`button-secondary`): `{colors.pill-yellow}` fill, black text, 37px tall, used for nav items All Books, Gifting, Merch, FAQ and the "Shopping from the UK?" switch. + +**Text input**: white, #333333 text, 53px high, padding 16.6667px 17.7083px. + +**Book card**: tilted portrait card with a coloured background, a tag row (e.g. "Debut Novel", "Historical", "LGBTQIA+"), a title in Champ and a two-line blurb. + +**Footer**: `{colors.violet}` background, white text, top padding 106.667px. + +## Design System Architecture +Source: https://www.aardvarkbookclub.com/ (opened for this document). No brand guideline or design system is linked; the homepage footer links only Terms of Service and Privacy Policy plus designer and developer credits. The site is built on Webflow (the stylesheet references the webflow-icons font). The de-facto system is a set of CSS custom properties: named colours (`--yellow`, `--magenta`, `--violet`, `--wine`, `--cyan`, `--pale-pink`...), component variables (`--button-color`, `--button-alt-color-background`, `--button-social-color`, `--button-alt-height: 3.5em`), eased motion curves (`--ease-soft-bounce: cubic-bezier(0.34, 1.17, 0.64, 1)`, `--pop-up-ease-smooth`) and heading sizes in em (`--font-size-heading-xs: 1.875em`, `--font-size-handwritten-big: 2.5em`). Palette pairs exist as hard and soft versions for FAQ colour coding (`--faq-color-yellow` and `--faq-color-yellow-soft`). + +The practical consequence of this architecture is that a section's colour is a pairing of one named variable with its soft counterpart, so a new section can be built by choosing a pair (for example yellow with soft yellow, or cyan with soft cyan) rather than inventing a hex. Handwritten annotations use a dedicated size variable, which keeps them visually distinct from Degular body text. Because every button variable has a matching focus variable, the focus variables --button-color-focus, --button-alt-color-focus and --button-social-color-focus are all measured as #000. + +## Do's and Don'ts +- Do pair colour blocks: each section or card gets one saturated fill with black or violet text. +- Do set headlines very large, in Champ 700, with 0.8 line-height. +- Do use handwritten script annotations as margin notes, tilted slightly. +- Do use magenta `{colors.primary}` for the main membership action. +- Don't use soft shadows; use colour and overlap. +- Don't use the browser-default link blue #0000ee; it is a UA default, not a brand colour. +- Don't set body text in a light weight; Degular is measured at 600 and 700. + +## Responsive Behavior +Measured at 390px: h1 falls to 50.4478px, h2 to 38.806px, body text increases to 15.5224px, and the Log-in / Sign-up CTA is a 246px by 47px magenta button with 19.403px type. The h1 box is 359px wide. Breakpoint widths, carousel behaviour and menu collapse were not measured. + +## Iteration Guide +1. Set the page white and ink black; give each section one saturated fill from the palette above. +2. Headline: Champ 700, 106.667px desktop, 0.8 line-height, -1px tracking. +3. Primary action in `{colors.primary}` with white text; secondary pills in `{colors.pill-yellow}`. +4. Round big panels with the 21.3333px or larger radii and tilt cards. +5. Add script notes in violet with the handwritten face. +6. Dark mode, hover states and tablet widths are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/abbott/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/abbott/DESIGN.md new file mode 100644 index 0000000..aefcc51 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/abbott/DESIGN.md @@ -0,0 +1,131 @@ +--- +version: alpha +name: Abbott +category: "Pharma" +description: "Global healthcare company homepage measured at abbott.com/en-us/homepage: deep navy #000075 canvas, periwinkle #97a3f5 hero, pale lavender #d6dbfc cards and buttons, Wallace Serif 400 headings at 64px with -1px tracking, Wallace Sans body 16px and 4px radii." +colors: + canvas: "#000075" + ink: "#d6dbfc" + page-largest: "#000075" + primary: "#d6dbfc" + on-primary: "#000075" + surface-hero: "#97a3f5" + on-dark: "#ffffff" +typography: + display: + fontFamily: "\"Wallace Serif\", \"Book Antiqua\"" + fontSize: 64px + fontWeight: 400 + letterSpacing: "-1px" + subheading: + fontFamily: "\"Wallace Serif\", \"Book Antiqua\"" + fontSize: 25px + fontWeight: 400 + lineHeight: 31.25px + body: + fontFamily: "\"Wallace Sans\", \"Aptos Sans\"" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + button: + fontFamily: "\"Wallace Sans\", \"Aptos Sans\"" + fontSize: 13px + fontWeight: 400 + lineHeight: 16.25px + letterSpacing: 2px + textTransform: uppercase +rounded: + xs: 4px +spacing: + s1: 8px + s2: 11px + s3: 12px + s4: 15px + s5: 16px + s6: 24px + s7: 32px + s8: 40px + s9: 48px + s10: 56px +components: + button-primary: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 0px 16px + height: 44px + borderColor: "{colors.canvas}" + button-secondary: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 0px 16px + height: 44px + borderColor: "{colors.canvas}" +--- + +## Overview +Abbott's US home page (title "Abbott | Life-Changing Healthcare Technologies", lang en-US) presents a global healthcare company whose navigation groups Products and Solutions (Biowearables, Cancer, Cardiovascular, Diabetes, Diagnostics Testing, Medicines, Nutrition, Pain and Movement) and "Need Help?" (Where to Buy, Contact Us, Partners, Global Locations, Site Map). The footer carries social icons and a legal notice. + +The capture is unusual for healthcare: instead of white and clinical blue, the page is a deep navy (`{colors.canvas}`, #000075) with a periwinkle hero (`{colors.surface-hero}`, #97a3f5) containing the greeting "Hello, welcome to Abbott" and a search field with the italic prompt "How can I help you?". Below it, a mosaic of rounded cards in pale lavender (`{colors.ink}` #d6dbfc), periwinkle and a strong royal blue shows news, press-release, community, careers and products stories. Each card carries a small uppercase tracked label ("NEWSROOM", "PRESS RELEASE", "COMMUNITY", "CAREERS", "ABOUT ABBOTT"), a serif or sans headline and an outline arrow at the bottom. Photography is human and warm (a blood donor, a hand holding a sensor, a woman holding a bowl, a phone showing glucose readings on purple fabric). + +## Colors +Measured text colours are `{colors.canvas}` navy #000075 (1004 weight), pale `{colors.ink}` #d6dbfc (863) and `{colors.on-dark}` white (207). Background areas are navy (5969), `{colors.surface-hero}` (1024), pale lavender #d6dbfc (675), light grey #f2f2f2 and dark grey #333333 (332 each, used in the footer/safety area). The generator assigned `{colors.primary}` as the pale lavender fill of the "PRODUCTS MADE BY ABBOTT" button with `{colors.on-primary}` navy text and a 1px solid navy border, and that is the only measured button treatment. + +The site's own root variables also publish status colours: `--st-error-main` #D81842, `--st-success-dark` #124f00, `--st-warning-medium` #ffde8f, `--st-info-contrastOnLight` #344042, a system focus ring `--st-systemFocusRing-primary` #0D19FB and a grey #6e6e6e. They are listed in the extraction; only the colours above are declared as tokens. Bootstrap's default focus shadow `0 0 0 .25rem rgba(13,110,253,.25)` appears in the stylesheet and is a framework default, not an Abbott colour. + +## Typography +Abbott uses its own Wallace families: Wallace Serif (weights 300 and 400, with 400 italic) for headings, with fallback Book Antiqua, and Wallace Sans (400, 700) for body and controls, with fallback Aptos Sans. The CSS variables name the roles `--fontFamily-heading` and `--fontFamily-nonHeading`. + +- `{typography.display}`: Wallace Serif 400 at 64px, letter-spacing -1px. The 64px size is a measured rendered size (70 characters) and matches `--desktop-displayLRegular-font-size`; `--desktop-displayXLRegular-font-size` is 81px, and the page also renders 40px and 32px headings. Line-height for display is not declared because only a percentage variable exists on mobile (105%). +- `{typography.subheading}`: Wallace Serif 400 at 25px, line-height 31.25px, on the "Important safety information" heading. +- `{typography.body}`: Wallace Sans 400 at 16px, line-height 24px. +- `{typography.button}`: Wallace Sans 400 at 13px, line-height 16.25px, uppercase, 2px letter-spacing. + +The body role reports 40px at -1px tracking in Wallace Serif for the page root. Labels in cards use uppercase small Wallace Sans with wide tracking. Font substitutes: Wallace is proprietary; a transitional serif such as Book Antiqua (the site's own fallback) for headings and Aptos Sans for body, as the site declares. + +## Layout +Desktop width is 1280px, page height 4030px. The content sits in a column of about 1140px (the "Important safety information" heading box measures 1140px wide). The mosaic is a card grid of mixed spans: one large 2-row card, narrow tall cards, and a wide card at the lower right. Spacing tokens measured in gaps and paddings are 8, 11, 12, 15, 16, 24, 32, 40, 48 and 56px, from `{spacing.s1}` to `{spacing.s10}`. Density is moderate with generous navy gutters between cards. + +## Elevation & Depth +The extraction records no drop shadows on the design roles; shadow values found are focus rings (Bootstrap's default and an inset header-nav focus ring). Depth comes from stacking pale cards on a dark navy field. Do not add shadows. + +## Shapes +The CSS corpus radii include 4px (9 uses), 1px, 2px, 3px, 8px, 10px, 16px, 20px and 999px. The root variables define `--abbottRadius-small` as 4px, medium 6px, large 8px and extraLarge with 12px on selected corners, and the card frequency shows asymmetric corner values "0px 12px 0px 0px". The button uses `{rounded.xs}` (4px). + +## Components +**Button** (`button-primary`, `button-secondary`): pale lavender `{colors.ink}` fill, navy text `{colors.canvas}`, 1px navy border, 4px radius, 44px tall, padding 0px 16px, 13px uppercase text at 2px tracking; 260px wide for "PRODUCTS MADE BY ABBOTT". "HOW TO CONTACT ABBOTT" shares the same treatment. + +**Story card**: rounded rectangle in lavender, periwinkle, royal blue or navy, with a tracked uppercase category label, a 20px-class headline, and an outline arrow aligned bottom-left. + +**Search field**: bottom-ruled field with italic placeholder on the periwinkle hero, magnifier icon at the right. + +**Header**: logo at the left, a globe icon and menu icon at the right. + +## Design System Architecture +The homepage that was opened (https://www.abbott.com/en-us/homepage) links no brand guideline, press kit or design system. The shipped CSS shows a tokenised system with roughly 400 root variables: responsive type scales named by device and role (`--desktop-displayXLRegular-font-size: 81px`, `--tablet-displayXLRegular-font-size: 64px`, `--mobile-displayXLRegular-font-size: 51px`, `--desktop-buttonMd-font-weight: 700`, `--desktop-titleMLight-font-weight: 300`), radius tokens (`--abbottRadius-*`), status colours prefixed `--st-` and dimension tokens (`--dimension-16: 16px`). The site also includes Bootstrap variables (`--bs-btn-focus-box-shadow`), so Bootstrap sits beneath the Abbott layer. + +The token naming in the shipped CSS shows how the system is organised: a type style is a combination of device, role, size name and weight (for example displayXL, displayL, titleM, buttonMd, preheaderL, with Light, Regular or Bold suffixes), each with its own font-family, size, weight, line-height and letter-spacing variable. Preheader styles, such as `--tablet-preheaderMBold-font-size: 25px` and `--tablet-preheaderLLight-font-size: 32px`, correspond to the short label lines above headlines. A designer extending the page should select a named style and a device, rather than inventing a size. + +Interaction states other than the focus rings were not recorded: the hover probe returned no entries for this page, so no hover colours are declared. The card mosaic shows four distinct fills in the capture, and each pairs with a single text colour from the measured set, so the combinations navy on lavender, navy on periwinkle, white on royal blue and pale lavender on navy are the only ones evidenced. + +## Do's and Don'ts +- Do use navy `{colors.canvas}` as the dark field and pale lavender `{colors.ink}` for cards. +- Do set headlines in Wallace Serif with -1px tracking and label cards with tracked uppercase Wallace Sans. +- Do pair every card with an outline arrow. +- Do use real human photography. +- Don't use Bootstrap blue (#0d6efd) as a brand colour; it is a framework default. +- Don't add shadows to cards. +- Don't use bold weights for headings; the display and subheading are weight 400. + +## Responsive Behavior +Measured on the 390px pass: body text stays 16px with 24px line-height (box width 294px) and the "PRODUCTS MADE BY ABBOTT" button stays 13px and 260px wide, 44px tall. The mobile pass found no h1 or h2. The stylesheet publishes mobile display sizes (`--mobile-displayXLRegular-font-size: 51px`, `--mobile-displayLRegular-font-size: 40px`, line-height 105%), but where they apply on the page was not measured. Navigation collapse and card reflow were not measured. + +## Iteration Guide +1. Navy canvas `{colors.canvas}`, periwinkle hero `{colors.surface-hero}`, pale lavender cards `{colors.ink}`. +2. Headlines in Wallace Serif 400 with -1px tracking; body Wallace Sans 16px/24px. +3. Buttons: 44px high, 4px radius, 1px navy border, 13px uppercase, 2px tracking. +4. Mix card spans in a grid with large and narrow tiles; end each card with an outline arrow. +5. Dark mode, hover and focus beyond the system ring variables are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/abbvie/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/abbvie/DESIGN.md new file mode 100644 index 0000000..3718c4c --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/abbvie/DESIGN.md @@ -0,0 +1,148 @@ +--- +version: alpha +name: AbbVie +category: "Pharma" +description: "Pharmaceutical company homepage measured at abbvie.com: white canvas, deep navy ink #071d49, vivid blue #0066f5 links, purple #8a2ecc headline emphasis, F37 Lineca Medium 800 display at 64px, Roboto body, large single-corner 40px and 80px radii and outlined white buttons on photography." +colors: + canvas: "#ffffff" + ink: "#071d49" + primary: "#0066f5" + surface-subtle: "#fafafa" + black: "#000000" + ink-muted: "#666b7a" + accent-purple: "#8a2ecc" + link: "#035fe6" +typography: + display: + fontFamily: "\"F37 Lineca Medium\", Helvetica, Arial, sans-serif" + fontSize: 64px + fontWeight: 800 + lineHeight: 68px + letterSpacing: "-0.2px" + display-mobile: + fontFamily: "\"F37 Lineca Medium\", Helvetica, Arial, sans-serif" + fontSize: 30px + fontWeight: 800 + lineHeight: 34px + subheading: + fontFamily: "\"F37 Lineca Book\", Helvetica, Arial, sans-serif" + fontSize: 40px + fontWeight: 650 + lineHeight: 44px + body: + fontFamily: "\"Roboto Regular\", Helvetica, Arial, sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 24px + nav: + fontFamily: "\"Roboto Regular\", Helvetica, Arial, sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 24px + button-secondary: + fontFamily: "\"Roboto Bold\", Helvetica, Arial, sans-serif" + fontSize: 14px + fontWeight: 700 + lineHeight: 20px + letterSpacing: 0.84px + textTransform: uppercase +rounded: + xs: 40px + sm: 80px + pill: 9999px +spacing: + s1: 2px + s2: 3.13px + s3: 4px + s4: 5px + s5: 7.5px + s6: 8px + s7: 10px + s8: 12px + s9: 14px + s10: 15px +components: + button-secondary: + textColor: "{colors.canvas}" + typography: "{typography.button-secondary}" + padding: 16px 40px + height: 54px + borderColor: "{colors.canvas}" + link: + textColor: "{colors.link}" + typography: "{typography.nav}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + nav-link: + textColor: "{colors.link}" + typography: "{typography.nav}" + footer: + textColor: "{colors.ink}" +--- + +## Overview +AbbVie's home page (title "Pharmaceutical Research & Development | AbbVie", lang en) uses a human-story voice for a pharmaceutical company. The header carries the lowercase "abbvie" wordmark, the links Who We Are, Science, Patients, Join Us and Sustainability, and utility items More, Global and a search icon. The hero is a dark navy photographic panel with a rounded top-left corner holding a portrait of a person with Parkinson's disease, a caption ("Steve, Real person with Parkinson's disease"), the white headline "Behind every breakthrough is a person." and a small uppercase blue link "EXPLORE THE STORIES". A white news carousel card overlaps the hero's lower edge and shows press-release and article teasers with "READ ARTICLE" links and a "10 Minute Read" clock label, with dot pagination below. + +Below the hero, section headlines mix navy with a purple emphasis: "Patients are at the heart of **everything we do.**" and "We solve the **tough challenges.**", where the highlighted words are `{colors.accent-purple}` (#8a2ecc). A full-width navy-tinted video panel ("Meet the people inspiring the medicines we make.") contains a centred outlined "WATCH 0:15" button. A cookie banner sits in the first capture screen; it is a consent control and is not documented as brand UI. + +## Colors +Text is `{colors.ink}` (#071d49, a deep navy) at 4357 character weight, white at 1707 on dark panels, `{colors.primary}` (#0066f5, a vivid blue, 188), `{colors.ink-muted}` (#666b7a, 157, used for article dates and summaries), `{colors.accent-purple}` (#8a2ecc, 34), black (32) and the link blue `{colors.link}` (#035fe6, 20). Page backgrounds are white `{colors.canvas}` (1346), `{colors.surface-subtle}` (#fafafa, 845), `{colors.black}` (770), pale blue-lilac #f1f3ff (697), navy (412), #f4f4f4 (391) and the dark banner #212121 (184). + +The site's own variables name the palette: `--corp-color-text-default` #071d49, `--color-accent-blue` #0066f5, `--corp-color-link-default` #035fe6, `--corp-color-link-hover` #136ff6, `--color-purple-primary` #8a2ecc, `--color-purple-light` #a86bde, `--color-blue-light` #a6b5e0, `--color-orange-dark` #cf451c, `--color-orange-light` #f7634f, `--color-accent-green` #338700, `--color-outline-focus` #0bf and form colours such as `--corp-form-primary-color` #7c3098. Hover on the "EXPLORE THE STORIES" link was measured: its colour changes from rgb(71, 159, 248) to rgb(166, 181, 224) with a matching border colour change. Article-teaser links measured a border colour change from rgb(3, 95, 230) to rgb(19, 111, 246). + +## Typography +AbbVie loads F37 Lineca Book (weight 650) and F37 Lineca Medium (weight 800) for headings, and Roboto Regular (400), Roboto Bold (700) and Roboto Light (300) for body and controls, plus an "Abbvie Icon" icon font. Fallback is Helvetica, Arial, sans-serif. + +- `{typography.display}`: F37 Lineca Medium 800 at 64px / 68px, letter-spacing -0.2px (the white hero headline). Mobile: 30px / 34px. +- `{typography.subheading}`: F37 Lineca Book 650 at 40px / 44px, navy. +- `{typography.body}`: Roboto Regular 400 at 20px / 24px. Mobile body text is 14px / 20px. +- `{typography.nav}`: Roboto Regular 400 at 18px / 24px. +- `{typography.button-secondary}`: Roboto Bold 700 at 14px / 20px, uppercase, 0.84px tracking. + +Font substitutes: F37 Lineca is a commercial geometric sans; Helvetica or Arial is the site's own fallback and any geometric sans with a heavy weight would be a substitute (a suggestion, not a measurement). + +## Layout +Desktop width is 1280px with a page height of 8385px. Header height uses a `--nav-height` variable and the hero overlaps the next section (`--hero-overlap: -11.2rem`). Content uses a two-column pattern: a large headline at the left and a paragraph with a small uppercase link at the right. Spacing variables use rem steps (`--corp-gap-xl: 2.4rem`, `--corp-spacing-*` from tens to hundreds of rem tenths). The measured gap and padding set starts at 2px, 3.13px, 4px, 5px, 7.5px, 8px, 10px, 12px, 14px and 15px. + +## Elevation & Depth +Shadows in the stylesheet: `0px 2px 10px -3px #999`, `0px 0px 12px 2px #c7c5c7`, `-3px -3px 5px -2px #c7c5c7` and `0 0 18px rgba(0,0,0,.2)`. The carousel card that overlaps the hero reads as raised through overlap and white-on-dark contrast. The role-level boxShadow for body, headline and text is none. + +## Shapes +The hero panel and video panel use large single-corner radii: the radius frequency lists "80px 0px 0px" (3 uses) and "40px 0px 0px" (2 uses), exposed as `{rounded.xs}` (40px) and `{rounded.sm}` (80px). Round controls use 50% (4 uses). Small interface elements use 2px and 3px. The pill `{rounded.pill}` is 9999px. + +## Components +**Outlined secondary button** (`button-secondary`): transparent over a dark photograph, white text and 1px-style white border `{colors.canvas}`, 54px tall, padding 16px 40px, Roboto Bold 14px uppercase tracked 0.84px. The example is "WATCH 0:15" with a play icon. + +**Text link with arrow**: uppercase small blue label such as "EXPLORE OUR STORIES" with a chevron; colour `{colors.primary}`, on dark panels a lighter blue. + +**News carousel card**: white card, date label, headline in Roboto, "READ ARTICLE" link and read-time label, prev/next chevrons and three dots. + +**Navigation**: white bar, navy `{colors.ink}` text in `{typography.nav}`, 72px high on mobile. + +## Design System Architecture +The homepage could not be fetched for this document (see _toolErrors in SOURCES.json), so no brand guideline link was seen. The shipped CSS shows a "corp" token system: `--corp-typography-lineheight-display-base: 6rem`, `--corp-typography-lineheight-body-lg: 2.4rem`, `--corp-font-weight-medium: 500`, `--corp-font-weight-bold: 700`, `--corp-typography-letterspacing-tight-em-sm: -0.02em`, `--corp-focus-visible-outline-offset-md: 0.2rem`, and semantic names (`--surface-background-default`, `--corp-color-text-default`, `--color-surface-highlight-inverse`). Fonts are exposed as `--heading-font-family`, `--heading-font-family-bold`, `--body-font-family` and `--roboto-bold-font-family`. Source: the measured extraction of https://www.abbvie.com/. + +A note on imagery and tone: the photography shows individual patients and scientists, lit dramatically against navy backgrounds, and the copy is written in plain first-person-plural statements ("We solve the tough challenges.", "Meet the people inspiring the medicines we make."). Captions identify a person by first name and condition. Dates in teasers are uppercase ("OCTOBER 14, 2026"), set in the muted grey, above a headline. Every teaser is a link and the whole 200px-high teaser block was measured as a link, whose border colour shifts on hover from #035fe6 to #136ff6 while text colour stays #666b7a. + +The layout keeps a strong rhythm: a dark hero, a white teaser strip, a white statement section with an asymmetric two-column split, a full-bleed video panel inset from the page edges, and then another statement section. Each section is introduced by either an uppercase tracked kicker such as "SCIENCE & INNOVATION" or a large headline. + +## Do's and Don'ts +- Do use deep navy `{colors.ink}` for text and `{colors.primary}` for small link accents. +- Do emphasise two or three words of a headline in `{colors.accent-purple}`. +- Do round one corner of large photographic panels with the 40px or 80px radius. +- Do keep article metadata in `{colors.ink-muted}`. +- Don't fill buttons; secondary actions are outlined on dark imagery. +- Don't document the cookie banner as a component. +- Don't use bold body copy; headings carry the weight. + +## Responsive Behavior +Measured at 390px: the h1 falls from 64px to 30px (line-height 34px, box 350px wide), body text from 20px to 14px (line-height 20px, box 310px) and the header is 72px tall at 390px wide with 16px nav text. No mobile CTA was detected. Navigation collapse and carousel behaviour were not measured. + +## Iteration Guide +1. White canvas, navy text `{colors.ink}`, blue accent `{colors.primary}`. +2. Hero: dark navy photograph with one large rounded corner, 64px F37 Lineca Medium headline in white. +3. Section headlines at 40px with purple emphasis words. +4. Outlined white buttons on imagery, 54px high, 14px uppercase. +5. Teasers: grey dates and navy headlines with a blue uppercase link. +6. Dark mode, tablet breakpoints and form states are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ableton/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ableton/DESIGN.md new file mode 100644 index 0000000..b34a2ae --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ableton/DESIGN.md @@ -0,0 +1,466 @@ +--- +version: alpha +name: Ableton +category: "Music & Audio" +description: "Ableton's site is a flat, square-cornered editorial grid set entirely in futura-pt (Futura PT, ParaType) at weights 400 and 700 — black #000000 type on a white #ffffff canvas, one pure electric blue #0000ff for every link and buy button, a light grey #eeeeee (\"dolphin\") for inputs and bands, and saturated category swatches like tiffany #00d2be and salmon #ff8389. Every radius is 0px." + +colors: + primary: "#0000ff" + on-primary: "#ffffff" + canvas: "#ffffff" + body-gutter: "#f3f3f3" + ink: "#000000" + dolphin: "#eeeeee" + disabled-text: "#666666" + placeholder: "#999999" + error: "#ed0000" + focus-glow: "#0000ff80" + tiffany: "#00d2be" + salmon: "#ff8389" + lemonade: "#fbffa7" + live12-periwinkle: "#92a7ff" + live12-teal-lighter: "#8efbd8" + live12-suite: "#22242c" + desert: "#d34312" + +typography: + display-product: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 90px + fontWeight: 700 + lineHeight: 108px + display-hero: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 60px + fontWeight: 700 + lineHeight: 66px + heading-section: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 40px + fontWeight: 700 + lineHeight: 48px + heading-teaser: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 30px + fontWeight: 700 + lineHeight: 42px + link-large: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 24px + fontWeight: 700 + lineHeight: 36px + title-card: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 20px + fontWeight: 700 + lineHeight: 30px + body-large: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 20px + fontWeight: 400 + lineHeight: 30px + body: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + nav-link: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 16px + fontWeight: 700 + lineHeight: 24px + small-bold: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 14px + fontWeight: 700 + lineHeight: 21px + small: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + mobile-h1: + fontFamily: 'futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + fontSize: 20px + fontWeight: 700 + lineHeight: 30px + +rounded: + none: 0px + +spacing: + 2xs: 5px + xs: 10px + s: 20px + m: 30px + l: 40px + xl: 60px + 2xl: 80px + 3xl: 100px + 4xl: 120px + grid-unit: 106.667px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.title-card}" + rounded: "{rounded.none}" + padding: 7px 30px + height: 42px + button-buy: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.title-card}" + rounded: "{rounded.none}" + padding: 6.5px 30px + border: 2px solid transparent + button-scroll: + backgroundColor: "{colors.primary}" + textColor: "{colors.ink}" + rounded: "{rounded.none}" + width: 60px + height: 60px + link-nav-cta: + textColor: "{colors.primary}" + typography: "{typography.title-card}" + link-filter: + textColor: "{colors.primary}" + typography: "{typography.link-large}" + link-teaser-cta: + textColor: "{colors.ink}" + typography: "{typography.title-card}" + textDecoration: underline + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.nav-link}" + padding: 20px 0px 0px + height: 69px + promo-strip: + backgroundColor: "{colors.ink}" + textColor: "{colors.on-primary}" + typography: "{typography.title-card}" + padding: 20px 106.667px + height: 70px + tag-category: + backgroundColor: "{colors.tiffany}" + textColor: "{colors.ink}" + typography: "{typography.small-bold}" + rounded: "{rounded.none}" + padding: 1.96px 11.9px + height: 25px + tag-category-downloads: + backgroundColor: "{colors.salmon}" + text-input: + backgroundColor: "{colors.dolphin}" + textColor: "{colors.ink}" + typography: "{typography.body-large}" + rounded: "{rounded.none}" + padding: 8px 15px + height: 42px + select: + backgroundColor: "{colors.dolphin}" + textColor: "{colors.ink}" + typography: "{typography.small-bold}" + rounded: "{rounded.none}" + padding: 4.9px 50px 4.9px 10.5px + height: 30px + card-blog-teaser: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.title-card}" + rounded: "{rounded.none}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.body-large}" + footer-secondary-link: + textColor: "{colors.ink}" + typography: "{typography.small-bold}" +--- + +## Overview + +Ableton's website looks like a printed music magazine laid on a strict grid. The capture of `https://www.ableton.com/en/` opens with a +collage of rectangular teasers that overlap each other: a large dark product photograph with a 60px white headline, a lemon-and-cyan +striped graphic panel carrying a black 30px headline, and a smaller photo tile offset below them. Nothing is rounded, nothing casts a +shadow, nothing is outlined. Depth comes only from rectangles overlapping and from colour. + +Everything is set in one family: **futura-pt** (Futura PT), loaded in two styles only — `futura-pt normal normal` and +`futura-pt bold normal` (the extractor's `loadedFonts`). Futura's geometric circles, sharp apexes and tall ascenders are the brand's +whole typographic voice. Headings are bold 700; reading text sits at 400. + +Colour is reduced to a clear hierarchy: + +- **Black `#000000`** (`{colors.ink}`) is the text colour for 1,178 of 1,466 measured characters on the homepage. +- **White `#ffffff`** (`{colors.canvas}`) is the visible page. The main wrapper `div.main` paints `#ffffff`; the `body` beneath it is `#f3f3f3` (`{colors.body-gutter}`), which you only see outside the wrapper. +- **Electric blue `#0000ff`** (`{colors.primary}`, the CSS keyword `blue` in Ableton's stylesheet) is the only interactive colour: nav "Try Live 12 for free", the blog filter links, the 60×60 scroll-down square, "Add to cart", and "Sign up". +- **Dolphin grey `#eeeeee`** (`{colors.dolphin}`, named `.abl-cl-dolphin` in the CSS) fills inputs, selects, image placeholders and the "More:" band at the bottom of the homepage. +- A big library of **named swatches** (tiffany, salmon, lemonade, periwinkle and many more) colours category tags and campaign art. It never colours buttons. + +**Key characteristics** + +- Square corners everywhere: the only radius in the whole stylesheet corpus is a single `2px`. Every measured button, input, select, tag and image is `0px`. +- One typeface, two weights, sizes on a short ladder: 90 / 60 / 40 / 30 / 24 / 20 / 16 / 14px. +- One action colour, pure RGB blue `#0000ff`, used for links and filled buttons alike. Link text is not underlined; teaser CTAs are underlined spans with an arrow (`has-arrow is-underlined`). +- Layout runs on a viewport-relative 12-column unit: `.abl-ph-1u` = `8.33333vw` (106.667px at 1280px). That is why paddings like `106.667px`, `53.3334px` and `26.6666px` show up in the measurements. +- Saturated, flat colour fields (lemon `#fbffa7`, teal `#8efbd8`, periwinkle `#92a7ff`) sit right next to warm photographs of musicians in their studios. + +## Colors + +> Source: `web/data/extracted/ableton.json` (homepage) plus `ableton--shop.json` (`/en/shop/live/`), and the named classes in +> Ableton's production stylesheet +> ([output.a8652eafb45a.css](https://cdn-resources.ableton.com/80bA26cPQ1hEJDFjpUKntxfqdmG3ZykO/static/CACHE/css/output.a8652eafb45a.css)). + +### Action +- **Blue** (`{colors.primary}` — `#0000ff`): CSS classes `.abl-cl-blue`, `.abl-cl-link`, `.abl-bg-blue` and `.abl-cl-form-focus` all resolve to `blue`. It is the second most-read text colour on the homepage (139 chars) and the fill of every filled button measured. +- **On Primary** (`{colors.on-primary}` — `#ffffff`): label colour on blue buttons ("Add to cart", "Sign up") and on the black promo strip. +- **Focus Glow** (`{colors.focus-glow}` — `#0000ff80`): `.abl-cl-form-focus-glow` = `rgba(0,0,255,0.5)`. The corpus includes the shadow `0 0 .1875rem rgba(0,0,255,0.5)` (a 3px blue glow). + +### Surface +- **Canvas** (`{colors.canvas}` — `#ffffff`): the main wrapper, the footer, and most of the capture. +- **Body Gutter** (`{colors.body-gutter}` — `#f3f3f3`): computed `body` background, hidden under the white wrapper at desktop widths. +- **Dolphin** (`{colors.dolphin}` — `#eeeeee`): inputs, selects, the `blog-teaser__media` placeholder behind lazy-loaded images, and the full-width "More:" filter band. +- **Live 12 Suite** (`{colors.live12-suite}` — `#22242c`): dark panel behind the Suite edition on the shop page (`.abl-cl-live12-suite`). + +### Text +- **Ink** (`{colors.ink}` — `#000000`): all headings, body and nav text. +- **Disabled Text** (`{colors.disabled-text}` — `#666666`): `.abl-cl-disabled-text`. +- **Placeholder** (`{colors.placeholder}` — `#999999`): `.abl-cl-form-placeholder`. +- **Error** (`{colors.error}` — `#ed0000`): `.abl-cl-error`. +- **Desert** (`{colors.desert}` — `#d34312`): a warm orange-red that appears as small text on the shop page (8 chars measured; `.abl-cl-desert`). + +### Category & campaign swatches +Ableton names its colours after things rather than roles. Each one below was measured on a live page: +- **Tiffany** (`{colors.tiffany}` — `#00d2be`): "Tutorials" category tag. +- **Salmon** (`{colors.salmon}` — `#ff8389`): "Downloads" category tag. +- **Lemonade** (`{colors.lemonade}` — `#fbffa7`): shop edition panel fill. +- **Live 12 Periwinkle** (`{colors.live12-periwinkle}` — `#92a7ff`) and **Live 12 Teal Lighter** (`{colors.live12-teal-lighter}` — `#8efbd8`): edition panels on `/en/shop/live/`. + +The stylesheet holds many more named swatches that are not tokenised here because no measured element used them on the pages +sampled, for example `.abl-cl-cobalt` `#4200ff`, `.abl-cl-flamingo` `#ff00c2`, `.abl-cl-goldfish` `#fed134`, `.abl-cl-acid-yellow` `#e1ff8a`. + +## Typography + +### Font Family +**futura-pt** is the only family on the site (1,466 of 1,466 measured characters on the homepage, 3,160 of 3,160 on the shop page). +The served stack is `futura-pt, Avenir, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif`. +Only two faces load: regular (400) and bold (700). The corpus also lists `Monaco` for code samples. + +Futura PT is published by ParaType on Adobe Fonts (designers listed: Paul Renner, Vladimir Yefimov, Isabella Chaeva, Vladimir Andrich — +[fonts.adobe.com/fonts/futura-pt](https://fonts.adobe.com/fonts/futura-pt)). + +### Hierarchy + +| Token | Size | Weight | Line Height | Where measured | +|---|---|---|---|---| +| `{typography.display-product}` | 90px | 700 | 108px | "Live" h1 on `/en/shop/live/` | +| `{typography.display-hero}` | 60px | 700 | 66px | Homepage h1 "Live 12.4 is out now…" | +| `{typography.heading-section}` | 40px | 700 | 48px | h2 "The latest from Ableton" | +| `{typography.heading-teaser}` | 30px | 700 | 42px | Secondary teaser headlines ("Spread the cost of Live 12 Suite…") | +| `{typography.link-large}` | 24px | 700 | 36px | "See what's new", blog filter links ("All posts", "News"…) | +| `{typography.title-card}` | 20px | 700 | 30px | Blog teaser headlines, teaser CTAs, footer h3, button labels | +| `{typography.body-large}` | 20px | 400 | 30px | Footer link lists, newsletter label, input text | +| `{typography.body}` | 16px | 400 | 24px | Body default (computed on `body`) | +| `{typography.nav-link}` | 16px | 700 | 24px | Header nav "Live / Push / Move / Note…", "Log in or register" | +| `{typography.small-bold}` | 14px | 700 | 21px | Category tags, footer secondary links, selects | +| `{typography.small}` | 14px | 400 | 21px | Mobile teaser body text | +| `{typography.mobile-h1}` | 20px | 700 | 30px | Homepage h1 at 390px wide | + +Letter-spacing is `normal` on every measured element; no letter-spacing table entries were recorded. Text-transform is `none`, so there +are no all-caps labels. + +### Principles +- **Bold carries the voice.** 1,112 of 1,466 homepage characters are 700. Headlines, card titles, nav links and CTAs are all bold; only long reading text and footer link lists drop to 400. +- **20px is the working size.** It is the most-used size on the homepage (761 chars) and on the shop page. Card titles, footer copy, button labels and input values all sit at 20px. +- **Line heights are 1.1–1.5×.** 60/66 (1.1), 40/48 (1.2), 30/42 (1.4), 24/36, 20/30, 16/24, 14/21 (1.5). The stylesheet declares a ladder of `--abl-line-height` values (1.1, 1.111, 1.125, 1.167, 1.2 … 1.5, 1.637). +- **No tracking tricks.** Futura's own spacing is left alone. + +### Note on Font Substitutes +Futura PT is a commercial ParaType font served through Adobe Fonts. If you cannot license it, the site's own fallback is **Avenir**, then +system fonts. Any substitute should be a geometric sans with circular bowls and pointed apexes; check the 60px headline and the 14px tag +text, because those show the differences most clearly. This file does not name an open-source equivalent, because no Ableton source +recommends one. + +## Layout + +### Spacing System +Ableton declares its spacing as CSS custom properties on `:root` (measured in `rootVars` at 1280px wide): + +| Token | CSS variable | Value | +|---|---|---| +| `{spacing.2xs}` | `--abl-spacing-2xs` | .3125rem = 5px | +| `{spacing.xs}` | `--abl-spacing-xs` | .625rem = 10px | +| `{spacing.s}` | `--abl-spacing-s` | 1.25rem = 20px | +| `{spacing.m}` | `--abl-spacing-m` | 1.875rem = 30px | +| `{spacing.l}` | `--abl-spacing-l` | 2.5rem = 40px | +| `{spacing.xl}` | `--abl-spacing-xl` | 3.75rem = 60px | +| `{spacing.2xl}` | `--abl-spacing-2xl` | 5rem = 80px | +| `{spacing.3xl}` | `--abl-spacing-3xl` | 6.25rem = 100px | +| `{spacing.4xl}` | `--abl-spacing-4xl` | 7.5rem = 120px | + +The stylesheet redefines these variables at different breakpoints. For example `--abl-spacing-2xl` takes 2.5rem, 3.75rem and 5rem, and +`--abl-spacing-l` takes 1.25rem, 1.875rem and 2.5rem. So the scale shrinks on smaller screens instead of using separate tokens. + +### Grid & Container +- **The "u" unit.** Utility classes like `.abl-ph-1u` / `.abl-mh-1u` resolve to `8.33333vw`, which is one twelfth of the viewport. At 1280px that is `{spacing.grid-unit}` 106.667px. Measured paddings of `106.667px`, `53.3334px` (½u) and `26.6666px` (¼u) all come from this unit. +- The homepage blog grid sits inside a 1u margin on both sides and shows three 320px-wide teasers per row with 180px-tall image wells. +- The shop promo strip runs edge to edge with `20px 106.667px` padding. +- The hero collage puts its tiles on the same 12-column grid. The main teaser is 747px wide (7u), the secondary tiles are 427px (4u), and they overlap. + +### Whitespace Philosophy +Sections are separated by large empty white areas rather than rules or background changes. The capture shows wide empty bands between the +"latest", "Tutorial videos" and "One Thing videos" rows (exact section gaps were not measured). Inside a teaser, the text block +uses ½u (53.333px) padding on the large tile and ¼u (26.667px) on the small ones. + +## Elevation & Depth + +| Level | Treatment | Use | +|---|---|---| +| 0 | Flat, no shadow | Every surface measured: `boxShadows` frequency table is empty | +| Focus | `0 0 .1875rem rgba(0,0,255,0.5)` | Form focus glow from the stylesheet corpus | + +Ableton creates depth only by **overlapping flat rectangles**: in the hero collage the photo tile sits half over the larger teaser and +half over white space. There are no shadows, gradients or blur on any measured surface. When you need more emphasis, use a filled colour +field (lemonade, teal, periwinkle, black) instead of elevation. + +## Shapes + +### Border Radius Scale + +| Token | Value | Use | +|---|---|---| +| `{rounded.none}` | 0px | Every button, input, select, tag, card and image | + +The stylesheet corpus has exactly one radius, `2px`, used once. No measured element used it, so it is not a token. Do not add rounding. + +### Other geometry +- The scroll-down control is a perfect 60×60 blue square with a white chevron. +- Teaser CTAs end with a `›` arrow glyph (`has-arrow`) and an underline. +- The hamburger-style logo mark (vertical bars plus horizontal lines) sits top left at 60×28px. +- Photography fills the frame edge to edge (`abl-object-fit-cover`, `abl-ratio-fill`) with no frames or radii. +- No clip-paths, skews or masks were measured. + +## Components + +### Buttons + +**`button-primary`**: the filled blue button, measured on the footer newsletter "Sign up". +- Background `{colors.primary}` `#0000ff`, label `{colors.on-primary}` `#ffffff`, `{typography.title-card}` (20px / 700), padding `7px 30px`, height `42px`, radius `{rounded.none}`. +- Hover: a Playwright hover recorded **no change** in any computed property. The site does not declare a visible hover state on this button. + +**`button-buy`**: "Add to cart" in the shop buy panel (`input.btn.js_add_to_cart_btn`). +- Same blue/white/20px bold styling, padding `6.5px 30px`, `2px solid` transparent border, radius 0. In the buy panel it stretches to the cell height (77px measured). +- Hover: no computed change measured. + +**`button-scroll`**: the homepage "Scroll down" anchor, a 60×60 `{colors.primary}` square with a chevron icon. + +### Links +- **`link-nav-cta`**: "Try Live 12 for free" in the header, `{colors.primary}`, 20px / 700, no underline. +- **`link-filter`**: blog filter row ("All posts · Artists · News · Downloads · Tutorials · Videos · Loop"), `{colors.primary}`, 24px / 700 / 36px, no underline. The "More:" band at the bottom repeats it on `{colors.dolphin}`. +- **`link-teaser-cta`**: "See what's new ›", "Learn more ›", "Watch the series ›". Underlined text in the teaser's text colour (white, black or `#eeeeee`) with a trailing arrow. 24px / 700 on the main teaser and 20px / 700 on the smaller ones. +- Hovering these links changed no computed colour or decoration in the probe. + +### Navigation +**`nav`**: a white header, `padding: 20px 0px 0px`, 69px tall. From left: the logo mark, then the product nav (Live, Push, Move, Note, +Link, Shop, Packs, Help, More +) in `{typography.nav-link}` 16px / 700 black. On the right are "Try Live 12 for free" in blue and +"Log in or register" in black 16px / 700. On the shop page the header grows to 139px because a sub-nav is added. + +**`promo-strip`**: on `/en/shop/live/` a full-width black (`{colors.ink}`) bar under the header holds white 20px / 700 text +("Rent-to-own Live Suite over 24 affordable monthly payments."), padding `20px 106.667px`, 70px tall. + +### Tags +**`tag-category`**: the label above each blog teaser image. 14px / 700 / 21px black text on a swatch background, padding +`1.96px 11.9px`, 25px tall, radius 0. Tutorials = `{colors.tiffany}` `#00d2be`, Downloads = `{colors.salmon}` `#ff8389`. + +### Inputs & Forms +**`text-input`**: the newsletter email field. `{colors.dolphin}` fill, no border, 20px / 400 black text, padding `8px 15px`, +42px tall, radius 0. It sits flush against the 42px blue "Sign up" button. +**`select`**: language and country choosers in the footer. `{colors.dolphin}`, 14px / 700, padding `4.9px 50px 4.9px 10.5px` +(room for the arrow), 30px tall, radius 0. +Focus uses blue (`.abl-cl-form-focus`) with the 3px `rgba(0,0,255,0.5)` glow. Placeholder text is `#999999`. + +### Cards +**`card-blog-teaser`**: no box, no background, no border. A 320×180 image (with `{colors.dolphin}` showing while it loads), a +category tag, then a 20px / 700 / 30px black headline. Video teasers in the "One Thing" row overlay the artist's name in coloured text +in the lower-left corner of the image. + +### Footer +**`footer`**: white, black text. Starts with the newsletter block ("Sign up to our newsletter", 20px / 400 label), then link columns +with 20px / 700 h3 headings (Education, Community, Language and Location) and 20px / 400 links. Social icons and the +`{typography.small-bold}` 14px / 700 secondary legal row ("Contact Us", …) sit at the bottom. + +## Design System Architecture + +**Ableton publishes no public design system, component library, token package or brand guideline.** Searches for "Ableton brand guidelines +logo typeface Futura press kit", "Ableton press resources logos download official", "Ableton design system component library website +tokens" and "Ableton website redesign Futura PT design team blog" found no such resource. The official +[press page](https://www.ableton.com/en/press/) offers product press kits and a press contact only; it has no colour, type or logo-usage +specification. What follows is the **de-facto system** visible in the production stylesheet +([output.a8652eafb45a.css](https://cdn-resources.ableton.com/80bA26cPQ1hEJDFjpUKntxfqdmG3ZykO/static/CACHE/css/output.a8652eafb45a.css)). + +- **Token architecture.** Ableton uses an `abl-` prefixed, utility-first convention. Colours are single-purpose classes named after objects rather than roles: `.abl-cl-dolphin{color:#eee}`, `.abl-cl-tiffany{color:#00d2be}`, `.abl-cl-salmon{color:#ff8389}`, `.abl-cl-goldfish{color:#fed134}`, `.abl-cl-razzmatazz{color:#ff0956}`. A few role aliases sit beside them: `.abl-cl-link` (blue), `.abl-cl-error` (#ed0000), `.abl-cl-disabled-text` (#666), `.abl-cl-form-focus` (blue), `.abl-cl-form-placeholder` (#999). Product campaigns get their own namespaced sets: `.abl-cl-live12-coral`, `.abl-cl-live12-periwinkle`, `.abl-cl-note-chartreuse`, `.abl-cl-note-mint`. Background variants use `.abl-bg-*` (`.abl-bg-blue`, `.abl-bg-suite` #1E2120, `.abl-bg-intro` #24FBC8). There is no visible primitive-to-semantic tier beyond these aliases. +- **Spacing tokens.** These are CSS custom properties `--abl-spacing-2xs … --abl-spacing-4xl` (see Layout), redefined per breakpoint so one name scales responsively. Margin and padding utilities use a compact axis grammar: `.abl-ph-10` (padding horizontal .625rem), `.abl-mv-20`, `.abl-mh-1u`, `.abl-mh-n1u` (negative). +- **Grid.** The `1u` unit is `8.33333vw` (1/12 viewport). A `--abl-desktop-breakpoint:1024` variable is declared. +- **Type.** A single family, futura-pt, with a `--abl-line-height` ladder (1.1 → 1.637). Type sizes are applied per component; no public type-scale tokens were found. +- **Theming.** No dark mode or theme switch was observed. Contextual text colour is set with classes such as `text-white`, `text-black`, `text-dolphin` on teaser wrappers, and with variables like `--abl-cl-text` / `--abl-cl-banner` / `--abl-cl-banner-background` for campaign banners. +- **Breakpoints.** The most frequent media queries are `min-width:48em` (768px), `64em` (1024px), `70.25em`, `80em` (1280px) and `100em` (1600px), plus `36em` and `45em`. +- **Components.** BEM-style block classes: `homepage-teaser__primary-headline`, `homepage-teaser__cta`, `blog-teaser__category`, `blog-teaser__headline`, `main-footer__h3`, `main-footer__button`, `abl-buy-panel__product-cell__button`. No public inventory exists. +- **Accessibility.** A `.abl-visually-hidden` utility hides labels such as "Language" and "View posts in category:" for screen readers. Form focus is a blue glow. No published contrast or target-size policy was found. +- **Delivery.** Compiled, hashed CSS from `cdn-resources.ableton.com`. No npm package, Figma kit or versioned design system is public. + +## Do's and Don'ts + +### Do +- Use `#0000ff` for every link and every filled button. It is both the link colour and the button colour. +- Keep every corner at `0px`: buttons, inputs, tags, images, panels. +- Set everything in futura-pt, bold 700 for headings, titles, nav and CTAs; 400 only for long reading text and footer link lists. +- Size working text at 20px / 30px; reserve 60px / 66px for the hero and 90px / 108px for product names. +- Fill inputs and selects with `#eeeeee` and no border. +- Use the named swatches (tiffany, salmon, lemonade, periwinkle…) as flat colour fields and category tags, with black text on top. +- Build layouts on the 1/12-viewport unit and let tiles overlap in hero collages. +- End teaser CTAs with an underline and a `›` arrow. + +### Don't +- Don't round anything, and don't add drop shadows. The system has none. +- Don't add a second action colour; swatches never colour buttons. +- Don't use letter-spacing or uppercase labels; none were measured. +- Don't invent hover colours. The live buttons and links measured no hover change. +- Don't put text on dolphin grey in anything but black. +- Don't use a grey page background for the visible canvas; the reader sees white `#ffffff`. + +## Responsive Behavior + +### Breakpoints + +| Name | Width | Key changes | +|---|---|---| +| Small | < 48em (768px) | Header becomes "Menu" toggle; h1 drops to 20px / 30px; body teaser copy 14px / 21px | +| Medium | ≥ 48em (768px) | Multi-column grids begin; most layout rules switch on here | +| Desktop | ≥ 64em (1024px) | `--abl-desktop-breakpoint:1024`; full nav row | +| Large | ≥ 80em (1280px) | Measured layout (60px hero, 3-up blog grid) | +| Wide | ≥ 100em (1600px) | Further scale-up of spacing variables | + +### Mobile (390px measured) +- h1 "Live 12.4 is out now…" renders at `{typography.mobile-h1}` 20px / 700 / 30px, down from 60px. Ableton shrinks headlines hard rather than gradually. +- h2 "The latest from Ableton" also renders at 20px / 700 / 30px. +- Teaser body copy is 14px / 400 / 21px, white over imagery. +- The header keeps `padding: 20px 0px 0px` and 69px height, with a "Menu" control replacing the nav row. +- The most-used sizes at mobile are 16px, 14px and 20px. + +### Touch targets +The 42px newsletter input/button pair and the 60px scroll square are the largest measured targets. No published minimum target size was found. + +### Collapsing strategy +Spacing variables shrink at each breakpoint. Viewport-unit margins (`1u` = 8.333vw) scale continuously, so gutters narrow on their own. + +## Iteration Guide + +1. Start with a white `#ffffff` page, black `#000000` futura-pt text, and nothing else; then add blue `#0000ff` only where something is clickable. +2. Reference tokens by name: `{colors.primary}`, `{typography.title-card}`, `{rounded.none}`, `{spacing.grid-unit}`. +3. Keep the type ladder: 90 / 60 / 40 / 30 / 24 / 20 / 16 / 14px. Don't add in-between sizes. +4. Check every new component for 0px radius and no shadow before anything else. +5. For emphasis, place a flat swatch rectangle (lemonade, teal, periwinkle, black) behind content instead of elevating it. +6. Leave hover states unstyled unless you measure one; the live site shows none on its buttons and links. +7. At mobile widths, drop display headlines to 20px / 30px as the live site does. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/absolute-clean-energy/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/absolute-clean-energy/DESIGN.md new file mode 100644 index 0000000..c867ada --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/absolute-clean-energy/DESIGN.md @@ -0,0 +1,176 @@ +--- +version: alpha +name: Absolute Clean Energy +category: "Thai Brands" +description: "Absolute Clean Energy (ACE) English homepage (ace-energy.co.th/en/home): Roboto Condensed throughout, navy #0d1f6e text on white, leaf green #52b78a pill buttons with 40px radius and a deeper #04a46d for tiles and hover, 60px bold uppercase hero headline on a translucent green band." +colors: + canvas: "#ffffff" + ink: "#0d1f6e" + primary: "#52b78a" + on-primary: "#ffffff" + green-deep: "#04a46d" + surface-2: "#f7f7f7" + surface-3: "#ececec" +typography: + display: + fontFamily: "\"Roboto Condensed\", sans-serif" + fontSize: 60px + fontWeight: 700 + lineHeight: 81px + textTransform: uppercase + display-mobile: + fontFamily: "\"Roboto Condensed\", sans-serif" + fontSize: 36px + fontWeight: 700 + lineHeight: 48.6px + textTransform: uppercase + subheading: + fontFamily: "\"Roboto Condensed\", sans-serif" + fontSize: 28px + fontWeight: 300 + lineHeight: 42px + body: + fontFamily: "\"Roboto Condensed\", sans-serif" + fontSize: 34px + fontWeight: 400 + lineHeight: 45.9px + button: + fontFamily: "\"Roboto Condensed\", sans-serif" + fontSize: 17px + fontWeight: 500 + lineHeight: 25.5px + letterSpacing: 1px + textTransform: uppercase + nav: + fontFamily: "\"Roboto Condensed\", sans-serif" + fontSize: 20px + fontWeight: 300 + lineHeight: 29px +rounded: + xs: 5px + sm: 40px + pill: 9999px +spacing: + s1: 4px + s2: 5px + s3: 7.5px + s4: 8px + s5: 10px + s6: 15px + s7: 16px + s8: 20px + s9: 24px + s10: 25px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 5px 25px + height: 38px + borderColor: "{colors.primary}" + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 5px 25px + height: 38px + borderColor: "{colors.primary}" + link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + link-hover: + textColor: "{colors.green-deep}" + nav: + backgroundColor: "{colors.canvas}" + boxShadow: rgba(0, 0, 0, 0.1) 2px 2px 2px 0px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + footer: + backgroundColor: "{colors.surface-2}" + textColor: "{colors.ink}" +--- + +## Overview + +Absolute Clean Energy Public Company Limited (page title "Absolute Clean Energy (ACE)", logo "ACE") is a Thai renewable-energy company listed on the stock exchange. The queue URL `https://www.ace-energy.co.th/en` shows a memorial entry page (grayscale tribute portrait on a black patterned background with an "เข้าสู่หน้าหลัก | Enter Site" button). That page is not the working brand site: its first extraction measured near-black text and the typefaces PSL Siara Pro, PSL Asadong Pro and TF Arluck. The "Enter Site" link points to `/en/home` (read from the page), so the homepage was re-measured with `extract-tokens --slug=absolute-clean-energy --url=https://www.ace-energy.co.th/en/home --allow-spa-404 --force` and all tokens below come from it. + +The homepage is a tidy corporate dashboard layout. A white header carries the green logo, a green stock-ticker chip (live data, not documented), a search icon, small EN and TH language boxes, and a row of eight navy links (About Us, Our Business, Investor Relations, Sustainability, News & Activities, Procurement, Join Us, Contact Us). Below is a full-bleed hero photograph of recycling machinery with the headline "THE CLEAN ENERGY LEADER" in white capitals on a translucent green band; then a tile grid: "Corporate Info" (photo with green caption block), "Our Performance" (gray map-pattern tile with large green megawatt figures), "Awards & Recognitions" (photo), "Project Highlight" (wide solar-roof photo with green caption) and "Sustainability"; then an "Investor Corner" with a stock quote block. Each tile has a small green rule under an uppercase navy label. A cookie icon at the lower left is not brand UI. + +## Colors + +- **Canvas `#ffffff`** is the dominant background (weight 3,634); **surface `#f7f7f7`** (1,921) fills the footer and performance tile; **surface `#ececec`** (1,606) is a lower-contrast gray area. +- **Ink `#0d1f6e`** is a deep navy and by far the most-read text color (4,360 characters), used for headings, navigation and tile labels. +- **Primary `#52b78a`** is the fill and border of the pill buttons ("WHISTLEBLOWING", "View All", "Read More") and the translucent hero headline band. +- **Green deep `#04a46d`** is the larger-area green (weight 1,027), the solid caption blocks under photo tiles, the megawatt figures, and the measured hover color of every navigation link, tile label and language box (text and border switch from `#0d1f6e` to `#04a46d`). +- **White `#ffffff`** is text on green and on photography (1,118 characters). +- A mid-gray `#939393` and `#0d1f6e` fill appear in small areas (weights 67 and 63). + +Bootstrap 4 root variables (`--primary: #007bff`, `--success: #28a745`, `--teal: #20c997`) are framework defaults, not brand colors. + +## Typography + +**Roboto Condensed** (weights 300, 400 and 700 loaded) sets all 5,964 measured characters; icons use `icomoon`. Weight 300 dominates reading text (3,404 characters), with 700 (932), 400 (840) and 500 (788) for emphasis. + +- **Display** 60px/700/81px uppercase; mobile 36px/48.6px. +- **Subheading** 28px/300/42px ("About Absolute Clean Energy"). +- **Nav / link** 20px/300/29px. +- **Button** 17px/500/25.5px, 1px letter-spacing, uppercase for "WHISTLEBLOWING". +- **Body** token 34px/400/45.9px was measured on the first paragraph detected inside a dark tile; the most-read size on the page is 23px (3,059 characters), followed by 15px, 14px, 20px and 12.75px, and the line-height of 23px text was not recorded separately. + +Other measured sizes: 18, 19, 22, 40px. Letter-spacing recorded only on 17px button text (1px). + +### Font substitutes + +Roboto Condensed is an open Google Fonts family; the declared fallback is `sans-serif`. + +## Layout + +The page is 1,280px wide and 6,564px tall. The header is 110px high with a faint shadow; the extractor counted 12 visible header links (`headerLinksVisible: 12`) and up to nine card columns (`maxCardColumns: 9`). The tile grid sits in a centered container: a three-column first row of equal tiles and a second row with one wide tile (about two columns) and one narrow tile, separated by even gutters. Spacing values: 4, 5, 7.5, 8, 10, 15, 16, 20, 24 and 25px; the paddings 15px (51 occurrences), 5px (37), 10px (36) and 25px (35) dominate. The footer is 583px tall on `#f7f7f7`, with uppercase 19px/500 navy headings (About Us, Corporate Information, and others). + +## Elevation & Depth + +Depth is slight: the header shadow `rgba(0, 0, 0, 0.1) 2px 2px 2px 0px` and a soft `rgba(204, 204, 204, 0.5) 0px 2px 10px 0px` on one element. Separation otherwise comes from color blocks (green caption bars over photographs), a gray map-dot texture in the performance tile, and angled light-gray panels behind the Investor Corner in the capture. + +## Shapes + +Buttons are pills at radius 40px (six elements; 38px high, padding 5px 25px). Circles come from 50% (nine elements) and 100% (five); 5px appears on two elements and 999px on one. Tiles and photographs are rectangular. The language boxes (EN, TH) are small rounded squares in the capture; their radius was not isolated. + +## Components + +- **Primary button.** `#52b78a` fill and 1px `#52b78a` border, white 17px/500 Roboto Condensed with 1px tracking, radius 40px, padding 5px 25px, 38px high; widths 216px ("WHISTLEBLOWING"), 132px ("View All"), 151px ("Read More"). +- **Navigation.** Navy 20px/300 links on white; hover color `#04a46d` (measured). +- **Tile.** Photo or `#f7f7f7` field with an uppercase navy label, a short green rule beneath, and a green `#04a46d` caption block with "Read more" and a chevron; label hover turns `#04a46d`. +- **Statistics.** Large green megawatt figures with small navy captions (content from the live page; values not tokenized). +- **Footer.** `#f7f7f7`, navy uppercase headings. +- **Not documented as brand UI:** the stock ticker chip and quote block, and the cookie icon. + +## Design System Architecture + +No public design system or brand guidelines were found: the entry page and homepage were opened and link only to corporate content, and no search was run. The de-facto system is a Bootstrap 4 site (`--breakpoint-sm: 576px`, `--breakpoint-md: 768px`, `--breakpoint-lg: 992px`, `--breakpoint-xl: 1200px`) with an icon font. The brand layer is the navy and two-green palette, Roboto Condensed in weights 300/700, and 40px pill buttons. Source: https://www.ace-energy.co.th/en/home and https://www.ace-energy.co.th/en as measured by the repository extractor. + +## Do's and Don'ts + +- Do set text in navy `#0d1f6e` on white or `#f7f7f7`, in light-weight (300) Roboto Condensed. +- Do use `#52b78a` pills with white 17px/500 labels and 1px tracking. +- Do use `#04a46d` for caption blocks, key figures and link hover. +- Do headline in uppercase 60px bold on a translucent green band over photography. +- Don't use Bootstrap's `#007bff` or `#28a745`. +- Don't reuse the memorial entry page's grayscale styling or PSL typefaces. +- Don't document the stock ticker or cookie icon as components. + +## Responsive Behavior + +Measured on a 390px mobile pass: the headline drops from 60px to 36px (line-height 48.6px, 360px wide box); the primary button keeps 17px/500, 38px height and 132px width; the header measured 390px by 118px and shows only the EN and TH labels in the detected text. Header links visible fall from 12 to 4, a menu toggle labeled "Toggle navigation" is detected (`menuToggleVisible: true`), and the maximum card columns fall from 9 to 5. Body-text size on mobile measured 34px as on desktop. Other breakpoints are not measured. + +## Iteration Guide + +1. Use the tokens as measured on `/en/home`. +2. White canvas, navy `#0d1f6e` Roboto Condensed text, green pills `#52b78a`, caption blocks `#04a46d`. +3. Hero: 60px bold uppercase white headline on a translucent green band over a photograph. +4. Hover on links and tile labels: change to `#04a46d`. +5. If the extractor lands on the memorial entry page, measure `/en/home` with `--allow-spa-404`. +6. Run `node web/scripts/verify-designs.mjs --slug=absolute-clean-energy` until it passes. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/accenture/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/accenture/DESIGN.md new file mode 100644 index 0000000..c1540b1 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/accenture/DESIGN.md @@ -0,0 +1,147 @@ +--- +version: alpha +name: Accenture +category: "Agencies & Studios" +description: "Accenture English homepage measured at accenture.com/en: black #000000 canvas with white text, uppercase Graphik 600 hero headline at 80px with -3px tracking, GT Sectra Fine 300 serif subheads, warm grey #f1f1ef story cards and flat purple #460073, blue #0041f0 and red #e2062e tiles." +colors: + canvas: "#000000" + ink: "#ffffff" + primary: "#ffffff" + surface-card: "#f1f1ef" + ink-muted: "#a2a2a0" + accent-purple: "#a100ff" + card-purple: "#460073" + card-purple-deep: "#39005e" + card-blue: "#0041f0" + card-red: "#e2062e" +typography: + display: + fontFamily: Graphik, sans-serif + fontSize: 80px + fontWeight: 600 + lineHeight: 88px + letterSpacing: "-3px" + textTransform: uppercase + display-mobile: + fontFamily: Graphik, sans-serif + fontSize: 42.9px + fontWeight: 600 + lineHeight: 49.335px + letterSpacing: "-1.44px" + textTransform: uppercase + heading: + fontFamily: Graphik, sans-serif + fontSize: 18.3111px + fontWeight: 700 + lineHeight: 27.4667px + subheading: + fontFamily: "\"GT Sectra Fine\", Palatino" + fontSize: 28px + fontWeight: 300 + lineHeight: 35px + body: + fontFamily: Graphik, Arial, Helvetica, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + letterSpacing: "-0.07px" + nav: + fontFamily: Graphik, Arial, Helvetica, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 16px +rounded: + none: 0px +spacing: + s1: 6px + s2: 8px + s3: 16px + s4: 24px + s5: 28px + s6: 32px + s7: 40px + s8: 48px + s9: 60px + s10: 72px +components: + link: + textColor: "{colors.ink}" + typography: "{typography.display}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" +--- + +## Overview +Accenture's English homepage (title "Reinvented with Accenture", lang en) is a black, editorial page for a professional-services company. The header lists Services, Products, Insights, About Us and Careers, with Contact Us, Careers and Locations as utility links; the footer carries Privacy Statement, Terms & Conditions, Cookie Policy/Settings, Accessibility Statement and social links. The main heading reads "Together We Reinvented", set in huge uppercase Graphik. + +The capture shows the hero area as empty black with a pause control: the hero headline is animated and the measured hero span carries a transform of translateX(-1280px), so the text is off-screen in the screenshot. Below it, a grid of tall story cards (4 columns, 2 rows) shows announcements and perspectives: a solid deep-purple card, pale warm-grey cards with line illustrations (people around an "AZ" screen, data-centre diagrams), and cards with abstract 3D renders (purple glass cubes, blue light waves, grey spheres on a track). Each card has an uppercase label ("ANNOUNCEMENT", "PERSPECTIVE"), a 16px-class headline and an "Expand" link with a chevron. A pull-quote section follows ("human in the lead, not human in the loop." by Julie Sweet) beside a portrait on a tan background, and a "Client spotlight" section lists case studies with "Explore" chevron links. + +## Colors +The page is black: `{colors.canvas}` (#000000) covers 6474 area-weight units; white `{colors.ink}` is 3233 text weight against 1020 for black text on light cards. `{colors.surface-card}` (#f1f1ef) is the warm grey of the perspective cards (234 units). `{colors.ink-muted}` (#a2a2a0) is the measured hover colour of the header buttons (white to rgb(162, 162, 160)). The card fills measured on the page are `{colors.card-purple}` (#460073), `{colors.card-purple-deep}` (#39005e), `{colors.card-blue}` (#0041f0) and `{colors.card-red}` (#e2062e), with 177 units each for the first, blue and red and 117 for the deeper purple. `{colors.accent-purple}` (#a100ff) appears as the saturated purple in illustrations (1 unit). The extractor found no filled button, so `{colors.primary}` is white, the colour of the main links and header text. + +Shadows include a focus ring `0 0 0 5px #19f` (a blue, listed 8 times in the stylesheet), a white 2px ring, and an elevation `0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.3)`. + +## Typography +Graphik (400, 500, 600) is the main family, with GT Sectra Fine (300) as a serif for card and section headings and an "icont" icon font. The stylesheet also lists Manrope (24 uses). Fallbacks are Arial, Helvetica and sans-serif, and Palatino for the serif. + +- `{typography.display}`: Graphik 600 at 80px / 88px, -3px tracking, uppercase. Mobile: 42.9px / 49.335px, -1.44px. +- `{typography.heading}`: Graphik 700 at 18.3111px / 27.4667px ("Shaping tomorrow, today"). Mobile 14.7px / 22.05px. +- `{typography.subheading}`: GT Sectra Fine 300 at 28px / 35px ("A Leader in Reinvention"). +- `{typography.body}`: Graphik 400 at 14px / 21px, -0.07px. Mobile 12px / 18px. +- `{typography.nav}`: Graphik 400 at 16px / 16px. + +Font substitutes: Graphik is a commercial grotesque and GT Sectra Fine a commercial serif; the site's own fallbacks are Arial/Helvetica and Palatino. + +## Layout +Desktop width is 1280px with a page height of 7305px. The header height variable is `--rad-global-header-height: 72px` and the nav height `--rad-nav-height: 56px`. The story card grid is four equal columns with narrow gutters, each card tall and portrait. Spacing variables `--rad-spacing-sm: 16px`, `-md: 32px`, `-lg: 48px`, `-xl: 96px`, `-xxl: 160px` and component spacings 10px, 20px and 40px give the vertical rhythm; the measured spacing set is 6, 8, 16, 24, 28, 32, 40, 48, 60 and 72px. Sections alternate between full-width black and an inset image-plus-quote row at about 60px from the left edge. + +## Elevation & Depth +Role-level shadows are none. The stylesheet declares one elevated style (`0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.3)`) used 8 times, which is a menu or overlay shadow; it is not seen on the cards in the capture. Cards are flat colour fields or images. + +## Shapes +The radius frequency table is empty for the visible elements; cards and images render square. The stylesheet lists 8px (36 uses), 4px (15), 1px (11), 3px (9) and 20px (4) in component rules, but which visible elements use them was not measured, so the only radius token is `{rounded.none}` (0px), the measured border-radius of the body, headings and navigation roles. + +## Components +**Story card**: portrait tile with either a coloured fill (`{colors.card-purple}`) or a `{colors.surface-card}` field with an illustration, an uppercase label, a headline, and a white strip at the bottom with "Expand" and a chevron on image cards. + +**Header navigation**: black bar, 72px, white 16px Graphik text; hover turns text and border to `{colors.ink-muted}`. + +**Text link with chevron**: "Explore" and "Expand" in 14px type, white on black. + +**Quote block**: large white sentence in Graphik, attribution in small type, beside a portrait on a tan field. + +**Pause control**: small pause icon at the left of the hero for the animation. + +## Design System Architecture +The homepage opened for this document (https://www.accenture.com/en) links no brand guideline or design system; it links "Media Relations" to newsroom.accenture.com, which was not opened. The shipped CSS shows a prefixed token set named `--rad-*`: `--rad-spacing-sm|md|lg|xl|xxl`, `--rad-component-spacing-none|small|medium|large` (0, 10px, 20px, 40px), `--rad-nav-height`, `--rad-global-header-height`, and subnav margins for tablet (48px), desktop (80px) and wide desktop (107px). Components therefore take spacing from named steps instead of raw pixel values. + +Voice and imagery: headings are declarative and forward-looking ("Together We Reinvented", "Shaping tomorrow, today", "A Leader in Reinvention"), and the cards mix two visual languages: monochrome line illustrations of people and devices on warm grey, and glossy abstract 3D renders in purple, blue and silver. Photography is limited to portraits against a flat tan backdrop. The page density is moderate to high: eight cards are visible at once, but each has only a label, a headline and one link, so the text load per card stays small. + +The client-spotlight list at the bottom of the capture is a plain stack of white headlines on black, each followed by an "Explore" link with a chevron, so the same link pattern used on cards is reused outside them. + +## Do's and Don'ts +- Do put content on black with white text, and use light warm-grey cards for illustrated pieces. +- Do set the hero headline in uppercase Graphik 600 with -3px tracking. +- Do use GT Sectra Fine 300 for editorial subheadings. +- Do label each card in small uppercase before its headline. +- Don't use drop shadows on cards. +- Don't add a coloured primary button; the measured page has none. +- Don't use the blue focus ring colour (#19f) as a brand fill. + +## Responsive Behavior +Measured at 390px: h1 42.9px / 49.335px, h2 14.7px / 22.05px, body 12px / 18px with a 252px wide box, the h1 box 338px wide; the mobile header shows the items "Menu", "Close Menu", Services, Products, Insights, About Us, Careers on a black background. Card grid columns at narrow widths, and tablet breakpoints, were not measured (the stylesheet names a tablet subnav margin of 48px). + +## Iteration Guide +1. Black canvas, white text, `{colors.surface-card}` for light cards. +2. Headline 80px uppercase Graphik 600, -3px tracking; serif subheads in GT Sectra Fine 300 at 28px. +3. Four-column portrait card grid with uppercase labels and "Expand" links. +4. Use `{colors.card-purple}`, `{colors.card-blue}` or `{colors.card-red}` as flat tile fills; keep `{colors.accent-purple}` for illustration accents. +5. Hover on header items: text to `{colors.ink-muted}`. +6. Other hover and dark/light switching are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/accor/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/accor/DESIGN.md new file mode 100644 index 0000000..b8d218c --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/accor/DESIGN.md @@ -0,0 +1,208 @@ +--- +version: alpha +name: ALL Accor +category: "Travel & Hospitality" +description: "Accor loyalty and hotel booking site measured at all.accor.com: pale #f7f9fb page, indigo #1e1852 pill buttons with #38326c hover, Montserrat 700 headings at 36px, Roboto body, white 16px-radius cards with a soft shadow and a three-tier --wel token system." +colors: + canvas: "#ffffff" + page-largest: "#f7f9fb" + ink: "#5e5b73" + primary: "#1e1852" + on-primary: "#ffffff" + surface-alt: "#eaedf5" + surface-tint: "#f9f9ff" + ink-strong: "#232136" + ink-heading: "#252339" + ink-muted: "#6f6e77" + link-blue: "#0051ae" + nav-link-text: "#1264a3" + hairline: "#808080" + offer-magenta: "#b40875" + primary-hover: "#38326c" + button-secondary-bg: "#e8edff" + button-secondary-text: "#1f1b4b" + button-secondary-border: "#508ffa" + text-input-text: "#3e3d48" + card-border: "#d9dadc61" +typography: + display: + fontFamily: Montserrat, sans-serif + fontSize: 36px + fontWeight: 700 + lineHeight: 48px + letterSpacing: "-0.5px" + display-mobile: + fontFamily: Montserrat, sans-serif + fontSize: 24px + fontWeight: 700 + lineHeight: 44px + heading: + fontFamily: Montserrat + fontSize: 32px + fontWeight: 700 + lineHeight: 40px + subheading: + fontFamily: Roboto, sans-serif + fontSize: 18px + fontWeight: 500 + lineHeight: 24px + body: + fontFamily: Roboto, sans-serif + fontSize: 12px + fontWeight: 400 + lineHeight: 17.6px + button: + fontFamily: Roboto, Arial, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + nav: + fontFamily: Montserrat, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + link: + fontFamily: Roboto + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + input: + fontFamily: Roboto, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + xs: 4px + sm: 6px + md: 16px + lg: 40px + xl: 50px + 2xl: 60px + 3xl: 100px + pill: 9999px +spacing: + s1: 1px + s2: 4px + s3: 6px + s4: 8px + s5: 10px + s6: 12px + s7: 16px + s8: 20px + s9: 24px + s10: 28px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.xl}" + padding: 12px 24px + height: 49px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-secondary: + backgroundColor: "{colors.button-secondary-bg}" + textColor: "{colors.button-secondary-text}" + typography: "{typography.link}" + rounded: "{rounded.3xl}" + padding: 12px 16px + height: 50px + borderColor: "{colors.button-secondary-border}" + link: + textColor: "{colors.link-blue}" + typography: "{typography.link}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-heading}" + padding: 0px 12px + nav-link: + textColor: "{colors.nav-link-text}" + typography: "{typography.nav}" + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.text-input-text}" + typography: "{typography.input}" + rounded: "{rounded.sm}" + height: 24px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-strong}" + rounded: "{rounded.md}" + padding: 28px + borderColor: "{colors.card-border}" + boxShadow: rgba(7, 5, 24, 0.05) 0px 8px 16px 0px + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.ink-strong}" + padding: 68px 0px +--- + +## Overview +ALL Accor (title "ALL Accor | Hotels Stays & Exclusive Deals", lang en) is the booking and loyalty site for Accor hotel brands. The header lists Stay, Loyalty programme, Deals, Our partners, Activities and More, with the stacked "All ACCOR" logo at the left, language and currency selectors (EN, THB) and a dark navy pill "Sign in / Sign up". The footer includes Exclusive offers (newsletter), Mobile App, Need help?, Company, Pro solutions and legal links. + +The capture is a clean travel-commerce page. A pale grey-blue hero band (`{colors.page-largest}`) holds a centred bold headline "Welcome to ALL, book at the best price", two tabs ("Where are you going?" underlined, "Explore ideas") and a large white pill search bar with destination, dates, rooms and guests and a navy "Search" pill button. Below, white sections run through "Our offers" (three photo cards with a white "Member Exclusive" tag in magenta text and a round white arrow button), a lavender "Your benefits are waiting for you... Sign in" band with three white benefit cards (Member's rate, Reward points, Exclusive benefits) with icon tiles and a pale-blue outlined "Sign in" pill, "More than hotels. A way of life" with a carousel, "Must-visit destinations" with city photos and "Get inspired for your next trip" with article cards. A teal "Feedback" tab is fixed at the left edge; it is a widget and is not documented as brand UI. + +## Colors +The page background is `{colors.page-largest}` (#f7f9fb, 2454 area units), with `{colors.surface-alt}` (#eaedf5, 656), `{colors.surface-tint}` (#f9f9ff, 428) and white `{colors.canvas}` (411). The most-read text colour is `{colors.ink}` (#5e5b73), then `{colors.ink-strong}` (#232136), `{colors.ink-heading}` (#252339, used by the h1 and h3), `{colors.ink-muted}` (#6f6e77, body paragraphs), `{colors.link-blue}` (#0051ae), `{colors.nav-link-text}` (#1264a3, the body-role colour) and `{colors.offer-magenta}` (#b40875, the "Member Exclusive" tag text). + +`{colors.primary}` (#1e1852) is the dark indigo of the "Sign in / Sign up" and "Search" buttons with `{colors.on-primary}` white text; the measured hover colour is `{colors.primary-hover}` (#38326c). The secondary "Sign in" pill uses `{colors.button-secondary-bg}` (#e8edff) with `{colors.button-secondary-text}` (#1f1b4b) and a `{colors.button-secondary-border}` (#508ffa) outline. `{colors.hairline}` (#808080) and `{colors.card-border}` (#d9dadc61) draw dividers and card borders. The site's variables also include a strawberry scale (`--wel-prim-color-strawberry-10` #40000f), lime-green, aqua alpha tints, `--wel-sem-color-hover-offer` #980062 and a disabled primary button gradient `linear-gradient(75deg, #050033 0%, #524f81 100%)`. + +## Typography +Montserrat (700) is used for the display and heading text and the nav; Roboto (variable 100 to 900) for body, buttons, subheads and inputs; Unna 400 italic is also loaded. Icon fonts `wel-icon-font` and `icomoon` supply icons. + +- `{typography.display}`: Montserrat 700 at 36px / 48px, -0.5px tracking. Mobile: 24px / 44px. +- `{typography.heading}`: Montserrat 700 at 32px / 40px ("Our offers"). Mobile 24px / 32px. +- `{typography.subheading}`: Roboto 500 at 18px / 24px. +- `{typography.body}`: Roboto 400 at 12px / 17.6px (the offers intro copy). +- `{typography.button}`, `{typography.link}`, `{typography.input}`: Roboto 400 at 16px / 24px; `{typography.nav}` is Montserrat 400 at 16px / 24px. + +Font substitutes: Montserrat and Roboto are open fonts available from Google Fonts; no substitute is needed. + +## Layout +Desktop width is 1280px, page height 4758px. Content is arranged in card rows of three and four columns, and band sections that alternate between white and tinted backgrounds. The measured spacing steps are 1, 4, 6, 8, 10, 12, 16, 20, 24 and 28px, and variables such as `--wel-comp-grid-row-gap-md: 1.75rem` and `--wel-sem-spacing-dynamic-within-section-3xl: 2.75rem` define section gaps. The header is white with a hairline underline. + +## Elevation & Depth +Cards use a soft shadow `rgba(7, 5, 24, 0.05) 0px 8px 16px 0px` with a 1px translucent border `{colors.card-border}`. The stylesheet also lists `0 .5rem 1rem #2523391a` (10 uses), `0 .125rem .375rem #0000001a` and focus rings (`0 0 0 .0625rem #3470df`, `0 0 0 .0625rem #ba1f1a` for error). The search bar is a white pill raised from the grey hero. + +## Shapes +Radii are `{rounded.sm}` 6px (79 uses in CSS, the semantic `--wel-sem-border-radius-container-low` is .375rem), 4px, 16px for cards (`{rounded.md}`), 40px, 50px (`{rounded.xl}`, the primary button), 60px, 100px (`{rounded.3xl}`, the secondary pill) and 9999px. Photo tiles in the offers row carry the 6px radius. + +## Components +**Primary button** (`button-primary`): `{colors.primary}` fill, white 16px Roboto text, 50px radius, 12px 24px padding, 49px tall. Hover `{colors.primary-hover}`. + +**Secondary pill** (`button-secondary`): pale blue fill, indigo text, 1px blue outline, 100px radius, 12px 16px padding, 50px tall. + +**Text input**: white, 6px radius, `{colors.text-input-text}` (#3e3d48) text at 16px. + +**Card** (`card`): white, 16px radius, 28px padding, soft shadow and translucent border; used for the benefit cards with a lavender icon tile. + +**Footer**: `{colors.page-largest}` background, 68px vertical padding. + +## Design System Architecture +The homepage that was opened (https://all.accor.com/a/en.html) links no brand guideline or design system in its visible content. The shipped CSS shows a three-tier token system prefixed `--wel-`: primitive (`--wel-prim-color-*`, `--wel-prim-sizing-positive-05`), semantic (`--wel-sem-font-families-title`, `--wel-sem-font-weights-label-strong: 500`, `--wel-sem-border-radius-container-low`, `--wel-sem-color-hover-offer`, `--wel-sem-number-shadow-up-y`) and component (`--wel-comp-btn-primary-disabled-bg-color`, `--wel-comp-grid-row-gap-md`). An older `--ads-sizes-*` set is also present (`--ads-sizes-6: 1.5rem`). Tokens are therefore resolved by name instead of by hex. + +Imagery and voice: the offers and destinations rows use real travel photography (resorts, restaurants, skylines) cropped to uniform tiles, with a short white title laid over a darkened lower edge. Destination tiles carry a small grey country line above a bold city name ("France / Paris", "United Kingdom / London", "Singapore / Singapore", "Australia / Melbourne"). The copy speaks directly to the member: "Your benefits are waiting for you... Sign in", "Save up to 10% on your stay.", "Earn points to get discounts." Section headings are sentences or short phrases in Montserrat, and each section on the left is paired with a right-aligned uppercase or bold link such as "SEE MORE OFFERS" or "See all articles" with an arrow. + +The search module is the central component of the first screen. It is one white pill that contains four zones separated by hairlines: destination (a magnifier icon and the mandatory label), dates (a calendar icon with start and end dates joined by an arrow), rooms and guests (a person icon) and the indigo Search pill. A "Special rates" disclosure with chevron sits under it, flanked by two thin horizontal rules. The tabs above the module use an underline in the indigo colour to mark the active tab. + +Hover and focus behaviour that was measured: the Sign in / Sign up button changes its fill from rgb(30, 24, 82) to rgb(56, 50, 108) with the text staying white. Focus rings in the stylesheet use a blue (#3470df) 1px ring and a red (#ba1f1a) ring for error states. + +## Do's and Don'ts +- Do use the indigo `{colors.primary}` for the single main action per area. +- Do use large rounded white cards on tinted bands. +- Do set headings in Montserrat 700 and supporting text in Roboto. +- Do tag member offers in magenta text on a white label. +- Don't mix the pill radii: primary 50px, secondary 100px, cards 16px. +- Don't document the Feedback tab as brand UI. +- Don't use heavy shadows; the card shadow is 5 percent opacity. + +## Responsive Behavior +Measured at 390px: h1 24px / 44px (box 358px wide), h2 24px / 32px, body 12px / 17.6px (box 313px), and the header shows "MENU" in uppercase 12px Roboto 500 with 1px tracking in `{colors.primary}`. No mobile CTA was detected. Column counts and breakpoints were not measured. + +## Iteration Guide +1. Page `{colors.page-largest}`, cards white, text `{colors.ink-heading}` and `{colors.ink}`. +2. Headlines Montserrat 700 at 36px and 32px; body Roboto. +3. Primary action: indigo pill with white text; secondary: pale blue outline pill. +4. Offer cards: photo with white title overlay, round white arrow button, magenta member tag. +5. Hover colours beyond the primary button and dark mode are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ace-hotel/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ace-hotel/DESIGN.md new file mode 100644 index 0000000..940515a --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ace-hotel/DESIGN.md @@ -0,0 +1,327 @@ +--- +version: alpha +name: Ace Hotel +category: "Travel & Hospitality" +description: >- + Ace Hotel's website is a warm, editorial hospitality system: near-black ink #231f20 on white, an orange BOOK NOW button (#ff944c) with square 0px corners, a condensed grotesque display face (Toronto Gothic, 140px light hero down to 28px) paired with Bianco Sans 14px body text, and photography-led carousels on pale grey bands. +colors: + canvas: "#ffffff" + surface-band: "#eaeaea" + ink: "#231f20" + primary: "#ff944c" + on-primary: "#24201f" + surface-olive: "#707951" + ink-soft: "#212121" + link-consent: "#1863dc" + button-primary-border: "#474747" + card-border: "#f4f4f4" +typography: + display: + fontFamily: "\"Toronto Gothic\", \"Toronto Gothic Fallback\"" + fontSize: 140px + fontWeight: 300 + lineHeight: 133px + letterSpacing: "-1.4px" + display-mobile: + fontFamily: "\"Toronto Gothic\", \"Toronto Gothic Fallback\"" + fontSize: 60px + fontWeight: 300 + lineHeight: 62px + letterSpacing: "-0.6px" + heading: + fontFamily: "\"Toronto Gothic\", \"Toronto Gothic Fallback\"" + fontSize: 70px + fontWeight: 400 + lineHeight: 84px + letterSpacing: "-0.7px" + subheading: + fontFamily: "\"Toronto Gothic\", \"Toronto Gothic Fallback\"" + fontSize: 28px + fontWeight: 500 + lineHeight: 33px + letterSpacing: "-0.1px" + body: + fontFamily: "\"Bianco Sans\", \"Bianco Sans Fallback\"" + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + button: + fontFamily: "\"Toronto Gothic\", \"Toronto Gothic Fallback\"" + fontSize: 26px + fontWeight: 400 + lineHeight: 22px + letterSpacing: 0.52px + textTransform: uppercase +rounded: + xs: 2px + sm: 6px + none: 0px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 4px + s4: 6px + s5: 8px + s6: 10px + s7: 12px + s8: 16px + s9: 18px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.none}" + height: 59px + borderColor: "{colors.button-primary-border}" + button-secondary: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.body}" + rounded: "{rounded.none}" + padding: 2px 21px 0px + height: 48px + link: + textColor: "{colors.ink}" + typography: "{typography.body}" + rounded: "{rounded.none}" + nav: + textColor: "{colors.ink}" + rounded: "{rounded.none}" + nav-link: + textColor: "{colors.on-primary}" + typography: "{typography.body}" + rounded: "{rounded.none}" + transform: matrix(1, 0, 0, 1, 0, 0) + text-input: + textColor: "{colors.on-primary}" + typography: "{typography.body}" + rounded: "{rounded.none}" + padding: 0px 18px 0px 0px + height: 48px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.sm}" + padding: 20px 26px + borderColor: "{colors.card-border}" + boxShadow: rgba(172, 171, 171, 0.3) 0px -1px 10px 0px + footer: + textColor: "{colors.ink}" + rounded: "{rounded.none}" +--- + +## Overview + +Ace Hotel presents itself as "a collection of international lifestyle hotels" (acehotel.com/about) and the website behaves like a small magazine that happens to sell rooms. The first screen is a full-bleed looping hotel video under a four-word headline, "Welcome to Ace Hotel", set in a very large condensed grotesque. Below it the page settles into a quiet, left-to-right rhythm of centered intro copy, a grey band of location cards, and an offers carousel. + +The visual voice is confident and slightly irreverent but never decorative. Almost everything is black ink on white or on photography. The only chromatic note in the UI chrome is a single orange button, BOOK NOW, pinned at the right end of a booking bar that sits above the hero. Everything else that is colourful comes from the photography and from the typographic artwork each property uses for its own logotype (stencil, script, neon-like wordmarks). + +Key characteristics: +- Condensed display type (Toronto Gothic) at light and regular weights with slightly negative tracking, used for headings that read like signage. +- A neutral humanist sans (Bianco Sans) at 14px for nearly all running text, with a 21px line height. +- Square corners everywhere in the chrome: buttons, inputs, nav and links all use `{rounded.none}`. +- A persistent horizontal booking bar (Location, Check in, Check out, Guests, Have a code?) with hairline dividers and tiny uppercase labels. +- Pale grey section bands (`{colors.surface-band}`) that separate editorial blocks without needing rules. +- Photography is the decoration; there are no gradients, illustrations or icon sets beyond small chevrons and arrows. + +## Colors + +The palette is deliberately small. It is measured from the live homepage (see `tokens.sources.json`); values are used verbatim. + +### Core +- **Canvas** (`{colors.canvas}`): pure white, the page background and the card background. +- **Ink** (`{colors.ink}`): `#231f20`, a warm near-black used for headings, body copy, the nav and the dark secondary button. It is the most-read text colour on the page. +- **Ink soft** (`{colors.ink-soft}`): `#212121`, a marginally cooler near-black seen in some body text. +- **On-primary** (`{colors.on-primary}`): `#24201f`, text on the orange button. It is almost identical to ink; the button uses dark text, not white. + +### Accent +- **Primary** (`{colors.primary}`): `#ff944c`, the orange of BOOK NOW. It is the only saturated colour used on interactive chrome. Keep it to one primary action per view. +- **Button border** (`{colors.button-primary-border}`): `#474747`, a 1px dark-grey outline on the orange button. + +### Surfaces +- **Surface band** (`{colors.surface-band}`): `#eaeaea`, the grey band behind the Locations and Offers sections. The capture shows a faint paper-like grain on these bands. +- **Surface olive** (`{colors.surface-olive}`): `#707951`, a muted olive that appears as a large background area elsewhere on the homepage. Treat it as a secondary editorial surface, not a brand colour. +- **Card border** (`{colors.card-border}`): `#f4f4f4`, a barely visible edge on cards. + +### Utility +- **Link consent** (`{colors.link-consent}`): `#1863dc`, the blue of the privacy-consent link in the cookie notice. It comes from a third-party consent widget and should not be reused for brand links. + +### Usage rules +- White and `{colors.ink}` carry about all of the layout; add colour only through photography. +- Orange is for the booking action only. Do not tint headings, icons or borders orange. +- On photography, text is white. On white and grey, text is `{colors.ink}`. + +## Typography + +### Font families +- **Toronto Gothic** is the display, heading, subheading and button face. In the capture it renders as a tall, tightly set condensed grotesque; headings look like all-capitals even though the DOM text is mixed case ("Locations"). +- **Bianco Sans** is the body, label, input and nav-link face (loaded in 400 and 700). The loaded-fonts list also includes **Tiempos Headline** (500), a Klim Type Foundry serif by Kris Sowersby (klim.co.nz/fonts/tiempos-headline); in the capture it appears in the header's "Locations" selector. +- Each webfont has a named fallback stack (`Toronto Gothic Fallback`, `Bianco Sans Fallback`) generated by the framework to limit layout shift. + +### Hierarchy + +| Token | Font | Size | Weight | Line height | Tracking | Use | +|---|---|---|---|---|---|---| +| `{typography.display}` | Toronto Gothic | 140px | 300 | 133px | -1.4px | Hero h1 on desktop | +| `{typography.display-mobile}` | Toronto Gothic | 60px | 300 | 62px | -0.6px | Hero h1 at 390px | +| `{typography.heading}` | Toronto Gothic | 70px | 400 | 84px | -0.7px | Section titles ("Locations", "Offers") | +| `{typography.subheading}` | Toronto Gothic | 28px | 500 | 33px | -0.1px | Card titles ("Athens") | +| `{typography.body}` | Bianco Sans | 14px | 400 | 21px | normal | Running text, labels, inputs | +| `{typography.button}` | Toronto Gothic | 26px | 400 | 22px | 0.52px | BOOK NOW | + +### Principles +- Display sizes are huge relative to body: the ratio between h1 (140px) and body (14px) is the signature of the page. +- Tracking tightens as size grows (-1.4px at 140px, -0.7px at 70px) and goes positive only for the uppercase button. +- Intro copy is centered in a narrow single column, so the paragraph reads as a poster caption. +- Small uppercase labels (booking bar field names, "VISIT ACE HOTEL ATHENS" links) are set in Bianco Sans with positive tracking and an underline for links. +- Weight contrast is modest: 300 for the hero, 400 for headings and button, 500 for subheads, 700 reserved for bold body. + +### Note on font substitutes +Toronto Gothic and Bianco Sans are licensed webfonts. If they are unavailable, substitute a condensed grotesque for display (for example Oswald, Bebas Neue or Barlow Condensed) and a neutral humanist sans for body (Open Sans or Source Sans). Keep the display negative tracking and the 14px/21px body ratio. These are substitutes, not claims about Ace's own choices. + +## Layout + +### Spacing system +The measured spacing scale is small and mostly even: `{spacing.s1}` 1px, `{spacing.s2}` 2px, `{spacing.s3}` 4px, `{spacing.s4}` 6px, `{spacing.s5}` 8px, `{spacing.s6}` 10px, `{spacing.s7}` 12px, `{spacing.s8}` 16px, `{spacing.s9}` 18px, `{spacing.s10}` 20px. Larger gaps on the page (20px, 21px, 28px, 32px and 40px) are gutters between cards and booking-bar cells. + +### Grid and container +- The page is full-bleed for hero media and grey bands, with content inset by a consistent side margin. +- The Locations and Offers sections are horizontally scrolling carousels, with the first card wide (a landscape hotel photo) and following cards narrower and taller, so the row shows a partial card at the right edge to invite scrolling. +- The booking bar spans the full width as five equal-height field cells divided by thin vertical rules, followed by the orange button; it sits in the 61px measured header zone. +- Intro copy sits in a single centered column in the middle of the page. + +### Whitespace +- Generous vertical air around the intro paragraph and between bands; sections are separated by background change more than by rules. +- Card text sits tight under its image: title, two-line description, then an underlined link. + +## Elevation & Depth + +The system is flat. Depth comes from photography and from two shadows measured on the page: +- Card shadow: `rgba(172, 171, 171, 0.3) 0px -1px 10px 0px`, a soft upward glow used on `{components.card}`. +- A second, stronger shadow, `rgba(0, 0, 0, 0.17) 0px 2px 21px 0px`, is also measured on the page; use it only for floating panels, and note that which element carries it was not isolated. + +There are no stacked elevations, glassmorphism or blurs in the UI. Floating controls are white circles on photography. + +## Shapes + +- `{rounded.none}` (0px): buttons, inputs, nav, links, footer. This is the dominant shape and defines the brand's squared-off look. +- `{rounded.xs}` (2px): small inline buttons such as the consent link. +- `{rounded.sm}` (6px): cards and panels such as the cookie notice. +- `{rounded.pill}` (9999px) and 50%: the circular carousel arrows and the video pause control. +- Photos in cards are rectangular and uncropped by radius; aspect ratios vary per card (landscape, tall portrait). + +## Components + +### Buttons +- **button-primary** (BOOK NOW): `{colors.primary}` background, `{colors.on-primary}` text, `{typography.button}` (Toronto Gothic 26px uppercase, 0.52px tracking), `{rounded.none}`, 59px high, 1px `{colors.button-primary-border}` outline. It is attached to the right end of the booking bar. +- **button-secondary**: `{colors.ink}` background, white text, `{typography.body}`, `{rounded.none}`, 48px high, padding 2px 21px 0px. The "Skip to content" and "This link opens in a new browser tab" accessibility affordances use this look. +- Round icon buttons (carousel arrows, pause/play) are white circles with an arrow or pause glyph in ink. + +### Cards +- **card**: white `{colors.canvas}` background, `{rounded.sm}`, 20px 26px padding, `{colors.card-border}` edge, and the soft shadow above. +- Location cards are image-first: the hotel photograph carries a white logotype overlay (each property has its own mark), followed by the city name in `{typography.subheading}`, a short description in body type, and an underlined uppercase link ("Visit Ace Hotel Athens"). +- Offer cards are photographic with overlaid white display lettering (for example "Extra credit"). + +### Inputs and forms +- **text-input**: `{typography.body}`, `{colors.on-primary}` text, `{rounded.none}`, 48px high, 18px right padding. The language select uses a custom dropdown arrow and uppercase, slightly tracked text. +- Booking-bar fields show a tiny uppercase label above the value ("Check in", "October 9, 2026") with a chevron for dropdowns. + +### Navigation +- **nav**: a 61px header, white, with the boxed Ace Hotel logo at the far left, a "Locations" dropdown, the booking bar, then BOOK NOW. A language selector (EN, JP, EL, KO, CN) is offered in the header markup. +- **nav-link**: `{typography.body}` in `{colors.on-primary}`. +- **link**: `{colors.ink}` body type with underline for in-card calls to action. + +### Footer +- **footer**: `{colors.ink}` text, `{rounded.none}`. + +### Signature components +- Full-bleed hero video with a circular pause control and a downward chevron. +- Horizontal booking bar combined with the orange action. +- Locations carousel with per-property logotype overlays. +- Cookie / privacy notice as a white floating card in the lower-left. + +## Design System Architecture + +No public Ace Hotel design system, token package or brand guideline was found in the research for this file; see `SOURCES.json` for the searches. What the shipped site shows: +- It is a WordPress site: the document exposes `--wp--preset--*` custom properties (colour presets such as vivid-cyan-blue, spacing presets `--wp--preset--spacing--20` to `--80`, font-size presets 13px, 20px, 36px, 42px and shadow presets like `crisp` and `deep`). These are WordPress core defaults and are not used by the visible design; the real styling lives in the theme (the extracted stylesheet path includes `/wp-content/themes/ace-hotel/`). +- Redesign history: Atelier Ace and rehabstudio launched a redesigned Ace Hotel site with separate sites for each property, per the LBB Online news item found in search (the page itself returned 403 and is therefore not cited as a source here). +- Self-description and locations: https://acehotel.com/about/ (Seattle, Palm Springs, New York, Brooklyn, Kyoto, Sydney, Toronto, Athens; Fukuoka coming soon). +- Tiempos Headline foundry page: https://klim.co.nz/fonts/tiempos-headline. +- De-facto system: three type roles (display / body / serif accent), one accent, one neutral ladder, square corners, shadows only on floating items. + +## Do's and Don'ts + +### Do +- Use Toronto Gothic (or a close condensed substitute) for headings and make them large. +- Keep body copy at `{typography.body}` with the 21px line height. +- Keep the orange `{colors.primary}` for the single booking action. +- Use `{rounded.none}` for buttons and inputs. +- Let photography and per-property logotypes carry colour and personality. +- Use grey `{colors.surface-band}` bands to group editorial sections. +- Write with a warm, plainspoken voice ("We're glad you're here."). + +### Don't +- Do not round the booking button or fill it with a gradient. +- Do not use the consent-widget blue `{colors.link-consent}` for brand links. +- Do not set display type in mixed weights larger than 500; the hero is light (300). +- Do not add decorative icons or illustration; the brand uses photography. +- Do not add heavy drop shadows to cards; the card shadow is a soft grey glow. +- Do not centre long paragraphs; centring is only for the short intro. + +## Responsive Behavior + +### Breakpoints +- Measurements were taken at 1280px desktop and 390px mobile. No official breakpoint list was published; behaviour between these widths was not measured. + +### Mobile changes +- The hero h1 drops from 140px to 60px (`{typography.display-mobile}`), line height from 133px to 62px, and tracking from -1.4px to -0.6px. +- Body and button type are unchanged in the measurements taken. + +### Touch targets +- Inputs are 48px high and the primary button is 59px, both above common 44px touch minimums. + +### Collapsing strategy +- Carousels remain horizontal swipe containers; arrows are round controls overlaid on the edges. +- The booking bar is a desktop pattern; its collapse behaviour at small widths was not captured, so do not infer it. + +### Image behavior +- Photos fill cards edge to edge, with the logotype overlay centred or lower-left. The hero video is full width and sits under the header. + +## Iteration Guide + +1. Start from `{colors.canvas}` and `{colors.ink}`; add `{colors.primary}` only for one action. +2. Set headings in the display face at large sizes with negative tracking; copy the sizes from the table above. +3. Keep body at 14px/21px; add small uppercase labels for utility text. +4. Build sections as image + short title + two-line text + underlined link. +5. Separate sections with `{colors.surface-band}` backgrounds, not borders. +6. Square every corner except circular floating controls. +7. Check against the capture: if a page feels decorated rather than photographic, remove ornament. +8. Before adding a token, measure it on the live site or cite an official source in `SOURCES.json`. + +## Voice and Microcopy + +- Intro paragraph (verbatim from the capture): "Ace Hotel is a collection of international lifestyle hotels. We're in Seattle, Palm Springs, New York, Brooklyn, Kyoto, Sydney, Toronto and Athens." It ends on "We're glad you're here." +- Section subtitles are one short line set beside the heading: "Embrace the city in spaces built for gathering." and "Available at most Ace Hotels." +- Card descriptions are one or two sentences of place-writing: "East meets West in Japan's culture capital." +- Links are verbs plus a proper noun in capitals: "Visit Ace Hotel Kyoto", "See all offers" with a small arrow. +- Booking labels are plain nouns: Location, Check in, Check out, Guests, Have a code? +- Offer titles are short, punchy and set as artwork on the photo: "Extra credit", "Make it last", "It pays to prepay". +- The consent notice is the only legalistic copy ("We value your privacy") and is visually separated as a floating card. + +## Imagery and Art Direction + +- Photography is interior and architectural, shot in natural light: poolside terraces with striped loungers, concrete and timber rooms, lobby corners with warm lamps. +- The hero is a candid, human moment (a staff jacket reading "A Friendly Place") rather than a hotel exterior. +- Each hotel gets its own wordmark treatment layered over its photograph; the master logo is a boxed stencil-like "ACE HOTEL" in the header. +- Photos are slightly warm and low-contrast, which harmonises with the near-black ink and the orange accent. +- Offer tiles use typographic collage (repeated and mirrored lettering) over cropped photography. + +## Density and Rhythm + +- Above the fold the density is high (booking bar, header, hero); everything after it is relaxed. +- One idea per band: intro, locations, offers. +- Carousels show a partial next item so the page always looks continuable. +- Text blocks are short; no card carries more than a heading, two lines and a link. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/acer-g/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/acer-g/DESIGN.md new file mode 100644 index 0000000..01ec662 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/acer-g/DESIGN.md @@ -0,0 +1,167 @@ +--- +version: alpha +name: Acer +category: "Consumer Electronics" +description: "Acer United States home (acer.com/us-en): white #ffffff canvas, #222222 ink, Noto Sans throughout with 41.056px/600 section heads, Acer lime green #80c343 pill buttons (800px radius) with dark #222222 labels, #40810c green text links, a #333333 utility bar and a #f0f0f0 footer." +colors: + canvas: "#ffffff" + ink: "#222222" + primary: "#80c343" + on-primary: "#222222" + surface-muted: "#f0f0f0" + surface-utility: "#333333" + ink-strong: "#000000" + link-green: "#40810c" + ink-on-dark: "#f8f8f8" + ink-footer: "#333333" +typography: + display: + fontFamily: "\"Noto Sans\", Arial, sans-serif" + fontSize: 41.056px + fontWeight: 600 + display-mobile: + fontFamily: "\"Noto Sans\", Arial, sans-serif" + fontSize: 32.48px + fontWeight: 600 + promo-title: + fontFamily: "\"Noto Sans\", Arial, sans-serif" + fontSize: 29.696px + fontWeight: 600 + subheading: + fontFamily: "\"Noto Sans\", Arial, sans-serif" + fontSize: 21.792px + fontWeight: 600 + body: + fontFamily: "\"Noto Sans\", Arial, sans-serif" + fontSize: 16px + fontWeight: 400 + button: + fontFamily: "\"Noto Sans\", Arial, sans-serif" + fontSize: 18.784px + fontWeight: 600 + lineHeight: 28.176px +rounded: + xs: 20px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 4px + s4: 6px + s5: 8px + s6: 10px + s7: 12px + s8: 16px + s9: 20px + s10: 24px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 6px 24px + height: 40px + text-link: + textColor: "{colors.link-green}" + typography: "{typography.body}" + utility-bar: + backgroundColor: "{colors.surface-utility}" + textColor: "{colors.ink-on-dark}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + footer: + backgroundColor: "{colors.surface-muted}" + textColor: "{colors.ink-footer}" +--- + +# Acer + +## Overview + +This file documents Acer's United States home page, measured at `https://www.acer.com/us-en/` (title "Acer Laptops, Desktops, Chromebooks, Monitors & Projectors | Acer United States"). The queued URL `https://www.acer.com` first redirected the measuring browser to `https://www.acer.com/en-us/`, which rendered an "Oops!" not-found page; the real US home page was re-measured at `/us-en/` (see SOURCES.json). + +The page is a straightforward retail electronics storefront. A thin `#333333` "Acer Brands" utility bar sits above a white header with the lowercase green acer wordmark, a single row of navigation ("Shop", "Deals", "AI", "Products", "Business", "Education", "Support") and search/account/cart icons. Below it a full-width hero carousel shows product renders on soft gradients ("Acer Aspire 14 AI | Acer Aspire 16 AI — Explore. Evolve. Aspire." with a green "Explore" pill), then "Browse Popular Categories" (product cut-outs on white with plain captions), "Exclusive Offers & Value Picks" (two photographic tiles with overlaid titles), "Insights and Innovations" (three editorial cards with green "Read More" links), "Discover More with Acer" (four cards with "Explore" / "Learn More" links) and a light grey footer. + +The tone is practical and product-forward: photography and product renders carry the colour, the interface stays white and charcoal, and Acer's lime green appears on buttons and the logo. + +A region-selection banner in Thai (with a select box and a green "continue" button) appeared at the very top because the measuring browser was outside the US; it is a locale prompt, not brand UI, and is not documented as a component. + +## Colors + +Backgrounds by area: `#ffffff` (5114), `#f0f0f0` (1216), `#ffffff80` (385), `#222222` (92), `#f8f8f8` (73), `#333333` (53), `#80c343` (25). Text by characters: `#222222` (2906), `#000000` (374), `#ffffff` (216), `#40810c` (97), `#f8f8f8` (57), `#333333` (11). + +- **canvas `#ffffff`** — page background and every content band. +- **ink `#222222`** — the main reading colour for headings and body copy. +- **ink-strong `#000000`** — used on some hero and card headings ("Explore. Evolve. Aspire."). +- **primary `#80c343`** — Acer lime green, the fill of every pill button and the logo colour. +- **on-primary `#222222`** — button labels are dark charcoal on green, not white. +- **link-green `#40810c`** — a darker green for text links ("Read More", "Learn More", "Explore") so they stay readable on white. +- **surface-muted `#f0f0f0`** — the footer background (also `--agw-light`). +- **surface-utility `#333333`** with **ink-on-dark `#f8f8f8`** — the "Acer Brands" utility bar (`--agw-dark: #333333`). +- **ink-footer `#333333`** — footer link text. + +The site's root variables also declare status colours `--agw-negative: #b92820`, `--agw-positive: #128228`, `--agw-warning: #ffc107` and `--agw-general: #08559e`; none of them was seen rendered on the home page, so they are not added as tokens. `--swiper-theme-color: #007aff` is the carousel library's default. + +## Typography + +One family: Noto Sans, loaded at 400 and 600, with Arial as the declared fallback (`--agw-font-family: "Noto Sans", Arial, sans-serif`). Noto Sans is an open-source Google family, so no substitute is needed. An `acer-icons` icon font is also loaded. + +- **display** — 41.056px, weight 600. All main section heads: "Browse Popular Categories", "Insights and Innovations", "Discover More with Acer", and hero titles. +- **promo-title** — 29.696px, 600. Titles overlaid on the offer tiles ("Massive Monitor Savings"). +- **subheading** — 21.792px, 600. Card titles ("50 Years of Breaking Barriers"). +- **button** — 18.784px / 28.176px, 600. Pill button labels. +- **body** — 16px, 400. Card descriptions and general copy. + +Sizes by characters: 16px (1657), 18.784px (882), 21.792px (569), 14.24px (236), 41.056px (194), 48.032px (79), 29.696px (44). Only two weights are used: 400 (2785 chars) and 600 (876). No letter-spacing adjustments were measured. + +## Layout + +Desktop capture: 1280px wide, 4066px tall. The utility bar is 41px tall, the main header band 66px, and the hero carousel spans full width. Content bands run from x=24 to x=1256, i.e. 24px side margins. "Browse Popular Categories" shows 4-plus product tiles in a horizontally scrolling row with a progress rule under it; "Insights and Innovations" is a 3-column card grid; "Discover More with Acer" is 4 columns. Measured paddings are led by 24px and 8px (39 each), 12px (26), 4px (22) and 6px (17); larger section paddings of 64px (5) and 48px (3) appear between bands. Gaps: 24px and 12px. The root variables define a rem spacing scale from `--agw-space-025` (0.25rem) to `--agw-space-600` (6rem). + +## Elevation & Depth + +The page is flat. No box-shadow was measured at rest. The one depth cue is the measured hover state on green pill buttons, which adds `rgba(0, 0, 0, 0.2) 0px 3px 6px 0px` without changing the fill. Cards have no border and no shadow; images sit directly on white. The hero carousel's pager is a dark translucent capsule with dots. + +## Shapes + +Measured radii: 800px (15 elements — every button is a full pill), 24px (1) and 20px (1). Images and cards are square-cornered. The shape vocabulary is therefore binary: rectangular content, capsule-shaped actions. + +## Components + +- **button-primary** — lime `#80c343` fill, `#222222` 18.784px/600 label, full pill radius, padding 6px 24px, 40px tall ("Windows 11", "Explore"). Hover adds the 0 3px 6px shadow. +- **text-link** — `#40810c` green, used under cards as the call to action ("Read More", "Learn More", "Explore"). +- **utility-bar** — `#333333` strip with a grid icon and "Acer Brands" in `#f8f8f8`, account and cart icons right. +- **nav** — white header, green lowercase acer logo left, centred charcoal links, search icon right. +- **category tile** — product cut-out image on white with a centred 16px caption. +- **offer tile** — full-bleed photograph with a 29.696px/600 dark title overlaid. +- **editorial card** — image on top, 21.792px/600 title, 16px summary truncated with an ellipsis, green link. +- **footer** — `#f0f0f0` with a "Back To Top" strip, link columns ("Products", "Support", "Resources", "About Acer", "Sustainability") with underlined links, social icons and a legal row. + +## Design System Architecture + +No public Acer design system or brand-guideline page could be opened for this file (attempts are logged in SOURCES.json). The de-facto system is visible in the shipped CSS: 28 root variables with an `--agw-` prefix — a colour set (`--agw-white`, `--agw-black`, `--agw-dark`, `--agw-light`, plus status colours), weights (`--agw-fw-light` 300 to `--agw-fw-bold` 700), body sizes (`--agw-fs-body-m: 1rem`, `--agw-fs-body-s: 0.89rem`, `--agw-fs-label: 0.79rem`) and a spacing scale named by multiples of a rem (`--agw-space-025` … `--agw-space-600`). Font sizes on the page are fractional multiples of that rem (14.24px = 0.89rem). + +## Do's and Don'ts + +- Do keep the canvas white and the text charcoal `#222222`. +- Do use lime `#80c343` for pill buttons with dark `#222222` labels. +- Do use the darker `#40810c` green for text links on white. +- Do set everything in Noto Sans, 400 or 600. +- Don't put white text on the lime green; the measured label colour is `#222222`. +- Don't round cards or images; only buttons are rounded. +- Don't add shadows at rest; reserve the 0 3px 6px shadow for button hover. +- Don't document the region-selection banner as brand chrome. + +## Responsive Behavior + +Measured at 390px: section heads drop from 41.056px to 32.48px; body copy stays 16px. Mobile font sizes by characters: 18.08px (2135), 16px (1645), 20.32px (569), 14.24px (225), 32.48px (194), 36.48px (79), 25.6px (44) — so the 18.784px and 21.792px desktop sizes become 18.08px and 20.32px. The mobile pass found a menu toggle labelled "Navigation" and up to 5 card columns (scrolling rows included). Grid behaviour at intermediate widths was not measured. + +## Iteration Guide + +1. Start with `canvas` white, `ink` `#222222` and the `#333333` utility bar over a white header. +2. Use `display` for every section head, centred above its row. +3. Put one `button-primary` lime pill in the hero; use `text-link` green links under cards. +4. Keep cards borderless and square; let product renders and photography do the work. +5. Close with the `#f0f0f0` footer in `#333333` text. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/activehop/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/activehop/DESIGN.md new file mode 100644 index 0000000..f1aa2a5 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/activehop/DESIGN.md @@ -0,0 +1,124 @@ +--- +version: alpha +name: ActiveHop +category: "Food & Beverage" +description: "Sparkling hop water brand measured at active-hop.com: white page, black Lekton 700 monospace type at 13.6px, a translucent white pill navigation with 80px radius over a rounded photographic hero, and giant Sora 700 flavour words at 240px in sage #e5e8d0 and light grey #eeeeee." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#e5e8d0" + ink-muted: "#99a1af" + marquee-grey: "#eeeeee" + nav-bg: "#ffffff80" +typography: + display: + fontFamily: Lekton + fontSize: 13.6px + fontWeight: 700 + lineHeight: 14.96px + textTransform: uppercase + display-mobile: + fontFamily: Lekton + fontSize: 10.8px + fontWeight: 700 + lineHeight: 11.88px + textTransform: uppercase + marquee: + fontFamily: Sora + fontSize: 240px + fontWeight: 700 + lineHeight: 192px +rounded: + xs: 8px + sm: 12px + md: 20px + lg: 80px + pill: 9999px +spacing: + s1: 4px + s2: 8px + s3: 12px + s4: 16px + s5: 32px +components: + link: + textColor: "{colors.primary}" + typography: "{typography.marquee}" + padding: 0px 16px + nav: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.ink}" + rounded: "{rounded.lg}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.display}" + card: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.ink}" + rounded: "{rounded.xs}" + padding: 16px + footer: + textColor: "{colors.ink}" + padding: 16px +--- + +## Overview +ActiveHop (title "ActiveHop - Sparkling Hop Water | Outdoor Inside") sells a sparkling hop water that its page describes as natural, with zero sugar, carbs, fat, alcohol, calories and colouring. The range is three flavours, Drop, Trail and Rad, plus a Discovery Box sampler. Navigation reads Products, About us, Subscribe, a cart count "(0)" and a language switch (EN, IT). The footer lists Contacts, Privacy Policy, Refund Policy, Shipping Policy, Terms of Service and Credits. + +The capture is minimal and monospaced. A rounded hero panel, about the full viewport, shows a soft, washed-out photographic backdrop of bubbles and a 3D aluminium bottle drifting at an angle. A translucent white pill navigation (`{colors.nav-bg}`) floats in the middle of it with the "ActiveHop" logotype at the centre, "PRODUCTS" and "ABOUT US" at the left, and "SUBSCRIBE IT (0)" at the right. Under the hero, a short centred paragraph in monospace explains the product ("Composed of a few natural elements. Designed to quench your thirst with pleasure thanks to the subtle herbaceous and bitter note characteristic of hops."). After a long stretch of white, giant marquee words repeat down the page: "DROP" in pale sage, "TRAIL" in light grey and "RAD" in a lighter grey, cropped at the viewport edges. The brand's tagline "Outdoor Inside" and a breadcrumb sequence (Flavors, Target Zero, Flower Power, Fit for purpose, Ready to go) appear in the page's copy. + +## Colors +The page is white (`{colors.canvas}`, 5120 area units) with a 50 percent white layer (`{colors.nav-bg}` #ffffff80, 452 units) for the navigation and cards. Text is `{colors.ink}` (#000000) at 3259 character weight, with `{colors.ink-muted}` (#99a1af, 177), `{colors.marquee-grey}` (#eeeeee, 120) and the sage `{colors.primary}` (#e5e8d0, 60). The sage and the greys are measured on the giant flavour words, which are the only places where colour appears besides the photography. No filled button was found by the extractor, so `{colors.primary}` is the marquee colour and `{colors.on-primary}` is not declared. + +Product photography carries the colour: the aluminium bottle is silver with a cream label and black type, set against a pearly white and soft pink backdrop. Interface elements do not add accent colours. + +## Typography +Two families are loaded: Lekton 700 (a monospaced face) and Sora (variable 100 to 800). Lekton is used for everything small: navigation, body, labels. Sora is used for the giant marquee words. + +- `{typography.display}`: Lekton 700 at 13.6px / 14.96px, uppercase. This is the navigation-link style, which the extractor took as the largest hero text since the page has no h1. Mobile: 10.8px / 11.88px. +- `{typography.marquee}`: Sora 700 at 240px / 192px for the flavour words. On the mobile pass the largest measured size is 128px (180 characters). +- Body: the paragraph is Lekton 700 at 13.6px / 14.96px (10.8px / 11.88px on mobile) in sentence case, centred. + +All sizes are small apart from the marquee; there is no mid-size heading scale. The stylesheet declares `--text-huge--font-weight: 800` and Tailwind text variables up to `--text-9xl: 8rem` (128px). Font substitutes: Lekton can be replaced by any monospace with a bold weight, and Sora by a geometric sans; both are available on Google Fonts, so no substitute is needed. + +## Layout +Desktop width is 1280px and the page height is 19279px, most of it long scroll sections. The navigation is a centred pill that floats over the hero and is 92px high on desktop (`--header-height: 64px` is also declared). The hero is a rounded panel inset from the viewport edges. The product copy block is a narrow centred column (the paragraph measures 448px wide). Marquee words run edge to edge and are clipped by the viewport. The measured spacing steps are 4, 8, 12, 16 and 32px. A cart drawer width is declared as `--aside-width: 400px`. + +## Elevation & Depth +No box-shadows are measured on the roles; the stylesheet's shadow values are Tailwind variable chains and one `0 4px 12px` value. Depth is atmospheric: the translucent navigation lets the photograph behind it show through, and the bottle floats within the hero. Do not add shadows. + +## Shapes +Radii measured on elements: full pill (9 elements), 8px (6), 12px (4), 20px (2) and 80px (1, the navigation). In the token file they are `{rounded.pill}`, `{rounded.xs}` 8px, `{rounded.sm}` 12px, `{rounded.md}` 20px and `{rounded.lg}` 80px. The hero panel carries rounded corners in the capture; its exact radius was not isolated. + +## Components +**Navigation** (`nav`): translucent white `{colors.nav-bg}` pill, 80px radius, black Lekton uppercase links. Desktop height 92px, mobile 39px tall and 374px wide. The measured hover on "SUBSCRIBE" lowers opacity from 1 to 0.6; there is no colour change. + +**Card** (`card`): the same translucent white, 8px radius, 16px padding, black text. + +**Marquee word**: Sora 700 240px, `{colors.primary}` or `{colors.marquee-grey}`, repeated and clipped. + +**Language and cart**: text items "IT" and "(0)" inside the navigation; the zero in grey. + +## Design System Architecture +Source: https://www.active-hop.com/ (opened for this document). No brand guideline or design system is linked: the homepage fetched for this document lists no such link, and its footer "Credits" link points to sixsocks.studio, which was not opened. The shipped CSS shows a Tailwind v4 base (`--text-2xl: 1.5rem`, `--text-9xl: 8rem`, `--color-gray-800`) with a store layer (`--header-height: 64px`, `--aside-width: 400px`, `--cart-aside-summary-height-with-discount: 300px`) and the Leva debug panel variables (`--leva-colors-elevation1`, `--leva-radii-sm`), which belong to a third-party controls library and are not brand tokens. The de-facto system is therefore two fonts, one near-black ink, white, and sage and grey for large type. + +Voice and content: copy is short and declarative, written in English with an Italian language switch. The product paragraph names its sensory promise ("a sensation of purity that recalls the very essence of spring water") and closes with a statement of positioning ("for those looking for natural but not banal, rich but not artificial flavors"). Section naming uses a breadcrumb of playful phrases, "Outdoor Inside", "Target Zero", "Flower Power", "Fit for purpose" and "Ready to go", which act as chapter labels down the long scroll. A product description elsewhere on the page mentions an aluminium bottle that is light to carry but sturdy. The cart is shown only as a count in parentheses next to "SUBSCRIBE IT", and the language switch is a two-letter code, so utility navigation never gets its own visual treatment. + +## Do's and Don'ts +- Do set small copy in Lekton bold, uppercase for navigation and sentence case for paragraphs. +- Do let giant Sora words bleed off the viewport. +- Do keep the interface monochrome and let the product photograph carry colour. +- Do use the translucent pill navigation over imagery. +- Don't add accent button colours; none were measured. +- Don't use the Leva panel colours (#292d39 and others) as brand colours. +- Don't add shadows to the navigation. + +## Responsive Behavior +Measured at 390px: type steps down to 10.8px / 11.88px for navigation and body, the paragraph box is 310px wide, the navigation pill is 39px tall and 374px wide (radius 80px) and the largest text is 128px. Cart drawer, product grid and the language switch behaviour were not measured. + +## Iteration Guide +1. White page, black Lekton text at 13.6px, uppercase links. +2. Translucent white pill nav at 80px radius over a rounded photo hero. +3. Giant flavour words in Sora 700 at 240px in sage `{colors.primary}` and light grey. +4. Keep the layout empty and slow: long white scroll areas between short blocks. +5. Hover: opacity 0.6; other interactions and dark mode were not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/adaline/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/adaline/DESIGN.md new file mode 100644 index 0000000..dbcb75b --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/adaline/DESIGN.md @@ -0,0 +1,207 @@ +--- +version: alpha +name: Adaline +category: "Tech & AI" +description: "AI agent platform homepage measured at adaline.ai: pale green-white #f8f9f5 canvas, forest-green ink #2b390a and #203b14 pill buttons, light Akkurat headlines at 53px with -2.12px tracking, Fragment Mono caps for controls, and a painterly landscape behind a product window." +colors: + canvas: "#f8f9f5" + page-body: "#fbfdf6" + page-largest: "#eff2e8" + ink: "#2b390a" + primary: "#203b14" + on-primary: "#fbfdf6" + surface-dark: "#2a332a" + ink-soft: "#2e4320" + ink-soft-alpha: "#2e4320b3" + ink-muted: "#6b7860" + ink-faint: "#2e432066" + ink-strong: "#0a1d08" + hairline: "#2e43201a" + accent-teal: "#2b6b5e" + accent-brown: "#4a3212" + accent-deep-blue: "#16364a" + accent-green: "#4a6d47" + terminal-dark: "#050e11" + surface-night: "#1d2226" + link-bg: "#ecf2df" + nav-bg: "#ffffffd9" + nav-text: "#0d2209d9" + card-bg: "#e1e6df" +typography: + display: + fontFamily: >- + akkurat, "akkurat Fallback", Inter, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji" + fontSize: 53px + fontWeight: 400 + lineHeight: 64px + letterSpacing: "-2.12px" + display-mobile: + fontFamily: >- + akkurat, "akkurat Fallback", Inter, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji" + fontSize: 34px + fontWeight: 400 + lineHeight: 46px + letterSpacing: "-1.36px" + heading: + fontFamily: >- + akkurat, "akkurat Fallback", Inter, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji" + fontSize: 30px + fontWeight: 400 + lineHeight: 34.7px + letterSpacing: "-0.6px" + subheading: + fontFamily: >- + fragmentMono, "fragmentMono Fallback", SFMono-Regular, "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace + fontSize: 11px + fontWeight: 400 + lineHeight: 14px + letterSpacing: 1.1px + textTransform: uppercase + body: + fontFamily: >- + akkurat, "akkurat Fallback", Inter, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji" + fontSize: 18px + fontWeight: 400 + lineHeight: 26px + button: + fontFamily: >- + fragmentMono, "fragmentMono Fallback", SFMono-Regular, "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace + fontSize: 14px + fontWeight: 400 + lineHeight: 14px + letterSpacing: 0.28px + input: + fontFamily: "\"Fragment Mono\", ui-monospace, monospace" + fontSize: 11px + fontWeight: 400 + lineHeight: 14px + letterSpacing: 0.22px +rounded: + xs: 1.5px + sm: 3px + md: 4px + lg: 6px + xl: 8px + 2xl: 10px + 3xl: 12px + 4xl: 20px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 3px + s4: 4px + s5: 6px + s6: 8px + s7: 10px + s8: 12px + s9: 14px + s10: 16px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.page-body}" + typography: "{typography.button}" + rounded: "{rounded.4xl}" + padding: 0px 24px + height: 40px + link: + backgroundColor: "{colors.link-bg}" + textColor: "{colors.primary}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 6px 12px + nav: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.nav-text}" + nav-link: + textColor: "{colors.ink-strong}" + typography: "{typography.body}" + text-input: + textColor: "{colors.ink-soft}" + typography: "{typography.input}" + height: 14px + card: + backgroundColor: "{colors.card-bg}" + textColor: "{colors.ink}" + rounded: "{rounded.2xl}" + footer: + textColor: "{colors.page-body}" +--- + +## Overview +Adaline (title "Adaline | Ship Agents That Self-Improve") is a platform that helps AI teams improve their agents autonomously. Top navigation is Docs, Blog and a dark green "Get Started" pill, with "The Self-Improving Agent" as a further nav item; homepage tabs are Trace, Behaviors, Evals & Data and Improve. The footer groups Company (The Self-Improving Agent, Labs, Applied, Blog, Careers), Resources (Documentation, API reference, DPA, Privacy policy, Terms of service, Report vulnerability) and Connect (Github, Newsletter, LinkedIn, X, YouTube). + +The capture is calm, earthy and technical. The page is a pale green-white (`{colors.canvas}`, #f8f9f5) with a forest-green ink. At the top left sits the small italic-slash mark and "Adaline" wordmark; at the right, "DOCS", "BLOG" and the pill "GET STARTED" in mono caps. The hero starts with a pill tag "THE SELF-IMPROVING AGENT" (pale green with an arrow), then the h1 "Never stop learning" in light-weight Akkurat, a grey-green paragraph, and two buttons: a dark green filled "GET STARTED" and an outlined "READ DOCS". Below are a "TRUSTED BY" row of grayscale customer logos, an h2 "Truly understand your agents" and a large painterly landscape illustration (cliffs, a river, soft lavender sky) with a product window floating over it showing traces and a behavior map. The mock product UI uses monospace log lines and soft coloured bubbles. + +## Colors +The main background areas are `{colors.page-largest}` (#eff2e8, 4005 units), `{colors.canvas}` (#f8f9f5, 3082), `{colors.surface-dark}` (#2a332a, 1401), `{colors.card-bg}` (#e1e6df, 1201), `{colors.surface-night}` (#1d2226, 578) and `{colors.terminal-dark}` (#050e11, 492). `{colors.page-body}` (#fbfdf6) is the body background. Text colours are all green-tinted: `{colors.ink}` (#2b390a), `{colors.ink-soft}` (#2e4320) and its 70 percent form `{colors.ink-soft-alpha}` (#2e4320b3), `{colors.ink-muted}` (#6b7860), `{colors.ink-faint}` (#2e432066), and headline `{colors.ink-strong}` (#0a1d08). Mock-UI accent text colours measured are `{colors.accent-teal}` (#2b6b5e), `{colors.accent-brown}` (#4a3212), `{colors.accent-deep-blue}` (#16364a) and `{colors.accent-green}` (#4a6d47). + +`{colors.primary}` (#203b14) is the dark forest green of the primary button, with `{colors.on-primary}` (#fbfdf6) text. The measured hover shows the fill moving from rgb(32, 59, 20) to a 90 percent-opacity green (oklab 0.32 -0.052 0.049 / 0.9). The tag link uses `{colors.link-bg}` (#ecf2df). Navigation is `{colors.nav-bg}` (#ffffffd9) with `{colors.nav-text}` (#0d2209d9), and `{colors.hairline}` (#2e43201a) draws rules. Other variables in the stylesheet include Tailwind oklch scales and Material-like names (`--color-outline` #e1e6df, `--color-on-error` #fcf0f3, `--color-aux-accent-4-container` #f9f2d9, `--color-aux-accent-10-container` #ffebff), which are listed but not declared. + +## Typography +Three families: Akkurat (400, 400 italic, 700) for display, headings and body; Fragment Mono (400) for buttons, tags, nav and inputs; and Instrument Serif 400 and Newsreader 300 are also loaded, with Newsreader named 19 times in the stylesheet. The Akkurat stack falls back to Inter and system fonts. + +- `{typography.display}`: Akkurat 400 at 53px / 64px, -2.12px tracking. Mobile: 34px / 46px, -1.36px. +- `{typography.heading}`: Akkurat 400 at 30px / 34.7px, -0.6px. Mobile h2 is 26px / 30px, -0.78px. +- `{typography.body}`: Akkurat 400 at 18px / 26px. +- `{typography.subheading}`: Fragment Mono 400 at 11px / 14px, 1.1px tracking, uppercase, for tag pills and kickers. +- `{typography.button}`: Fragment Mono 400 at 14px / 14px, 0.28px tracking. +- `{typography.input}`: Fragment Mono 400 at 11px / 14px, 0.22px tracking. + +Headings are light (weight 400) with strong negative tracking, about -0.04em on the display size, which gives the page its quiet look. Font substitutes: Akkurat is commercial; the site's own fallback is Inter. Fragment Mono is open source. + +## Layout +Desktop width is 1280px and the page is 12453px tall. Text blocks start at the left of a wide content column and hold to a narrow measure (h1 box 640px) beside empty right space; the product window is a full-width rounded frame with the illustration inside. Spacing steps are 1, 2, 3, 4, 6, 8, 10, 12, 14 and 16px. Sections are separated by generous whitespace rather than rules. + +## Elevation & Depth +The role-level shadows are none; the stylesheet shows only Tailwind shadow variable chains. Depth comes from the product window overlapping the illustration, from translucent navigation (`{colors.nav-bg}`) and from tinted surfaces. Do not add drop shadows. + +## Shapes +Radii measured on elements: pill 9999px (210 elements), 1.5px (48), 3px (36), 4px (26), 10px (19), 20px (5), 8px (5), 6px (5) and 12px (2). Buttons use 20px (`{rounded.4xl}`), the tag link uses the pill, cards use 10px (`{rounded.2xl}`), and tiny 1.5px to 4px radii are used inside the product mock. + +## Components +**Primary button**: `{colors.primary}` fill, `{colors.page-body}` Fragment Mono text at 14px with caps, 20px radius, 24px horizontal padding, 40px tall in the stylesheet; the header instance is 32px tall. + +**Outlined button** ("READ DOCS"): transparent with a thin green border, same radius, same mono text. + +**Tag link**: pill in `{colors.link-bg}` with `{colors.primary}` 11px caps text and a small arrow, 6px 12px padding. + +**Card**: `{colors.card-bg}`, 10px radius, `{colors.ink}` text; used inside the product window. + +**Input**: Fragment Mono 11px, `{colors.ink-soft}` text. + +## Design System Architecture +No brand guideline or design system is linked on the homepage that was opened (https://www.adaline.ai/). The shipped CSS shows a Tailwind v4 base (`--blur-lg: 16px`, `--ease-in: cubic-bezier(.4,0,1,1)`, oklch colour scales) together with a Material-style semantic layer: `--color-outline`, `--color-on-surface-low-subtle` (#243b1bb3), `--color-on-error`, and auxiliary `--color-aux-accent-N-container` colours. Fonts are exposed as `--font-akkurat`, `--font-fragment-mono` and `--font-mono`. + +Imagery and voice: the hero text is conversational and confident ("Adaline helps AI teams improve their agents autonomously, so you can find fires before they happen, ship fixes in minutes, and feel confidence in their agents - for the first time."). The h2 "Truly understand your agents" is followed by one line describing the product mechanism ("Adaline ingests production traces and groups recurring agent patterns into behavior maps your team can inspect."). The customer strip sits under a small mono caps label, "TRUSTED BY", and shows the logos of Salesforce, DoorDash, Reforge and HubSpot in a single muted tone. + +The product mock inside the illustration is a useful reference for data-dense UI in this palette. It has a header with the address "adaline.ai/behaviors", a bar chart row in sage green, two panes titled TRACES and BEHAVIORS each tagged LIVE, log lines in Fragment Mono with timestamps and costs at the right, an ERR badge in pink, bubbles of different sizes in pink, blue and grey on a pale field, and a dark terminal strip at the bottom with INFO output. Row colours stay within the tinted-green family; alerts are the only saturated colour. + +The hover states measured are limited to the primary button (fill to 90 percent opacity). Link underline, focus and active states were not measured, so they are left undeclared. + +## Do's and Don'ts +- Do keep text a green-tinted near-black; never pure black. +- Do pair a light Akkurat headline with Fragment Mono caps for controls and kickers. +- Do use a dark green filled button next to an outlined one. +- Do place a product window on soft painterly artwork. +- Don't add heavy borders or drop shadows. +- Don't use bold headlines; the display is weight 400. +- Don't use the Tailwind default colours for accents. + +## Responsive Behavior +Measured at 390px: h1 34px / 46px (box 358px wide), h2 26px / 30px, and the paragraph in the mock UI is 11px. Navigation changes, product window scaling and button sizes at mobile were not measured. + +## Iteration Guide +1. Canvas `{colors.canvas}`, ink `{colors.ink-strong}` for headlines and `{colors.ink-soft}` for body. +2. Display 53px weight 400 with -2.12px tracking; mono caps 11px kickers. +3. Dark green pill buttons, 20px radius, plus an outlined sibling. +4. Use a soft landscape illustration as the stage for the product window. +5. Tinted dark surfaces (`{colors.surface-dark}`, `{colors.terminal-dark}`) for terminal and footer areas. +6. Dark mode and other hover states are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/adam-bricker/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/adam-bricker/DESIGN.md new file mode 100644 index 0000000..49e8ab4 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/adam-bricker/DESIGN.md @@ -0,0 +1,130 @@ +--- +version: alpha +name: Adam Bricker +category: "Portfolio" +description: "Cinematographer portfolio measured at adambricker.com: full-bleed film footage, near-black #020202 and cool off-white #f0f2f1 text, huge uppercase NBInternationalPro 500 page labels at 143.25px with -2.865px tracking, small Chaps serif metadata labels and camera-style timecode readouts." +colors: + canvas: "#f0f2f1" + ink: "#020202" + primary: "#f0f2f1" + surface-green: "#01803b" + black: "#000000" +typography: + display: + fontFamily: NBInternationalPro, sans-serif + fontSize: 143.25px + fontWeight: 500 + lineHeight: 106.005px + letterSpacing: "-2.865px" + textTransform: uppercase + display-mobile: + fontFamily: NBInternationalPro, sans-serif + fontSize: 51px + fontWeight: 500 + lineHeight: 37.74px + letterSpacing: "-1.02px" + textTransform: uppercase + heading: + fontFamily: NBInternationalPro, sans-serif + fontSize: 52.5px + fontWeight: 500 + lineHeight: 63px + nav: + fontFamily: Chaps, serif + fontSize: 12.75px + fontWeight: 400 + lineHeight: 12.75px + link: + fontFamily: NBInternationalPro, sans-serif, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + xs: 1.5px + pill: 9999px +spacing: + s1: 3px + s2: 6px + s3: 11.46px + s4: 15px + s5: 18px + s6: 24px + s7: 36px + s8: 72px +components: + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + nav: + textColor: "{colors.canvas}" + nav-link: + textColor: "{colors.canvas}" + typography: "{typography.nav}" +--- + +## Overview +Adam Bricker is a Los Angeles cinematographer (the capture header reads "ADAM BRICKER, ASC"), and adambricker.com is his personal portfolio built as a camera interface. The page shows a live timecode, a frame rate (24 and 23.98), ISO 1600, "R3D HQ" and a 2.39:1 aspect ratio, together with a local clock ("21:32 PST (Los Angeles)"). Navigation is Home (01), Projects (02), Books (03), Photography (04) and About (05). The only outbound links are Instagram (@realadambricker) and a "Get In Touch" email link. + +The capture is a single full-viewport scene: a full-bleed film still of dancers in formal wear under a dark red-lit floor, with the project title "Hacks" set large in white at the lower left (with "Papa Johns" as another slide title), a slide counter "1 - 4" above it, previous and next circular arrow buttons and an "Instagram" link at the lower right, a timecode "00:00:21" and a menu button at the upper right, and a tick-mark scrubber with indices "01" and "04" along the bottom edge. The page measures 800px high, so it is one screen with the scroll inside the slideshow. The design is almost entirely imagery plus tiny typographic labels. + +## Colors +The palette is two near-neutrals over footage. `{colors.canvas}` (#f0f2f1) is a cool off-white used for every text label on the video (115 character weight) and as the body background; `{colors.ink}` (#020202, also 115) is near-black used for the giant "HOME" page label and the dark area behind video (5120 area units). `{colors.black}` (#000000) covers 1024 area units, and `{colors.surface-green}` (#01803b) covers another 1024 units; the extraction records it as a background area but the green element is not visible in the capture, so it is declared as measured but its role is not identified. `{colors.primary}` is #f0f2f1: the extractor found no filled button, and the light neutral is the colour of every interactive label. + +The focus ring in the stylesheet is a blue `inset 0 0 0 2px rgb(27 127 204 / .9)` used by the video player controls (15, 9 and 5 uses), and the Tailwind ring colour `rgba(59,130,246,.5)` is a framework default, neither of which is a brand colour. All other colour comes from the footage. + +## Typography +Five faces are loaded: NBInternationalPro (400 and 500) for display and headings, NBInternationalProMono (400) for technical readouts, Chaps (400, a serif) for the small header labels, ASThermalRegular (400, a dot-matrix face), and Inter and Space Mono appear in the stylesheet. Variables name them `--font-family-sans`, `--font-family-dot`, `--font-family-serif` and `--font-family-mono`. + +- `{typography.display}`: NBInternationalPro 500 at 143.25px / 106.005px, -2.865px tracking, uppercase, the page label "HOME" (line-height 0.74). Mobile: 51px / 37.74px, -1.02px. +- `{typography.heading}`: NBInternationalPro 500 at 52.5px / 63px, the project titles ("Hacks", "Starbucks Chef's Table"). On mobile the project title is 36px / 43.2px at weight 400 with -0.36px tracking. +- `{typography.nav}`: Chaps 400 at 12.75px / 12.75px, the header name, clock and "View Work". Mobile: 13px. +- `{typography.link}`: NBInternationalPro 400 at 16px / 24px. + +Type is either enormous or tiny, with nothing in between. Font substitutes: NB International and Chaps are commercial; Helvetica-like grotesques and a bookish serif are the stand-ins, and Space Mono or Inter appear in the site's own CSS. + +## Layout +The desktop frame is 1280px wide and 800px tall, edge to edge video with all UI at the edges: header at the top (name at the left, clock beside it, "View Work" and the timecode at the right), project title at the bottom left, slide controls at the bottom right and a scrubber at the bottom centre. Spacing uses a fluid base of 4px (`--fluid-base-size: 4px`) and the measured steps 3, 6, 11.46, 15, 18, 24, 36 and 72px. The giant page label sits with padding-top 11.46px and animates in with a translateY transform of 117.453px at measurement time. + +## Elevation & Depth +There are no shadows: role-level boxShadow is none and the Tailwind shadow variables resolve to `0 0 #0000`. Depth is photographic. Text is laid over the footage directly with no scrim visible in the measurements. + +## Shapes +Radii measured on elements: pill (2 elements, the round arrow buttons) and 1.5px (1 element). The stylesheet also lists 5px (4), 2px, 3px, 4px and 8px for player controls. `{rounded.pill}` is 9999px and `{rounded.xs}` is 1.5px. Nothing else is rounded; the film frame is square. + +## Components +**Round arrow buttons**: outlined circles with previous and next arrows, light `{colors.canvas}` strokes over the video, used as the slideshow controls. + +**Menu button**: a small light square with a hamburger icon at the upper right. + +**Nav label**: Chaps 12.75px in `{colors.canvas}`, no underline. + +**Slide title**: NBInternationalPro 500 at 52.5px in white over the footage. + +**Scrubber**: tick marks along the bottom with the active slide index. Its tick sizes are not measured. + +## Design System Architecture +No brand guideline or design system is linked from the homepage opened for this document (https://www.adambricker.com/), which also has no footer or credits. The de-facto system is a Tailwind base (`--tw-ring-color`, `--tw-shadow`) with a font-family variable set and a fluid sizing base of 4px (`--fluid-base-size`), plus a video player library whose focus variables (`--media-focus-box-shadow`, `--media-menu-item-focus-shadow`) show up in the stylesheet. Colour is limited to two neutrals, so there are no colour variables to document. + +Content and microcopy: project names are short titles of commercial and television work (the measured h2 values include "Hacks", "Papa Johns" and "Starbucks Chef's Table"), and the site also links a book titled "LA_NJ_CHI_" with underscores in the title, which matches the system-label feel of the camera metadata. The slide counter is written as "1 - 4", the clock as "21:32 PST (Los Angeles)", and the timecode as "00:00:13" counting up as the footage plays. Labels are terse nouns; there is no marketing copy and no paragraph text anywhere on the page (the bodyText role is empty in both the desktop and mobile passes). + +Page transitions follow the same camera idea: the large page label for the current section ("HOME") enters with a transform, and the numbered navigation (01 to 05) doubles as an index. The page measures 800px tall at desktop width, so everything is designed for one screen at a time. + +## Do's and Don'ts +- Do let full-bleed motion footage be the design; keep interface elements at the edges. +- Do use enormous uppercase NBInternationalPro for page labels and project names. +- Do use tiny serif labels for metadata like clocks and nav. +- Do show camera metadata (timecode, frame rate, ISO, aspect ratio) as part of the interface. +- Don't add coloured buttons or panels. +- Don't use the blue player focus ring as a brand colour. +- Don't add shadows or scrims that the measurements do not show. + +## Responsive Behavior +Measured at 390px: the page label drops to 51px / 37.74px, the project title to 36px / 43.2px at weight 400 (box 358px wide), the header nav to 13px Chaps and the header reduces to "Adam Bricker" and "View Work" (the clock and timecode text are not in the mobile nav text). The header is 347px wide and 16px high on mobile. Scrubber and control sizes at mobile were not measured. + +## Iteration Guide +1. Full-bleed footage as the whole page; text in `{colors.canvas}`. +2. Giant uppercase page label in NBInternationalPro 500 with -2.865px tracking; project titles at 52.5px. +3. Header and metadata in Chaps 12.75px. +4. Add camera metadata (timecode, FPS, ISO, aspect ratio) as the interface voice. +5. Circular outlined arrow buttons for the slideshow. +6. Hover, dark mode and other pages (Projects, Books, Photography, About) are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/adcker/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/adcker/DESIGN.md new file mode 100644 index 0000000..4be4a57 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/adcker/DESIGN.md @@ -0,0 +1,129 @@ +--- +version: alpha +name: Adcker +category: "Fashion & Apparel" +description: "Social media agency for beauty, fashion and wellness brands, measured at adcker.com: warm grey #efedea page with #191919 type, centred uppercase Kumbh Sans display lines at 165.6px with -8.28px tracking, small psl serif labels, an inline portrait inside the headline and square corners." +colors: + canvas: "#efedea" + ink: "#191919" + primary: "#efedea" + surface-alt: "#e3e1de" +typography: + display: + fontFamily: "\"Kumbh Sans\", sans-serif" + fontSize: 165.6px + fontWeight: 400 + lineHeight: 132.48px + letterSpacing: "-8.28px" + textTransform: uppercase + display-mobile: + fontFamily: "\"Kumbh Sans\", sans-serif" + fontSize: 46.8px + fontWeight: 400 + lineHeight: 36.504px + letterSpacing: "-2.34px" + textTransform: uppercase + body: + fontFamily: nhm, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 19.2px + heading: + fontFamily: "\"Kumbh Sans\", sans-serif" + fontSize: 153.6px + fontWeight: 400 + lineHeight: 119.808px + letterSpacing: "-7.68px" + textTransform: uppercase + subheading: + fontFamily: psl, serif + fontSize: 32.8px + fontWeight: 400 + lineHeight: 39.36px + letterSpacing: "-0.492px" +rounded: + none: 0px +spacing: + s1: 4px + s2: 8px + s3: 15px + s4: 19.2px + s5: 24px + s6: 25px + s7: 25.6px + s8: 28.16px + s9: 29.36px + s10: 30px +components: + link: + textColor: "{colors.canvas}" + typography: "{typography.body}" +--- + +## Overview +Adcker (title "Index - Adcker") is a social media agency that specialises in the beauty, fashion and wellness industries. Its menu labels are Index, Services ("What we do"), Our Work ("Projects"), About ("Who we are") and Contact ("Get in touch"); a "Showreel" label sits in the hero. The footer carries an email address, an Instagram handle, a 2025 copyright and a credit link "By Emele Collab". + +The capture is almost pure typography on a warm light-grey page. The logotype "adcker" sits at the top left in lowercase and a "Menu" label at the top right. In the centre, a stacked headline in huge uppercase letters reads "THE ART *( ) OF HACKING SOCIAL", where the gap inside the parentheses holds a small square photograph of a woman in orange-tinted sunglasses, and small serif labels flank the lines ("Showreel" beside the photo, "We're built for" beside "HACKING"). The next section is a giant "FOR BEAUTY" heading with a "Click me" arrow, then "Our services" and the sentence "Beauty on social media is a goldmine." in a serif. The page is a scroll experience in an inner scroller 5176px tall inside a 2400px document. + +## Colors +Two colours carry everything. `{colors.canvas}` (#efedea, a warm grey-beige, 5123 area units) is the page, and `{colors.ink}` (#191919, 2027 units, 1060 text weight) is the type and the dark sections. `{colors.surface-alt}` (#e3e1de, 236 units) is a slightly darker panel tone. Text on the dark sections is `{colors.canvas}` (400 weight), which is also what the extractor named `{colors.primary}`: the page has no filled button or accent colour, so the primary role is the light neutral used for light-on-dark text. + +The only chromatic element in the capture is the photograph. The Swiper carousel library's default `--swiper-theme-color: #007aff` and the Tailwind ring colour `rgba(59,130,246,.5)` appear in the stylesheet; they are library defaults, not brand colours, and are not declared. + +## Typography +Four custom families are loaded: Kumbh Sans (a 700 face is loaded, though the measured computed weight of the display text is 400), "psl" (a light serif, 300), "psr" (a regular serif, 400) and "nhm" (400, a neo-grotesque used for UI text). Names beyond these are not documented by the site. + +- `{typography.display}`: Kumbh Sans at 165.6px / 132.48px (line-height 0.8), -8.28px tracking, uppercase ("THE ART"). +- `{typography.heading}`: Kumbh Sans at 153.6px / 119.808px, -7.68px tracking, uppercase ("FOR BEAUTY", "OUR SERVICES"). +- `{typography.display-mobile}`: Kumbh Sans at 46.8px / 36.504px, -2.34px tracking, uppercase (mobile h2). +- `{typography.subheading}`: psl at 32.8px / 39.36px, -0.492px tracking, for sentences such as "Beauty on social media is a goldmine." +- `{typography.body}`: nhm at 16px / 19.2px, for the menu label and small UI. + +Letter-spacing is a consistent -0.05em on the display sizes, so the letters nearly touch. Font substitutes: all four faces are custom; use a geometric sans in bold for display, a high-contrast light serif for editorial lines and a neutral grotesque for labels. + +## Layout +The desktop frame is 1280px wide. Headline lines are centred, stacked at line-height 0.8, with small inline elements (photo thumbnail, serif labels, a "( )" and "*" glyphs) set between the words as if they were part of the sentence. Measured spacing steps are 4, 8, 15, 19.2, 24, 25, 25.6, 28.16, 29.36 and 30px; display lines have 15px vertical padding and 8px horizontal padding. The layout has no grid or cards in the capture: it is typographic and centred with large empty margins. + +## Elevation & Depth +There are no visible shadows. The stylesheet lists `1px 2px 9px 0 rgba(0, 0, 0, 0.65)` twice and Tailwind variable chains, but no role carries a shadow. Depth comes from scale contrast between tiny labels and gigantic headlines. + +## Shapes +No element radius was measured (the radius frequency table is empty), and body and headings report 0px, so `{rounded.none}` (0px) is the only radius token. The stylesheet lists one 4px radius, but where it is used was not measured. + +## Components +**Menu label**: "Menu" at the top right in nhm 16px, `{colors.ink}` on the light page; a "Close" label replaces it when open. In the mobile pass the extractor measured the Menu span at 16px with an `{colors.canvas}` background clip. + +**Inline photo**: a small square portrait placed inside the headline's parentheses, a flat rectangle with no radius. + +**Serif label**: small psl labels such as "Showreel" and "We're built for", set beside headline words. + +**Click-me link**: a left arrow with the label "Click me" next to the "FOR BEAUTY" heading. + +**Carousel**: Swiper navigation with a 44px navigation size variable (`--swiper-navigation-size: 44px`). + +## Design System Architecture +No brand guideline or design system is linked from the homepage opened for this document (https://adcker.com/); the footer credit points to emelecollab.com, which was not opened. The site runs on WordPress (a `--wp-internal-comment` variable is present) with a Tailwind layer (`--tw-*` variables) and Swiper. Colour is limited to the two neutrals, and type to four custom families, so the de-facto system is a handful of sizes (165.6px, 153.6px, 32.8px, 23.9px, 16px by character counts) and two colours. + +Voice and content: the agency speaks in declarative, confident statements ("The art of hacking social", "We're built for hacking social", "Beauty on social media is a goldmine. Trends explode, produc..."). Headline words are broken across lines and interleaved with punctuation glyphs (an asterisk, parentheses) so that the headline reads like a formatted code or editorial notation. A "Showreel" label is a text link that sits next to the thumbnail rather than a button. The pages for each industry are reached by a "Read more" link to the services page, and the contact label is phrased as "Get in touch". + +Typographic hierarchy has three levels only: gigantic uppercase sans for the claim, a mid-size light serif for explanatory sentences at 32.8px, and a 16px grotesque for the interface. Because the page has no cards, borders or rules, the hierarchy comes entirely from size, case and typeface contrast. When adding new sections, keep to these three levels. The large tracking pull (-8.28px at 165.6px and -7.68px at 153.6px) is applied only to the display sizes; the serif subheading uses a small -0.492px. + +## Do's and Don'ts +- Do set display lines in uppercase with -0.05em tracking and 0.8 line-height. +- Do place small serif labels and photographs inside the headline as if they were words. +- Do keep the palette to `{colors.canvas}` and `{colors.ink}`. +- Do centre stacked headlines on a quiet page. +- Don't add colour accents, rounded buttons or shadows. +- Don't use the Swiper blue or Tailwind ring blue as brand colours. +- Don't fill the page with body copy; use one serif sentence per section. + +## Responsive Behavior +Measured at 390px: the h2 "FOR BEAUTY" drops from 153.6px to 46.8px with 36.504px line-height and -2.34px tracking (box 390px wide, 301px tall), and the Menu label stays 16px / 19.2px. Character counts show the most-used sizes on mobile as 23.9px, 16px and 47.8px. No body text role was detected on mobile. Layout reflow of the services section was not measured. + +## Iteration Guide +1. Page `{colors.canvas}`, text `{colors.ink}`, no accent colour. +2. Display type: uppercase Kumbh Sans, -0.05em tracking, 0.8 line-height, centred. +3. Insert a small photo and serif labels into the headline. +4. Serif subheads at 32.8px for sentences; nhm 16px for UI. +5. Square corners everywhere. +6. Hover, dark sections other than the ink fill, and the menu overlay are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/adjust/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/adjust/DESIGN.md new file mode 100644 index 0000000..e382e5c --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/adjust/DESIGN.md @@ -0,0 +1,215 @@ +--- +version: alpha +name: Adjust +category: "Design Systems" +description: "Adjust's marketing site and Atlas design system — a deep navy (#04182b) hero giving way to white and pale-blue (#f2faff) sections, set in TT Norms Pro (48px bold display, 21px body), with a vivid #005ff7 blue and 48px pill-shaped buttons; the product UI in Atlas uses system fonts, a #255eee primary and 4-8px radii." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#005ff7" + on-primary: "#ffffff" + surface-pale-blue: "#f2faff" + surface-navy: "#04182b" + ink-periwinkle: "#8c97c4" + blue-deep: "#002a9e" + teal: "#09bb9f" + purple: "#a964f9" + atlas-primary: "#255eee" + atlas-primary-hover: "#1944c3" + atlas-primary-active: "#1237ae" + atlas-neutral-20: "#eceef4" + atlas-neutral-80: "#6e7492" + atlas-negative: "#f84d79" +typography: + display: + fontFamily: TTNormsPro, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", Sarabun, sans-serif + fontSize: 48px + fontWeight: 700 + lineHeight: 56px + letterSpacing: "-1px" + display-mobile: + fontFamily: TTNormsPro, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", Sarabun, sans-serif + fontSize: 30px + fontWeight: 700 + lineHeight: 38px + letterSpacing: "-1px" + heading: + fontFamily: TTNormsPro, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", Sarabun, sans-serif + fontSize: 36px + fontWeight: 700 + lineHeight: 45px + letterSpacing: "-0.17px" + subheading: + fontFamily: TTNormsPro, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", Sarabun, sans-serif + fontSize: 21px + fontWeight: 700 + lineHeight: 28px + body: + fontFamily: TTNormsPro, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", Sarabun, sans-serif + fontSize: 21px + fontWeight: 400 + lineHeight: 28px + button: + fontFamily: TTNormsPro, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", Sarabun, sans-serif + fontSize: 16px + fontWeight: 500 + lineHeight: 24px + button-secondary: + fontFamily: TTNormsPro, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", Sarabun, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + xs: 16px + pill: 9999px + atlas-small: 4px + atlas-large: 8px +spacing: + s1: 8px + s2: 12px + s3: 14px + s4: 16px + s5: 24px + s6: 32px + s7: 40px + s8: 48px + s9: 72px + s10: 96px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 14px 12px 14px 24px + height: 48px + borderColor: "{colors.primary}" + button-secondary: + textColor: "{colors.canvas}" + typography: "{typography.button-secondary}" + rounded: "{rounded.pill}" + padding: 12px + height: 44px + button-outline: + textColor: "{colors.surface-navy}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 14px 12px 14px 24px + borderColor: "{colors.surface-navy}" + nav: + backgroundColor: "{colors.surface-navy}" + textColor: "{colors.canvas}" + nav-link: + textColor: "{colors.canvas}" + typography: "{typography.button}" + card: + textColor: "{colors.ink}" + rounded: "{rounded.xs}" + boxShadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px +--- + +## Overview + +adjust.com presents a mobile-measurement and analytics suite as a confident enterprise product in a friendly, rounded visual language. The capture opens with a vivid blue announcement strip ("Out now! Shopping app insights report: 2026 edition. Get the latest data and benchmarks" with a close button), then a navy navigation bar with the ADJUST wordmark, centred text links (Products, Solutions, Why Adjust, Pricing, Resources), a search icon, "Log In" and an outlined white pill "Request a demo >". The hero is on #04182b: a centred 48px white headline "Accelerate your app's growth", two short lines of light supporting copy, a solid blue pill "Request a demo >" and a text link "Learn more >". Directly beneath, a large browser-window mock-up of the analytics dashboard (bar chart, cohort table, line chart) straddles the boundary between the navy hero and the white page. + +The next section is a centred 36px bold heading, "Everything you need in one measurement and analytics suite", followed by alternating two-column feature rows, each with an h3-style title, a short paragraph, an outlined navy "Learn more >" pill and a photograph with a floating UI card overlapping it (a chart widget, a chat prompt, a push notification, a masked password pill). Photos are people using phones and laptops, cropped to rounded rectangles of 16px radius. + +The voice is straightforward and benefit-led: "Attribution and optimization", "AI and automation", "Deep linking and user engagement", "Fraud prevention and security". The page alternates navy, white and a pale blue (#f2faff) section tint, with a lot of air between rows. + +## Colors + +- **Primary #005ff7** is the CTA blue (the stylesheet's `--blue-400`, rgb 0,95,247). It fills the "Request a demo" pill, the announcement strip and accent chips. +- **Surface-navy #04182b** is the hero, nav and dark-section background, and the outline colour of the "Learn more" pills on white. **Surface-pale-blue #f2faff** is the tinted section background. **Canvas #ffffff** is the main light surface; **ink #000000** is the body text colour (the most-read colour on light sections). +- **Ink-periwinkle #8c97c4** is a muted lavender-grey text colour measured on the page (its exact placement was not itemised). +- **Blue-deep #002a9e** (`--blue-500`), **teal #09bb9f** (`--green-400`) and **purple #a964f9** (`--purple-400`) come from the stylesheet's colour variables and appear in the dashboard illustrations (teal and blue bars, purple bars and lines); the stylesheet also defines green, purple and rose ramps (50 to 600) for illustration use. +- **Atlas colours.** Adjust's product design system, Atlas, publishes a different, more neutral-led palette: primary scale from #f3f7fe (5) through #255eee (80) and #1f51d9 (90) to #020c21 (160), and a neutral scale from #f9fafc (5) to #0b0d18 (160). Its primary button uses **atlas-primary #255eee**, hover **#1944c3**, active **#1237ae**; borders sit at **atlas-neutral-20 #eceef4**, secondary text at **atlas-neutral-80 #6e7492** and error states at **atlas-negative #f84d79** (https://atlas.adeven.com/docs/design-tokens/overview). Atlas's colour page limits the UI to Neutral, Primary, Negative, Positive and Warning families in 17 shades each plus a keyboard-focus colour (#1a62ff), and says to never mix chromatic families with each other, only with neutral, and to avoid transparency (https://atlas.adeven.com/docs/foundation/design-language/color). + +## Typography + +The marketing site uses TT Norms Pro (400, 500, 700, plus 300 loaded) with a CJK-aware fallback chain: Noto Sans JP, Noto Sans KR, Noto Sans SC and Sarabun (a Thai font), then generic sans-serif, which fits Adjust's multilingual audience. + +| Role | Size / line | Weight | Tracking | +|---|---|---|---| +| display (hero h1) | 48px / 56px | 700 | -1px | +| display-mobile | 30px / 38px | 700 | -1px | +| heading (section h2) | 36px / 45px | 700 | -0.17px | +| subheading (feature title) | 21px / 28px | 700 | none | +| body | 21px / 28px | 400 | none | +| button | 16px / 24px | 500 | none | +| button-secondary, nav | 16px / 24px | 400 | none | + +Body copy is large (21px, the most-read size by characters, followed by 18px, 16px and 14px), set in black on white. Titles are bold and tightly tracked; buttons are medium weight. + +Atlas typography is explicitly different: "all text is rendered in system fonts", San Francisco on Apple devices and Arial elsewhere, with a scale "limited to five font sizes (including line height and letter spacing) in three weights", sizes in multiples of 2px and line heights in multiples of 4px; normal weight for copy, medium for buttons and controls and bold for some headings (https://atlas.adeven.com/docs/foundation/design-language/typography). Its token `FontFamilySystem` is `BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Arial, sans-serif`. + +**Font substitutes.** TT Norms Pro is a commercial typeface. A geometric humanist sans such as Figtree, Plus Jakarta Sans or Inter is a reasonable stand-in; keep the 700 weight for headings. + +## Layout + +The hero is centred on a narrow column and the dashboard mock-up is a centred panel, the page then settles into a two-column feature grid with text on one side and a rounded image on the other, alternating left and right. Measured spacing values on the page are 8, 12, 14, 16, 24, 32, 40, 48, 72 and 96px. Atlas's own spacing rule is an 8px grid with 4px for higher precision, with every line height a multiple of 4px (https://atlas.adeven.com/docs/foundation/design-language/spacing), and its breakpoint tokens define gutters of 8, 12, 16 and 24px, margins of 16, 24 and 32px, and widths from 480px to 1400px (https://atlas.adeven.com/docs/design-tokens/overview). + +## Elevation & Depth + +The marketing site is largely flat. Cards carry the faintest shadow, `rgba(0,0,0,0.05) 0 1px 2px`, and depth comes from overlapping layers: the dashboard window crossing the hero edge, floating UI cards over photographs, and colour-block sections. Atlas defines five elevation levels, from `0 1px 4px 0 rgba(110, 116, 146, 0.25)` (level 1) to a three-layer `0 4px 32px 0 rgba(110, 116, 146, 0.15), 0 4px 56px 0 rgba(110, 116, 146, 0.15), 0 2px 8px 0 rgba(110, 116, 146, 0.1)` (level 5), all tinted with the neutral-80 hue (https://atlas.adeven.com/docs/design-tokens/overview). + +## Shapes + +Buttons are full pills (9999px). Images, panels and feature cards are rounded at 16px; the dashboard window is a rounded rectangle with a tab-bar header. Atlas's radius tokens are smaller and more utilitarian: 2px (x-small), 4px (small), 6px (medium), 8px (large) and 12px (x-large). Icons are simple line glyphs; arrows appear as a ">" chevron inside buttons. + +## Components + +**Primary button.** Solid #005ff7, white 16px medium label, pill, 48px tall, padding 14px 12px 14px 24px (the extra left padding makes room for a trailing chevron icon). Used for "Request a demo". + +**Outline button.** Transparent with a navy (#04182b) border, navy label, same geometry on white; on the navy hero the outline and label turn white ("Request a demo" in the nav, "Learn more"). Used for "Learn more >" on every feature row. + +**Text link button.** White "Learn more >" with a chevron beside the hero CTA, 16px regular. + +**Navigation.** Navy bar, white 16px regular links, search icon, "Log In", outlined pill CTA. + +**Announcement strip.** Full-width blue strip with 14 to 16px white text and a close icon. + +**Feature card/overlays.** White floating cards with a 16px radius, small text and a soft shadow overlapping imagery. + +**Atlas component library.** `@adjust/components`, hosted in a private GitHub npm registry. Its Button tokens define primary, secondary and tertiary variants with default, hover, active and disabled states, for example Primary default `#255eee` with a `1px solid #1f51d9` border and a `0 1px 1px 0 rgba(12, 42, 152, 0.16)` shadow; Secondary default `#f4f6f9` with a `1px solid #e0e2ec` border; inputs use a white fill with `1px solid #cdd0e0`, a focus border of `#255eee` (https://atlas.adeven.com/docs/design-tokens/overview). The docs describe hover as "the color becomes darker by two shades". + +## Design System Architecture + +Atlas is Adjust's design system, documented at https://atlas.adeven.com (a Docusaurus site, which I opened and read). The home page frames it as "a design system that can be used seamlessly across multiple teams and multiple Adjust products", organised into Design Foundation (Typeface, Principles, Color, 8px Grid, Iconography), a Component Library ("a collection of UI elements that can be used as building blocks"), Tokens, Patterns and Resources (a GitHub repository, Figma design-system and icon libraries, a Jira roadmap, a Mfe-Components link and a Slack channel). + +Documented facts: +- Seven design principles: Consistent, Scalable, Defensive, Trustworthy, Navigable, Objective, Accessible (https://atlas.adeven.com/docs/foundation/design-principles). +- Tokens are named in CamelCase for JavaScript and kebab-case for Sass, for example `ColorPrimary80` / `color-primary-80`, `BorderRadiusSmall` / `border-radius-small`, `ButtonPrimaryDefaultBackgroundColor`, `Elevation1BoxShadow`. +- Components ship as `@adjust/components` on the GitHub npm registry, which is private and needs authentication. +- The docs have separate Components, Design Tokens, Patterns, Copywriting and Contributing sections with release notes. + +Atlas is for Adjust's product UI, not the marketing site. They differ: the marketing site uses TT Norms Pro, a #005ff7 blue and pill buttons, while Atlas uses system fonts, a #255eee blue and 4 to 8px radii. The component docs I could open contain only a couple of component pages (Accordion, Measurer), and the extractor on the Accordion page returned the Docusaurus documentation chrome rather than Atlas components, so Atlas component values here come from the published token tables, not from measured demos. The marketing stylesheet exposes `--blue-*`, `--green-*`, `--purple-*` and other colour ramps as RGB triplets wrapped in `--rgba-*` variables; it is a separate Tailwind-based layer, and I did not verify any link between it and Atlas. + +## Do's and Don'ts + +Do +- Lead with a navy hero and a single solid blue pill CTA. +- Use outlined navy pills for secondary "Learn more" actions on white. +- Let imagery carry warmth: real people, rounded 16px crops, floating UI cards. +- Keep body text large (21px) and black; keep headings bold and tightly tracked. +- In product UI, follow Atlas: system fonts, 4 to 8px radii, the 8px grid. + +Don't +- Don't use transparency or invent new shades in the Atlas palette. +- Don't mix chromatic families (Atlas rule), for example yellow on blue. +- Don't use pills with square-cornered inputs in the same marketing form; keep the radius language consistent. +- Don't use colour only for meaning; negative and positive colours are reserved for error and success. +- Don't introduce font sizes outside the scale. + +## Responsive Behavior + +At the 390px mobile measurement the hero h1 reduces from 48px to 30px on a 38px line (tracking stays -1px). Atlas's breakpoint tokens are x-small 0px, small 480px, medium 720px, large 1200px and x-large 1400px, with margins of 16, 16, 24, 32 and 32px and gutters of 8, 12, 16, 24 and 24px respectively, with fixed widths of 1080px and 1272px at the two largest sizes (https://atlas.adeven.com/docs/design-tokens/overview). I did not capture a phone layout beyond the headline measurement, so how the feature rows collapse is not documented here. + +## Iteration Guide + +1. Set tokens: navy #04182b, white, pale blue #f2faff, blue #005ff7, black ink. +2. Build the hero: 48px/56px bold white headline, 21px light copy, one solid blue pill and one text link. +3. Add the dashboard mock-up overlapping the hero and body edge. +4. Create feature rows: 36px heading intro, then alternating 21px-body text with an outlined navy pill and a 16px-radius image. +5. Keep buttons 48px tall with a trailing chevron and 24px left padding. +6. For product screens, switch to Atlas tokens: system fonts, #255eee, 4 to 8px radii. +7. Run `node web/scripts/verify-designs.mjs --slug=adjust` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/adobe/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/adobe/DESIGN.md new file mode 100644 index 0000000..a63e10b --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/adobe/DESIGN.md @@ -0,0 +1,184 @@ +--- +version: alpha +name: Adobe +category: "Product & SaaS" +description: "Adobe.com marketing home: white #ffffff canvas with full-bleed dark product photography, pure black #000000 ink, Adobe Clean body type and Adobe Clean Display Black 900 headlines at 80px/76px with -3.2px tracking, #f3f3f3 rounded 16px cards, 999px pill buttons, and Adobe red #eb1000 reserved for the logo mark." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#000000" + on-primary: "#ffffff" + surface-card: "#f3f3f3" + surface-inverse: "#000000" + ink-muted: "#000000a3" + brand-red: "#eb1000" + hover-wash: "#e9e9e9" + focus-ring: "#507bff" +typography: + display: + fontFamily: "\"Adobe Clean Display Black\", \"Adobe Clean Display\", adobe-clean-display, \"Arial Bold Adjusted\", sans-serif" + fontSize: 80px + fontWeight: 900 + lineHeight: 76px + letterSpacing: "-3.2px" + display-mobile: + fontFamily: "\"Adobe Clean Display Black\", \"Adobe Clean Display\", adobe-clean-display, \"Arial Bold Adjusted\", sans-serif" + fontSize: 40px + fontWeight: 900 + lineHeight: 40px + heading: + fontFamily: "\"Adobe Clean Display Black\", \"Adobe Clean Display\", adobe-clean-display, \"Arial Bold Adjusted\", sans-serif" + fontSize: 56px + fontWeight: 900 + letterSpacing: "-1.68px" + heading-sm: + fontFamily: "\"Adobe Clean Display Black\", \"Adobe Clean Display\", adobe-clean-display, \"Arial Bold Adjusted\", sans-serif" + fontSize: 24px + fontWeight: 900 + letterSpacing: "-0.96px" + subheading: + fontFamily: "\"Adobe Clean\", adobe-clean, \"Trebuchet MS\", sans-serif" + fontSize: 16px + fontWeight: 700 + lineHeight: 20px + body: + fontFamily: "\"Adobe Clean\", adobe-clean, \"Trebuchet MS\", sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 24px + nav: + fontFamily: "\"Adobe Clean\", adobe-clean, \"Trebuchet MS\", sans-serif" + fontSize: 14px + fontWeight: 700 + lineHeight: 20px +rounded: + xs: 4px + sm: 5.01px + md: 8px + lg: 16px + xl: 32px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 4px + s4: 5px + s5: 6px + s6: 8px + s7: 12px + s8: 15px + s9: 16px + s10: 24px +components: + button-pill-light: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.nav}" + rounded: "{rounded.pill}" + padding: 6px 16px 8px + height: 40px + borderColor: "{colors.canvas}" + link-tile: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.nav}" + rounded: "{rounded.md}" + padding: 12px 12px 16px + nav: + textColor: "{colors.canvas}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + rounded: "{rounded.pill}" + card: + backgroundColor: "{colors.surface-card}" + textColor: "{colors.ink}" + rounded: "{rounded.lg}" + footer: + backgroundColor: "{colors.surface-inverse}" + textColor: "{colors.canvas}" + padding: 128px 0px 0px +--- + +# Adobe + +## Overview + +This file documents the adobe.com home page (measured at `https://www.adobe.com/`, page title "Adobe: Creative, marketing and document management solutions"). The page is a long, image-led marketing surface: a full-bleed hero carousel of dark, cinematic product photography ("Create at the highest level.", "All the best models, all in one place.", "Get work done. Faster.", "Orchestrate customer experiences with AI.") with white type set over it, followed by a white band of rounded grey product cards ("Everything you need to make anything."), an "Explore what's new." feature grid, a testimonial carousel, and finally a black product directory ("Tools that work for you.") that runs straight into a black footer. + +The brand voice of the system is monochrome. Black and white do almost all of the work; colour arrives through photography and through the small product app icons (Photoshop, Acrobat, Premiere, Firefly, Illustrator). The Adobe red `#eb1000` is measured as a background on only 4 units of area — it is the logo tile and the small red product-icon chips, not a CTA colour. Headlines are very heavy (Adobe Clean Display Black, weight 900) and tightly tracked; body copy is Adobe Clean at 20px/24px. Microcopy is short and imperative: "Free trial", "See all plans", "Learn more", "See all products", "Sign in". + +## Colors + +Measured text colours by character count are `#ffffff` (3302 — white type over the hero and the black lower half), `#000000` (1235) and `#000000a3` (288, black at 64% for secondary lines). Backgrounds by area are `#ffffff` (4029), `#000000` (3504), `#ffffff14` (756, a translucent white wash on dark tiles), `#f3f3f3` (726) and `#00000070` (80, a dark translucent glass behind the hero quick-links). + +- **canvas `#ffffff`** — the body background and the white middle band. +- **ink `#000000`** — all text on light surfaces; also `--s2a-color-content-default: #000` in the site's root variables. +- **primary `#000000` / on-primary `#ffffff`** — the generator found no saturated action colour; the site's own variables pair `--s2a-color-button-content-primary-solid-default: #fff` with black outlined content (`--s2a-color-button-content-primary-outlined-default: #000`), so the action language is black/white. +- **surface-card `#f3f3f3`** — the product cards in "Everything you need to make anything." +- **surface-inverse `#000000`** — the "Tools that work for you" band and the footer. +- **ink-muted `#000000a3`** — secondary lines; the root variable `--s2a-color-transparent-black-64` holds the same value. +- **brand-red `#eb1000`** — `--s2a-color-brand-adobe-red`, `--s2a-color-content-brand` and `--s2a-color-background-brand` all resolve to it. Use it for the logo mark only. +- **hover-wash `#e9e9e9`** — the background the "Sign in" button takes on keyboard focus. +- **focus-ring `#507bff`** — the measured 2px solid focus outline on "Sign in". + +## Typography + +Two families are loaded: `adobe-clean` (400, 400 italic, 700, 700 italic) and `adobe-clean-display` (900), plus an "Arial Bold Adjusted" 900 metric fallback. Adobe Clean carries 4071 measured characters; Adobe Clean Display Black carries 754. Adobe Clean is Adobe's proprietary typeface; the shipped fallbacks are "Trebuchet MS" for body and "Arial Bold Adjusted" for display, and those are the substitutes to use when Adobe Clean is unavailable. + +- **display** — 80px / 76px, weight 900, letter-spacing -3.2px. Hero headlines and the large "76%" statistic. +- **heading** — 56px, weight 900, -1.68px. Section heads such as "Everything you need to make anything." The 900 weight is measured: 900 accounts for exactly the characters set at 80px, 56px and 24px. +- **heading-sm** — 24px, weight 900, -0.96px. Card and feature titles. +- **subheading** — 16px / 20px, weight 700. Card titles like "Generate stunning content easily." +- **body** — 20px / 24px, weight 400. Hero supporting copy. +- **nav** — 14px / 20px, weight 700. Navigation, pill buttons, link tiles. + +The size distribution is 16px (2245 chars), 20px (1234), 14px (473), 56px (328), 24px (253), 80px (173), 12px (119). Weights: 400, 700, 900 only. + +## Layout + +The desktop capture is 1280px wide and 6908px tall. The extractor read the whole page as one media-filled band with content running from x=107 to x=1256 and up to 5 card columns. The site's variables declare `--grid-margin-width: 8.333%`, `--grid-gutter: 8px` and `--grid-max-width: 1920px`; 8.333% of 1280 is the measured ~107px left edge. Section spacing variables run from `--s2a-section-spacing-5xs: 8px` to `--s2a-section-spacing-5xl: 240px`, and the footer is padded 128px on top (`--s2a-section-spacing-4xl: 128px`). + +Gaps are dominated by 8px (101 occurrences) and 15px (39), then 16px, 12px, 32px and 24px. The most common padding is 24px. The hero quick-link row is five equal tiles; the product card row is a horizontal scroller of tall (583px) cards; the black product directory is a 3-column grid of dark tiles. + +## Elevation & Depth + +There is almost no shadow. The only measured box-shadow is `rgba(255, 255, 255, 0.11) 0px 0px 0px 1px inset` — a hairline inner stroke on the translucent hero quick-link tiles. Depth comes from layering instead: `#00000070` glass over photography, `#ffffff14` washes on the black band, and the light-to-dark section switch. Cards sit flat on `#f3f3f3` with no border. + +## Shapes + +Measured radii: 16px (26 elements — cards), 999px (12 — pills), 8px (5 — link tiles), 4px (5), 5.008px (1), 50% (1 — round carousel arrows) and one `32px 32px 0px 0px` top-rounded panel. The root variables expose a full radius scale (`--s2a-border-radius-2xs: 4px` up to `--s2a-border-radius-xl: 32px`, `--s2a-border-radius-round: 999px`). Rule: buttons are pills, small tiles 8px, cards 16px, large panels 32px. + +## Components + +- **button-pill-light** — "Free trial" / "Sign in": `#ffffff` fill, `#000000` text, 14px/700 Adobe Clean, 999px radius, padding 6px 16px 8px, 40px tall, 1px solid `#ffffff` border. Measured hover on "Free trial": background becomes `rgba(255, 255, 255, 0.64)`. +- **link-tile** — hero quick-links ("Creativity and design", "Content creation", "PDF and document essentials", "Adobe for Business", "Students and teachers"): 8px radius, padding 12px 12px 16px, 94px tall. At rest they are `rgba(0, 0, 0, 0.44)` glass with white text and the inset hairline; on hover they flip to white fill, black text and a black border. +- **card** — `#f3f3f3`, 16px radius, 249px wide by 583px tall, image on top, bold title and grey description below. On hover the measured card inverts to `#000000` fill with white text. +- **nav** — 80px header, 14px/700 links, Adobe logo left, "Sign in" pill right. +- **footer** — black, white text, 128px top padding, link columns grouped by audience ("For individuals & small business", "For medium & large business", "For organizations", "Support", "Contact", "Adobe"). + +## Design System Architecture + +Adobe's public design system is Spectrum (https://spectrum.adobe.com/), which describes itself as "the system behind Adobe experiences, a shared language for turning ideas into products", built from "foundations, tokens, patterns, and guidance". The adobe.com page itself ships a token layer with the `--s2a-` prefix (about 400 root variables: `--s2a-color-*`, `--s2a-font-size-*`, `--s2a-border-radius-*`, `--s2a-section-spacing-*`, `--s2a-typography-*`) and a separate `--feds-` prefix for the global navigation (`--feds-color-hamburger`, `--feds-gutter`). The variable names expose semantic layers (`content-default`, `background-brand`, `button-background-primary-transparent-on-light-hover`) above primitive scales (`blue-800`, `red-1200`, `gray-50`). The Spectrum site does not document what the `s2a` prefix stands for, so this file does not expand it. + +## Do's and Don'ts + +- Do keep the page black and white; let photography and product icons provide colour. +- Do set headlines in Adobe Clean Display Black 900 with negative tracking (-3.2px at 80px, -1.68px at 56px). +- Do use 999px pills for buttons and 16px for cards. +- Do invert on hover: grey card to black, glass tile to white. +- Don't use `#eb1000` as a button or link colour; it is the brand mark. +- Don't add drop shadows; the only measured shadow is a 1px inset hairline. +- Don't set body copy in the display face. + +## Responsive Behavior + +Measured at 390px: the hero headline drops from 80px/76px to 40px/40px (letter-spacing normal), hero body copy from 20px/24px to 16px/20px. The mobile header shows 1 visible link and a menu toggle labelled "Navigation menu" (desktop: 2 visible header links and a "Products" toggle). Mobile font sizes by character count are 16px, 14px, 32px, 18px, 40px and 12px — so the 56px section heads measure 32px and the 24px titles measure 18px. On mobile the extractor's primary CTA was a hero link tile ("Content creation") at 8px radius, 46px tall. Grid column counts per breakpoint were not measured. + +## Iteration Guide + +1. Start with `canvas`, `ink` and `surface-inverse`; most sections are one of the two. +2. Build the hero as a full-bleed photo with white display type and a white pill CTA. +3. Use `card` for product rows and `link-tile` for quick-links, with the measured hover inversions. +4. Check every headline uses weight 900 and the measured tracking. +5. Place `brand-red` only in the logo; if a red feels needed elsewhere, re-measure a page that uses it first. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/adovasio/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/adovasio/DESIGN.md new file mode 100644 index 0000000..d245f8a --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/adovasio/DESIGN.md @@ -0,0 +1,148 @@ +--- +version: alpha +name: Adovasio +category: "Portfolio" +description: "Italian luxury wedding photography studio measured at adovasio.it: warm cream #f5f2ed page, near-black #232323 band, white panels, a 192px light BerlingskeSerif 300 headline over full-bleed photography, Inter labels at 18px, 5px-radius buttons and asymmetric portrait layouts." +colors: + canvas: "#f5f2ed" + ink: "#232323" + primary: "#ffffff" + on-primary: "#232323" + ink-muted: "#23232380" + nav-bg: "#dfdcd6" +typography: + display: + fontFamily: BerlingskeSerif, serif + fontSize: 192px + fontWeight: 300 + lineHeight: 225.6px + display-mobile: + fontFamily: BerlingskeSerif, serif + fontSize: 58.5px + fontWeight: 300 + lineHeight: 68.7375px + body: + fontFamily: BerlingskeSerif, serif + fontSize: 35px + fontWeight: 300 + lineHeight: 40.25px + button: + fontFamily: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 19.8px + nav: + fontFamily: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 20px + fontWeight: 400 + lineHeight: 22px + textTransform: uppercase +rounded: + xs: 5px + sm: 22px + md: 30px +spacing: + s1: 1px + s2: 6px + s3: 8px + s4: 10px + s5: 12px + s6: 15px + s7: 16px + s8: 17.84px + s9: 20px + s10: 24px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + height: 65px + link: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.button}" + nav: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.primary}" + nav-link: + textColor: "{colors.primary}" + typography: "{typography.nav}" + padding: 0px 10px + transform: matrix(1, 0, 0, 1, -91.5, -22) + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" +--- + +## Overview +Adovasio is an Italian luxury wedding photography studio (page title "Italy Luxury Wedding Photographer | Tuscany, Lake Como & Amalfi Coast"). The fetched homepage describes the style as "elegant, editorial, and Italian flair". Navigation is Portfolio, About and Contact, with a "Check availability" button; the footer repeats those links, adds Instagram and Pinterest, shows "2026 © Adovasio" and credits Koki Kiko (koki-kiko.com). + +The capture opens on a full-bleed wedding photograph (a couple kissing among flowers) with an enormous white serif headline spanning several lines ("Weddings that never fade"), the wordmark "ADOVASIO" centred in thin white capitals, and a "Menu" label with a three-line icon at the top right. A white panel then rises over the photo with a "Featured Weddings" pill and an underlined serif heading, with two portrait photographs set at different heights in an asymmetric layout. A dark band with a rounded white "Check availability" pill follows, then a project row ("Emily & David" and "See Project") and a cream section with the names spaced across the page. A cookie dialog appears over the hero in the capture; it is a consent control and is not documented as brand UI. + +## Colors +The page is `{colors.canvas}` (#f5f2ed), a warm cream, covering 17458 area units; `{colors.ink}` (#232323) fills 2355 units as the dark band, and white `{colors.primary}` (#ffffff, 1403 units) is the panel and button fill. Text is `{colors.ink}` (256 weight), white on photographs (160), cream (28) on dark and `{colors.ink-muted}` (#23232380, 21). `{colors.nav-bg}` (#dfdcd6) is the measured navigation panel tone. `{colors.on-primary}` is #232323 for text on the white button. + +The measured hover on "Check availability" moves its text from #232323 to #f5f2ed, with its border from white to rgb(140, 139, 136). No saturated accent colour exists; flower and landscape photography supply all colour. + +## Typography +Two families: BerlingskeSerif (weight 300, a light serif) for headlines and body, and Inter (variable 100 to 900) for UI labels and navigation. + +- `{typography.display}`: BerlingskeSerif 300 at 192px / 225.6px, white on photography. Mobile: 58.5px / 68.7375px. +- `{typography.body}`: BerlingskeSerif 300 at 35px / 40.25px ("Your story deserves timeless images."). Mobile body: 26px / 29.9px. +- `{typography.button}`: Inter 400 at 18px / 19.8px (16px / 17.6px on the mobile pass). +- `{typography.nav}`: Inter 400 at 20px / 22px, uppercase. + +Serif sizes are large even for body copy, and headings and body use the same weight (300), so contrast comes from size. Font substitutes: BerlingskeSerif is a commercial face; use a light transitional or didone serif for headings; Inter is open source. + +## Layout +Desktop width is 1280px with a page height of 20068px, long scroll. Layout is asymmetric and gallery-like: portraits sit at different heights beside a centred title, project captions are pinned to the left and right edges ("Emily" at the left, "&" in the centre, "David" at the right). The measured spacing steps are 1, 6, 8, 10, 12, 15, 16, 17.84, 20 and 24px; the body paragraph box is 298px wide on desktop. The header is a transparent overlay with a centred wordmark. + +## Elevation & Depth +No shadows were measured. Depth comes from stacked panels: a white panel overlaps the hero photograph and a dark band follows, and photographs sit directly on flat fills. Do not add shadows. + +## Shapes +The CSS corpus has one dominant radius, 4.8px (473 uses), plus 8px, 4px, 30px, 22px and 6.4px. The measured element radii are 22px (3), 30px (1) and 5px (1). In tokens, `{rounded.xs}` is 5px (the "Featured Weddings" button), `{rounded.sm}` 22px and `{rounded.md}` 30px; the "Check availability" button in the capture is a pill but its radius was measured as 0px on the link wrapper, so no pill token is declared. + +## Components +**Primary button** (`button-primary`): white fill, `{colors.ink}` Inter 18px label with a superscript count ("Featured Weddings 11"), 5px radius, 65px tall; 340px wide on mobile. + +**Check availability**: pill-shaped in the capture (cream text on a dark band after hover); hover colour measured as described above. + +**Menu**: the word "Menu" with a three-line icon, white on photography. + +**Link panel** (`link`): cream background, `{colors.ink}` text, Inter 18px. + +**Footer**: cream background, ink text, links Portfolio, About, Contact, Instagram, Pinterest. + +## Design System Architecture +No brand guideline or design system is linked from the homepage opened for this document (https://www.adovasio.it/); the footer credits Koki Kiko, whose site was not opened. The shipped CSS exposes only animation variables (`--power1-out`, `--power3-out` as `linear()` easing functions, `--size: 1728`, `--svh`, `--lvh`), so there is no token layer for colour or type; the de-facto system is two neutrals plus white, one serif and one sans. + +Imagery and art direction: photography is editorial wedding work shot outdoors, in gardens and on terraces, with soft natural light and a pastel palette of whites, greens and blush. The hero photograph carries motion (petals in the air in the capture), and the white headline is split into words placed at different positions: "Weddings" near the top, "that" at the left edge, and further words lower on the picture, so the headline wraps around the couple instead of covering them. Featured portraits are shown small, to leave open white space around each image. + +Microcopy is brief and personal: "Your story deserves timeless images. Reach out to see if you..." addresses the couple directly, project captions are first names joined by an ampersand ("Emily & David"), and the project link reads "See Project". The navigation button reads "Check availability" rather than "Contact us", which sets the tone of a booking enquiry. A numeric superscript on the "Featured Weddings" button shows how many featured weddings there are (11 at measurement). + +Motion is part of the visual identity in the measurements: the h1 span has a translateY transform of 157.283px at measurement time on desktop (and none on mobile), the Menu button's opacity was measured at 0.999885 before hover and 1 after, and the stylesheet defines `linear()` easing curves named `--power1-out` and `--power3-out`. The motion recording was skipped for this document (--no-motion), so durations are not documented. + +The footer repeats the main links as plain text and adds Instagram and Pinterest, so social links are text labels and not icon buttons. The copyright line reads "2026 © Adovasio" and the credit line shows a studio logo with a link. + +## Do's and Don'ts +- Do open with a full-bleed photograph and a white light-weight serif headline several hundred pixels wide. +- Do keep palette to cream, near-black and white. +- Do use asymmetric placement for portraits and pinned captions. +- Do set UI labels in Inter and all editorial text in the light serif. +- Don't add colour accents, shadows or heavy weights. +- Don't treat the cookie dialog buttons as brand buttons. +- Don't centre every image; stagger them. + +## Responsive Behavior +Measured at 390px: the h1 becomes 58.5px / 68.7375px (box 101px wide for the word "that"), body text 26px / 29.9px (box 360px wide), the "Featured Weddings" button is 340px wide and 65px tall with 16px type, and the header at 390px is 55px tall, white background, with the items Portfolio, About, Contact and "Check availability". Image grid reflow was not measured. + +## Iteration Guide +1. Cream `{colors.canvas}` page, `{colors.ink}` text, white panels. +2. Hero photograph full bleed with a 192px light serif headline in white. +3. Body copy in BerlingskeSerif 300 at 35px; labels in Inter. +4. Buttons: white 65px with 5px radius for primary, pill for the call to action on dark. +5. Pin names and captions to the edges; stagger portraits. +6. Dark mode and other hover states are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/advance-aviation-jet/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/advance-aviation-jet/DESIGN.md new file mode 100644 index 0000000..6c53654 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/advance-aviation-jet/DESIGN.md @@ -0,0 +1,132 @@ +--- +version: alpha +name: Advance Aviation +category: "Thai Brands" +description: "Thai private jet and helicopter charter operator measured at advanceaviation.co.th: light grey #eeeeee page, uppercase Kanit 300 and 400 type at 14px to 28px, orange #ff6600 accents with a #ff6413 hover, square photo tiles with thin white labels and a grey photographic footer band." +colors: + canvas: "#eeeeee" + page-body: "#dddddd" + ink: "#4f4f4f" + primary: "#ff6600" + primary-hover: "#ff6413" + surface-overlay: "#71706f" + surface-dark: "#3a3a3a" + on-dark: "#ffffff" + ink-muted: "#6d6d6d" + accent-amber: "#ff9900" + ink-nav: "#4c4c4c" + footer-text: "#7a7a7a" +typography: + display: + fontFamily: Kanit + fontSize: 28px + fontWeight: 400 + lineHeight: 30.8px + textTransform: uppercase + heading: + fontFamily: Kanit + fontSize: 18px + fontWeight: 300 + lineHeight: 19.8px + textTransform: uppercase + subheading: + fontFamily: Kanit + fontSize: 24px + fontWeight: 400 + lineHeight: 26.4px + textTransform: uppercase + body: + fontFamily: Kanit + fontSize: 14px + fontWeight: 400 + lineHeight: 25.2px + textTransform: uppercase +rounded: + xs: 4px + sm: 5px +spacing: + s1: 4px + s2: 10px + s3: 15px + s4: 20px + s5: 50px + s6: 60px +components: + nav: + textColor: "{colors.ink-muted}" + nav-link: + textColor: "{colors.ink-muted}" + typography: "{typography.body}" + padding: 0px 10px + footer: + textColor: "{colors.footer-text}" +--- + +## Overview +Advance Aviation (page title "Advance Aviation - Private Jet Thailand Service", lang en-GB) is a private aviation company offering Gulfstream private jet charter and VIP helicopter charter in Thailand, with helicopter bases in Bangkok, Phuket and Chiang Mai. The main menu is Home, About Us, Helicopter, Private Jet, Photo Gallery, Contact Us and Our Blog, with submenus (Founder's Message and History; Bangkok, Phuket and Chiang Mai Bases, Our Services and FAQs; Private Jet Charter, Aircraft Fleet and Inflight Services; Private Jet Photo and Helicopter Photo) and a language switcher (English, Thai). The footer has share buttons, a 2026 copyright, a theme credit to MageeWP Themes and a "TOP" button, and a 24-hour call centre block with phone numbers for each base. + +The capture is a hospitality-style photo page. A tall full-width hero photograph of a fruit plate and fork, softly blurred, carries the black-and-orange "ADVANCE AVIATION" logo at the top left and uppercase grey navigation links across the top right. Below it, on a light grey page, six square photo tiles in two columns (Private Jet, Helicopter, About Us, Our Blog, Gallery, Contact Us) show passengers, a helicopter, a cabin table, a bridge aerial, a couple in a jet cabin and pilots, each with a light uppercase thin-weight label at the bottom and a thin orange underline. A grey photo band at the bottom shows the quote "IT'S BEEN SAID THAT \" LIFE IS A JOURNEY, NOT A DESTINATION\"... SHOULDN'T BOTH MATTER?!" with a paragraph on comfort and the call centre numbers, whose "HELICOPTER CHARTER:" label is orange. A consent scrim was hidden during measurement (the extraction records "scrim pbOverlay"), so it is not documented. + +## Colors +The page is `{colors.canvas}` (#eeeeee, 1709 area units) with `{colors.page-body}` (#dddddd) as the body background, `{colors.surface-overlay}` (#71706f, 501) for the translucent grey over the footer photo, `{colors.surface-dark}` (#3a3a3a, 266) and a darker #353535 (79). Text is white (`{colors.on-dark}`, 546 weight, over photos), `{colors.ink}` (#4f4f4f, 141), `{colors.primary}` (#ff6600, 101), `{colors.ink-muted}` (#6d6d6d, 64, the nav link colour), `{colors.accent-amber}` (#ff9900, 38), `{colors.ink-nav}` (#4c4c4c) and `{colors.footer-text}` (#7a7a7a). + +`{colors.primary}` is the orange of the logo mark, label underlines and the "HELICOPTER CHARTER:" label. Nav links hover from #6d6d6d to rgb(255, 100, 19) (`{colors.primary-hover}`). The stylesheet's social share buttons carry platform colours (#0866ff, #1d9bf0, #e60023, #12af0a, #00c300) as one-unit areas; they belong to the share icons and are not declared. + +## Typography +Kanit (300 and 400) is the single family, in uppercase everywhere. Font Awesome 5 and dashicons supply icons; the stylesheet also references Roboto and a "selfFont, Open Sans" stack for the mobile toggle. + +- `{typography.display}`: Kanit 400 at 28px / 30.8px, uppercase (the h1 slot, which is empty text with white colour). +- `{typography.subheading}`: Kanit 400 at 24px / 26.4px, uppercase, for the quote heading. +- `{typography.heading}`: Kanit 300 at 18px / 19.8px, uppercase, for "SHARE". +- `{typography.body}`: Kanit 400 at 14px / 25.2px, uppercase. The nav links use the same size with a 70px line-height. + +There is no size above 28px in the measured roles; the tile labels in the capture are larger, but their size was not isolated. Font substitutes: Kanit is a Google Font with Thai support, so no substitute is needed. + +## Layout +Desktop width 1280px, page height 2796px, with `consentOverlaysHidden`. The menu bar is a transparent 70px-high overlay on the hero. The tile grid is two columns of square images in a centred column, with small gaps between tiles; the content column for headings and the footer text is 1140px wide. Spacing steps are 4, 10, 15, 20, 50 and 60px. The footer is a two-column band: quote at the left, call centre at the right. + +## Elevation & Depth +Role-level shadows are none. The stylesheet has inset shadows such as `inset 0px 0px 3px 1px #0ff` and `0 1px 1px rgba(0,0,0,.8)` from its plugins, and none is seen on the tiles. Depth comes from photographs and a translucent grey overlay on the footer image. Do not add shadows. + +## Shapes +Element radii measured: 4px (7 elements) and 5px (6), exposed as `{rounded.xs}` and `{rounded.sm}`. The CSS corpus has many radii, dominated by 0px (240 uses), 2px (105) and 4px (53), from the theme and plugins. The photo tiles are square-cornered in the capture. + +## Components +**Navigation**: uppercase Kanit 14px links in `{colors.ink-muted}`, padding 0px 10px, 70px high, with chevrons for dropdowns; hover turns text orange. + +**Image tile**: square photograph with an uppercase thin label near the bottom, white, with an orange underline. + +**Contact block**: white uppercase text with an orange label ("HELICOPTER CHARTER:") and telephone numbers per base. + +**Footer**: grey overlay on a photograph, text `{colors.footer-text}` for the share heading and white for the quote. + +**Language switcher**: flag icon with a chevron in the header. + +## Design System Architecture +No brand guideline or design system is linked from the homepage opened for this document (https://www.advanceaviation.co.th/); the footer credits the MageeWP Themes WordPress theme, and the shipped CSS has no root variables (the extraction found none). The de-facto system is therefore a WordPress theme with Font Awesome, dashicons and share-button plugins, one typeface (Kanit), grey neutrals and one orange. Tokens are derived directly from computed styles. + +Voice and content: the copy is service-led and in English uppercase ("ADVANCE JET HOLDS TIME FOR TRAVEL AS A VALUED INVESTMENT AND WE SURROUND OUR PASSENGERS WITH COMFORT EVERY STEP OF THE WAY"). The quote used as a footer heading frames the product as an experience: "It's been said that life is a journey, not a destination... shouldn't both matter?!". The tile labels are plain section names (Private Jet, Helicopter, About Us, Our Blog, Gallery, Contact Us), so the home page works as a visual menu to those sections rather than as a long scroll. + +Imagery: the photographs show passengers and crew in real settings (a father holding a child beside a jet door, pilots in headsets, a couple opening a gift box in a cabin), food and glassware in softly blurred focus, and an aerial view of a bridge. They are warm-toned and shallow-focus, which makes the grey page and thin white labels recede. The logo is a black and orange wordmark "ADVANCE AVIATION" with an oversized "A". + +The contact block lists the helicopter charter numbers for Bangkok, Phuket and Chiang Mai and a private jet charter number at Don Muang, with a "CALL CENTER (24 HOURS SERVICE)" heading, so telephone numbers are shown as plain uppercase text lines rather than as buttons. + +## Do's and Don'ts +- Do set all text in uppercase Kanit, using weight 300 for small headings. +- Do let photography carry the page and label tiles with thin white uppercase text and an orange underline. +- Do reserve orange `{colors.primary}` for brand marks, labels and hover. +- Do keep neutrals grey (#eeeeee, #dddddd, #4f4f4f). +- Don't use the social platform colours as brand colours. +- Don't add drop shadows to tiles. +- Don't document the cookie scrim or the TOP button as brand UI. + +## Responsive Behavior +Measured at 390px: the h1 stays 28px / 30.8px (360px box), "SHARE" stays 18px / 19.8px, body text is 14px / 25.2px in white with a 360px wide box, and the header shows a "Toggle navigation" control in #cccccc instead of the menu. Tile columns and image sizing on mobile were not measured. + +## Iteration Guide +1. Page `{colors.canvas}` with body `{colors.page-body}`, text `{colors.ink}`. +2. Everything uppercase Kanit; 14px for body and nav, 24px to 28px for headings. +3. Full-bleed hospitality photography for the hero; square photo tiles with thin white labels and orange underlines. +4. Orange `{colors.primary}` for brand accents and hover; amber `{colors.accent-amber}` for secondary highlights. +5. Footer as a grey overlay on a photograph. +6. Dark mode and tablet breakpoints are not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/advice/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/advice/DESIGN.md new file mode 100644 index 0000000..be319f7 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/advice/DESIGN.md @@ -0,0 +1,175 @@ +--- +version: alpha +name: Advice IT +category: "Thai Brands" +description: "Advice (advice.co.th), a Thai computer and electronics retailer: DBHeaventRounded type at 24px body, brand blue #00569c actions on a #f8f8f8 page, white cards with 16px radius and soft 0.08 shadow, dense banner and product-rail layout." +colors: + canvas: "#f9fafb" + page-body: "#f8f8f8" + page-largest: "#ffffff" + ink: "#6b7280" + primary: "#00569c" + on-primary: "#e7f4fb" + surface-2: "#f5f7fa" + ink-3: "#000000" + ink-4: "#374151" + ink-6: "#9ca3af" + hairline: "#e5e7eb" + link: "#212529" +typography: + display: + fontFamily: DBHeaventRounded + fontSize: 20px + fontWeight: 400 + lineHeight: 30px + display-mobile: + fontFamily: DBHeaventRounded + fontSize: 19.2px + fontWeight: 500 + lineHeight: 10px + subheading: + fontFamily: DBHeaventRounded + fontSize: 22px + fontWeight: 500 + lineHeight: 20px + body: + fontFamily: DBHeaventRounded + fontSize: 24px + fontWeight: 400 + lineHeight: 32px + nav: + fontFamily: DBHeaventRounded + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + xs: 4px + sm: 8px + md: 10px + lg: 16px + xl: 20px + 2xl: 32px + 3xl: 40px + 4xl: 99px + none: 0px + pill: 9999px +spacing: + s1: 2px + s2: 3px + s3: 3.5px + s4: 4px + s5: 5px + s6: 5.45px + s7: 6px + s8: 8px + s9: 10px + s10: 12px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.display}" + rounded: "{rounded.none}" + height: 40px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.page-largest}" + typography: "{typography.nav}" + padding: 4px 20px 4px 24px + height: 35px + link: + textColor: "{colors.link}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + nav: + textColor: "{colors.page-largest}" + rounded: "{rounded.none}" + nav-link: + textColor: "{colors.link}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + text-input: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.link}" + typography: "{typography.nav}" + padding: 0px 30px + height: 40px + boxShadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset + card: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.link}" + rounded: "{rounded.lg}" + padding: 16px 32px 20px + boxShadow: rgba(0, 0, 0, 0.08) 0px 2px 16px 0px + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.page-largest}" + rounded: "{rounded.none}" +--- + +# Advice IT (แอดไวซ์) + +## Overview +Advice is a Thai retailer of computers and electronics. Its home page at advice.co.th is titled around "ready-to-use assembled computers at prices you'll like, with a quality guarantee" and sells mobile phones, notebooks, PC builds, computer hardware and solar-cell services, plus an "Advice Plus+" member program. The page measured at 1280px is a dense retail storefront: a blue header carrying the logo and a pill search field, a category menu, a stacked hero banner area, promotional tiles, a flash-sale band with a countdown, and product-card rails. The capture shows a promotional popup floating over the banner area; the popup, the cookie banner and the round chat mascot at the page edge are not brand UI and are not documented here as tokens. + +The visual voice is loud and promotional: full-bleed illustrated banners in purple, magenta, red and blue, many product photographs on white cards, and prices set in bold. Around this noise the interface chrome is restrained. The page background is `{colors.page-body}` (#f8f8f8) with white (`{colors.page-largest}`, #ffffff) cards, one brand blue (`{colors.primary}`, #00569c) for actions, and gray text. The entire interface is set in a single Thai typeface, DBHeaventRounded, at weights 400, 500 and 600. + +## Colors +- **Primary blue** `{colors.primary}` #00569c is the fill of the measured primary button ("เข้าสู่ระบบ", login) and of the search button; its label color is `{colors.on-primary}` #e7f4fb on the login button, and #ffffff on the search button. +- **Canvas** `{colors.canvas}` #f9fafb and the page body `{colors.page-body}` #f8f8f8; the largest painted area is white `{colors.page-largest}` #ffffff, used for cards and panels. +- **Surface tint** `{colors.surface-2}` #f5f7fa appears as the second most used background after white. +- **Ink**: `{colors.ink}` #6b7280 is the most-read text color (9,391 characters measured), then #00569c itself as text (4,123 characters), pure black `{colors.ink-3}` #000000, `{colors.ink-4}` #374151 for darker body copy and `{colors.ink-6}` #9ca3af for muted text. Link text measured as `{colors.link}` #212529. +- **Hairline** `{colors.hairline}` #e5e7eb is the measured border color. +- Measured accent backgrounds that appear in promo badges and chart segments include #cd1201 (red), #48903b, #7ecb70 and #ade5a3 (greens), and #d1a2ef (lavender). They are used for sale tags and the claim-time bar chart, not for interface chrome. +- The measured stylesheet also exposes Bootstrap variables such as `--bs-orange: #fd7e14`; these are framework defaults and are not brand colors. + +## Typography +One family: DBHeaventRounded (loaded weights 400, 500, 600; Font Awesome 6 Free is loaded for icons). Thai text in this face is set unusually large for its x-height, so sizes look big on paper but read as normal body text. + +- `display` 20px / 400 / line-height 30px: the h1-role element measured by the extractor (the login button label). +- `subheading` 22px / 500 / line-height 20px: section headings such as "ช้อปสินค้า". +- `body` 24px / 400 / line-height 32px: the measured body paragraph (the claim-time statistic "ระยะเวลาเคลมเฉลี่ย (ปลีก) 9 วัน", colored #0d95da). +- `nav` 16px / 400 / line-height 24px: menu links, search placeholder and small controls. +- `display-mobile` 19.2px / 500 / line-height 10px: the heading measured on the 390px mobile pass. + +No font substitute is needed for Thai web use if DBHeaventRounded is licensed; the measured font stack contains no fallback list beyond the loaded face. + +## Layout +The page is 1280px wide at measurement with a scroll height of 6,861px. Content sits in a centered column with banners spanning most of the width: a large hero banner, a row of rounded service shortcuts, a wide notice banner, a 2x2 grid of promo banners, a brand-logo carousel card beside a claim-statistics card, then product rails of cards in rows of four or five. Measured spacing steps are 2, 3, 3.5, 4, 5, 5.45, 6, 8, 10 and 12px at the small end, which matches the tight, dense product-card grid. Product cards carry a brand logo at top right, a title, a spec line, a struck-through list price, a bold price and a warranty chip. + +## Elevation & Depth +Shadows are few. The card shadow measured is `rgba(0, 0, 0, 0.08) 0px 2px 16px 0px`, soft and wide. The text input uses an inset shadow `rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset`. Other measured shadows are a small two-layer shadow (`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px`) and a heavy `rgba(0, 0, 0, 0.35) 0px 5px 15px 0px`; the heavy one belongs to the floating popup layer. Depth otherwise comes from white cards on the off-white page. + +## Shapes +Radii measured by frequency: 16px (247 elements, `{rounded.lg}`), 8px (109, `{rounded.sm}`), 120px pill ends (64), 20px (48, `{rounded.xl}`), 999px (15), 10px (14, `{rounded.md}`), plus 32px, 40px, 4px and 99px in single digits. Cards and banners use 16px; small tags use 8px; the search field and chips use fully rounded ends. The measured login button has a 0px radius (`{rounded.none}`). + +## Components +- **button-primary**: background `{colors.primary}`, text `{colors.on-primary}`, `{typography.display}`, radius `{rounded.none}`, height 40px. +- **button-secondary** (search): background `{colors.primary}`, text `{colors.page-largest}`, `{typography.nav}`, padding 4px 20px 4px 24px, height 35px; measured with a 100px radius in the extraction. +- **text-input**: white background, `{colors.link}` text, `{typography.nav}`, padding 0px 30px, height 40px, inset shadow above. +- **card**: white background, radius 16px, padding 16px 32px 20px, shadow above. +- **nav-link** and **link**: `{colors.link}` #212529 text at `{typography.nav}`, radius 0px. +- **footer** and **nav**: white-text tokens measured on dark or blue surfaces. +Hover states: none recorded (the hover list is empty). + +## Design System Architecture +No public design system or brand-guideline page was found: the home page content shows no link to one. The de-facto system is visible in shipped CSS: the root variables include Bootstrap 5 tokens (`--bs-*`), Vue-based component variables (`--vc-*`, `--dp-*` for a date picker), SweetAlert2 (`--swal2-*`) and Toastify (`--toastify-*`). The site is therefore assembled from Bootstrap utilities and third-party widgets with a custom blue and the DBHeaventRounded face layered on top, and Tailwind-style gray values (#6b7280, #374151, #9ca3af, #e5e7eb) in the text and border palette. + +## Do's and Don'ts +- Do use #00569c for the primary actions and keep the label light (#e7f4fb or #ffffff). +- Do set Thai text in DBHeaventRounded at the measured sizes; body copy is 24px, not 16px. +- Do keep cards white with a 16px radius and the 0.08 alpha shadow. +- Do give products a struck-through list price beside a bold sale price, as the cards show. +- Don't use Bootstrap defaults (#0d6efd, #fd7e14) as brand colors. +- Don't copy the popup, cookie banner or chat mascot into the system. +- Don't add heavy shadows to ordinary cards; the 0.35 alpha shadow belongs to the popup layer only. + +## Responsive Behavior +Measured: the mobile pass at 390px recorded the heading style as 19.2px, weight 500, in DBHeaventRounded (`display-mobile`). The desktop page was measured at 1280px. Mobile layout, breakpoints, navigation collapse and grid column counts were not measured. + +## Iteration Guide +1. Start from the tokens: primary #00569c, page #f8f8f8, cards #ffffff, ink #6b7280. +2. Keep the typeface single-family; vary only weight (400, 500, 600) and size. +3. Build promotions as full-width illustrated banners with 16px corners; keep chrome neutral. +4. Test Thai line height: body 24px needs 32px leading, small copy 16px needs 24px. +5. Re-measure with `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=advice --force --no-motion` after any site redesign, and rerun the gate with `node web/scripts/verify-designs.mjs --slug=advice`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/adyen/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/adyen/DESIGN.md new file mode 100644 index 0000000..db5e958 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/adyen/DESIGN.md @@ -0,0 +1,197 @@ +--- +version: alpha +name: Adyen +category: "Fintech & Crypto" +description: "Adyen home page (adyen.com), measured — white #ffffff and deep navy #001222 sections, Adyen green #00d16a buttons with navy text and 6px radius, warm grey #f6f5f4 and #f4f5f6 surfaces, the custom Adyen sans at 32px/484 for headlines and 16px/500 for UI, AdyenMono 12px uppercase labels, no shadows." +colors: + canvas: "#ffffff" + page-largest: "#001222" + ink: "#001222" + primary: "#00d16a" + on-primary: "#001222" + surface-warm: "#f6f5f4" + surface-cool: "#f4f5f6" + ink-muted: "#636f7a" + ink-on-dark-muted: "#ffffff8c" + ink-on-dark-subtle: "#ffffff85" + hairline: "#d1d5d8" + chip-bg: "#ffffff0d" + card-dark: "#2f3e4d" +typography: + display: + fontFamily: Adyen, Helvetica, Arial, sans-serif + fontSize: 32px + fontWeight: 484 + lineHeight: 37.76px + display-mobile: + fontFamily: Adyen, Helvetica, Arial, sans-serif + fontSize: 30px + fontWeight: 484 + lineHeight: 35.4px + body: + fontFamily: Adyen, Helvetica, Arial, sans-serif + fontSize: 20px + fontWeight: 496 + lineHeight: 26px + button: + fontFamily: Adyen, Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 500 + lineHeight: 21.44px + nav: + fontFamily: Adyen, Helvetica, Arial, sans-serif + fontSize: 16.1459px + fontWeight: 400 + lineHeight: 26.1459px + label-mono: + fontFamily: AdyenMono, monospace + fontSize: 12px + fontWeight: 500 + lineHeight: 13.44px + textTransform: uppercase +rounded: + xs: 5px + sm: 6px +spacing: + s1: 1px + s2: 2px + s3: 2.5px + s4: 6px + s5: 7px + s6: 8px + s7: 12px + s8: 14px + s9: 15px + s10: 16px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 0px 16px + height: 48px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 0px 16px + height: 48px + announcement-chip: + backgroundColor: "{colors.chip-bg}" + textColor: "{colors.primary}" + typography: "{typography.label-mono}" + rounded: "{rounded.sm}" + nav: + textColor: "{colors.canvas}" + rounded: "{rounded.sm}" + nav-link: + textColor: "{colors.canvas}" + typography: "{typography.nav}" + rounded: "{rounded.sm}" + card-dark: + backgroundColor: "{colors.card-dark}" + textColor: "{colors.canvas}" + rounded: "{rounded.sm}" + padding: 1px + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.ink-on-dark-subtle}" +--- + +# Adyen + +## Overview + +This file describes the Adyen home page at `https://www.adyen.com/` (title: "Adyen: Fintech platform for enterprises - Adyen"), measured at 1,280px and 390px. + +The page alternates bright white sections and a deep navy that reads almost black, with Adyen green used sparingly for the primary action and small signals. A transparent header sits over the hero: the green Adyen wordmark at the left, links Products, Businesses we serve, About, Resources, Pricing, then search and account icons and a solid green "Contact us" button at the far right. The 1,080px hero is a dimmed photograph of a hand holding a phone near a payment terminal, with a centred dark announcement chip in monospace capitals ("THE STATE OF SMB PAYMENTS 2026 — GET THE INSIGHTS"), the white headline "Fintech you can bank on", a two-line grey subline and a green "Talk to our team" button; a strip of customer logos (Toast, OpenAI, lululemon, Oracle, Spotify, Uniqlo) runs along the bottom edge. Below, the white section "Run your business with confidence." uses a two-tone headline — the first sentence in navy, the continuation in grey — followed by staggered light-grey cards ("Compliance you can trust", "Enterprise-grade reliability"). A long navy section, "Control every aspect of your money", shows thin-line 3D wireframe illustrations (a globe, stacked layers) and a dark product card list. Then come an industries accordion beside a terminal photograph, a "Global scale. Local expertise." statistics table with very large figures (€1,400,000,000,009, 99.999%, 150+, 200+, 29) and monospace labels, a warm-grey customer stories grid (Prada, Vagaro, Nord Security, L'Occitane, Meta, Rocksolid), a full-width green call-out "If you're building for scale, there's no alternative", and a navy footer. + +The voice is short, declarative and confident. The two-tone headline device — a navy statement followed by a grey qualifier — repeats in every section. + +## Colors + +- **Canvas `#ffffff`** — white sections (`--color-black-000`, aliased `--main-surface`). +- **Navy `#001222`** — `--color-black` / `--color-black-3200`. It is both the largest background by area (6,670 units: the product section and footer) and the main text colour on white (1,433 characters). Here it is the `ink` and `page-largest` token. +- **Primary `#00d16a`** — Adyen green, `--color-green` / `--color-green-900`. Fills "Contact us", "Talk to our team" and the closing call-out band (1,630 area units), and colours monospace labels on dark ground. +- **On-primary `#001222`** — button text on green is navy, not white. +- **Surface warm `#f6f5f4`** — the customer stories section background (2,338 units). +- **Surface cool `#f4f5f6`** — `--color-black-100`, the light cards under "Run your business with confidence". +- **Ink muted `#636f7a`** — `--color-black-1800`, the grey continuation in two-tone headlines and secondary text. +- **Ink on dark muted `#ffffff8c`** and **ink on dark subtle `#ffffff85`** — translucent white for sublines on the hero and footer links. +- **Hairline `#d1d5d8`** — `--color-black-500`, the row dividers in the statistics table and accordion. +- **Chip background `#ffffff0d`** — the 5% white fill of the hero announcement chip. +- **Card dark `#2f3e4d`** — `--color-black-2500`, the product card in the navy section. + +Other declared greens: `--color-green-1400: #00a152` and `--color-green-1800: #007f41` (success feedback). + +## Typography + +Two custom fonts are loaded, both variable from 400 to 700: **Adyen** (2,315 characters) and **AdyenMono** (299 characters), declared as `--font-mono: "AdyenMono", monospace`. The variable axis lets the site use non-standard weights; measured weights are 500, 484, 400, 496, 452 and 436. + +- **Display — Adyen 32px / 484 / 37.76px.** Every section headline ("Fintech you can bank on", "Run your business with confidence."). 32px carries 487 characters. +- **Body — Adyen 20px / 496 / 26px.** The hero subline and section intros. +- **Button — Adyen 16px / 500 / 21.44px.** 16px is the most common size (1,329 characters). +- **Nav — Adyen 16.1459px / 400 / 26.1459px.** +- **Label mono — AdyenMono 12px / 500 / 13.44px, uppercase.** The announcement chip, card eyebrows, statistic labels and footer column heads. + +The statistic figures are set at 80px (35 characters) and 64px (52 characters); weights 436 and 452 occur on exactly those character counts. No letter-spacing is applied anywhere. The CSS sets `--base-font-size: .9375rem` (15px). + +**Substitute:** Adyen and AdyenMono are proprietary. The CSS falls back to Helvetica and Arial for the sans and to the system monospace for the mono. + +## Layout + +The desktop page measured 10,967px tall. Bands: the hero media (1,080px, content between x=376 and x=904, centred), a white section (3,222px), a media band, a short white band, and a navy section (5,850px, two columns) that holds the product story, industries, statistics, stories and footer regions as rendered in the capture. Gaps are dominated by 24px (93) and 6px (90), then 8px (52) and 12px; large spacers of 48px, 70px, 192px and 362px separate content blocks. Section paddings include 24px (57), 240px, 192px, 144px and 64px — the page is very airy, with headlines often floating alone in a wide white field. Desktop headers show 4 visible links plus a "Products" menu trigger. + +## Elevation & Depth + +No box-shadows were measured. Depth comes from colour — navy versus white versus warm grey — and from the dimmed hero photograph with translucent navy overlays (`#00284973`, `#00244480`, `#00000072`). The wireframe illustrations in the navy section are drawn with thin white lines, keeping everything flat. + +## Shapes + +Two radii: 6px (66 elements; `--radius-m`) and 5px (3; `--base-radius`). Buttons, chips, cards, nav items and inputs all use 6px. The CSS also derives `--radius-s: calc(6px/2)` and `--radius-l: calc(6px*4)`. Light content cards in the white section read square in the capture. + +## Components + +- **Primary button** — green `#00d16a` fill, navy `#001222` Adyen 16px/500 label, 48px tall, `0 16px` padding, 6px radius. "Contact us" (header) and "Talk to our team" (hero) are identical. Measured focus: a `1px solid` near-white outline offset by 4px. +- **Announcement chip** — 5% white fill, 6px radius, AdyenMono 12px uppercase in green followed by a short rule and a white second label. +- **Navigation** — white Adyen 16px links over the hero. Measured hover turns the link text navy (`#001222`/`#041626`). +- **Dark product card** — `#2f3e4d`, white text, monospace eyebrow ("INTELLIGENT MONEY MOVEMENT"), title, link and a list of sub-items divided by lines. +- **Statistics row** — monospace uppercase label at the left, very large figure right-aligned, `#d1d5d8` hairline between rows. +- **Accordion** — industry rows with plus icons, the open row showing a short paragraph and "See more →". +- **Footer** — navy, AdyenMono 12px uppercase headings, translucent white links. + +## Design System Architecture + +Adyen's press kit at `https://www.adyen.com/press-and-media/presskit` (linked from `https://www.adyen.com/press-and-media`) publishes logo assets through a brand portal (`brand.adyen.com`) and these logo rules: "Our logo is always placed two Adyen a's away from the edge"; "On white backgrounds, the Adyen logo is placed in green"; "When the logo is used on solid green, gradient or image, it should appear in white"; "On dark backgrounds, our logo is always placed in green"; "In most applications our logo is placed bottom left." It does not publish colour values or typeface names, and the brand portal's landing page returned only a title to the fetcher. The shipped CSS shows the token architecture: numbered palette ramps (`--color-black-100` … `--color-black-3200`, `--color-green-900/1400/1800`, red and yellow ramps), opacity companions (`--color-white-1800-opacity: 39.3%`), semantic aliases (`--main-surface`, `--feedback-success-primary`, `--feedback-error-primary`), radius tokens derived from one 6px base, font-weight tokens (normal 400, medium 500, semibold 600, bold 700) and Tailwind `--tw-*` utilities. + +## Do's and Don'ts + +**Do** +- Use green `#00d16a` with navy text for the primary action. +- Write headlines as two tones: a navy statement, then a `#636f7a` continuation. +- Use AdyenMono uppercase for small labels and eyebrows. +- Alternate white, navy `#001222` and warm grey `#f6f5f4` sections with lots of empty space. +- Keep radii at 6px and avoid shadows. +- Place the logo in green on white or dark backgrounds, in white on green or images (press kit rule). + +**Don't** +- Don't put white text on the green button. +- Don't use bold weights; headlines sit near 484. +- Don't use pure black; navy `#001222` is the dark. +- Don't add drop shadows or large radii. + +## Responsive Behavior + +Measured at 390px: the hero headline is Adyen 30px/484/35.4px, and every section headline drops from 32px to 30px. The primary button shrinks to 40px tall with 15px text and `0 12px` padding. The header shows 1 visible link and a menu toggle labelled "Open Menu". Mobile font sizes by frequency: 15px, 30px, 18.75px, 11.25px, 22.5px, 45px, 16px and 52.5px — the body and labels scale to 15px and 11.25px, and the statistics to 45px and 52.5px. Recorded bands: hero media, grey photo bands, a white single-column section, the navy section (1,597px) and a long white section (3,824px). The widest mobile grid measured five columns (the logo strip). Breakpoint widths: not measured. + +## Iteration Guide + +1. Start with white and navy `#001222` sections and the Adyen sans at 16px/500. +2. Add a transparent header with white links and a green 48px "Contact us" button. +3. Build a dimmed full-bleed hero with a monospace chip, a 32px/484 white headline and a green button. +4. Write each section headline in two tones and give it a wide empty margin. +5. Use 6px-radius cards: `#f4f5f6` on white, `#2f3e4d` on navy. +6. Present numbers as large right-aligned figures with monospace labels and hairlines. +7. End with a full-width green call-out and a navy footer. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aei/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aei/DESIGN.md new file mode 100644 index 0000000..e4a3df7 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aei/DESIGN.md @@ -0,0 +1,178 @@ +--- +version: alpha +name: AI Energy +category: "Thai Brands" +description: "AI Energy (aienergy.co.th), a Thai palm-based biodiesel, glycerin and cooking-oil producer, uses white #ffffff pages with #ebebeb bands, warm grey text #685d5d, orange #f57d00 for the contact button, green #008c39 and #006e2d for hover and footer, and IBM Plex Sans with Kanit at 50px/600 hero and 14px/300 body." +colors: + canvas: "#ebebeb" + page-body: "#ffffff" + ink: "#685d5d" + primary: "#f57d00" + on-primary: "#ffffff" + surface-light: "#f8f8f8" + ink-nav: "#666666" + ink-strong: "#333333" + ink-black: "#000000" + ink-faint: "#aaaaaa" + hairline: "#f2f2f2" + green: "#008c39" + green-deep: "#006e2d" +typography: + display: + fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif" + fontSize: 50px + fontWeight: 600 + lineHeight: 55px + textTransform: uppercase + display-mobile: + fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif" + fontSize: 44px + fontWeight: 600 + lineHeight: 48.4px + textTransform: uppercase + heading: + fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif" + fontSize: 32px + fontWeight: 300 + lineHeight: 35.2px + textTransform: uppercase + body: + fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif" + fontSize: 14px + fontWeight: 300 + lineHeight: 23.8px + button: + fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif" + fontSize: 12px + fontWeight: 100 + lineHeight: 17.1429px + textTransform: uppercase + nav: + fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 20px + textTransform: capitalize +rounded: + xs: 2.5px + sm: 5px + md: 6px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 3px + s4: 4px + s5: 5px + s6: 8px + s7: 10px + s8: 12px + s9: 15px + s10: 18px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.page-body}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 10px + height: 39px + button-secondary: + backgroundColor: "{colors.green}" + textColor: "{colors.page-body}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 10px + height: 39px + link: + textColor: "{colors.ink-nav}" + typography: "{typography.nav}" + nav: + textColor: "{colors.ink-nav}" + nav-link: + textColor: "{colors.ink-nav}" + typography: "{typography.nav}" + card: + backgroundColor: "{colors.page-body}" + textColor: "{colors.ink-strong}" + rounded: "{rounded.sm}" + padding: 40px 40px 100px + boxShadow: rgba(0, 0, 0, 0.576) 2px 2px 6px 0px + footer: + backgroundColor: "{colors.green-deep}" + textColor: "{colors.page-body}" +--- + +## Overview + +AI Energy (บริษัท เอไอ เอนเนอร์จี จำกัด (มหาชน), `https://www.aienergy.co.th/th`, title "AI Energy", 288 visible elements, 2774px tall) describes itself on the home page as a producer of renewable energy in the form of biodiesel made from palm oil, using a distillation and biodiesel-production system, with products for sale in Thailand and abroad. Its product navigation lists biodiesel, refined glycerin, cooking oil and by-products; the "ผลิตภัณฑ์ของเรา" (Our products) band shows four white product cards with bottles and palm fruit photographed on white. + +The page opens on a slider photograph of the plant's tiered tower and white storage tanks under a blue sky, with the greeting "ยินดีต้อนรับ เอไอ เอนเนอร์จี" (Welcome, AI Energy) in 50px uppercase white type and green slider dots. Below, an "เกี่ยวกับเรา" (About us) section sets three slanted tiles at left (a green production-capacity tile with a globe and the figure 1,150,000, an orange business-groups tile and a green responsibility tile) against a text column and a grey "ข้อมูลเพิ่มเติมเกี่ยวกับเรา" button at right. A grey "ข้อมูลสำหรับนักลงทุน" band follows with three document cards (latest news, financial statements Q2 2569, annual report Form 56-1 One Report) each with a coloured top line and a stock photograph, then a "ข่าวสาร" news row of SET-notification thumbnails and a row of line icons. + +A cookie consent bar (`cookieconsent`) was hidden by the extractor; it is not brand UI. + +## Colors + +Background area by weight: white #ffffff (713), grey #ebebeb (608), #f8f8f8 (304), dark green #006e2d (244), darker green #005b25 (46), grey #666666 (41), green #008c39 (6). Text by characters: warm grey #685d5d (698), white (649), grey #666666 (359), #333333 (199), black (54), light grey #aaaaaa (33), green #29b82a (9). + +- **canvas #ebebeb** is the grey section band (the investor-information band) and **page-body #ffffff** is the white page and card colour; **surface-light #f8f8f8** is the pale band behind the product cards. +- **ink #685d5d**: paragraph text; **ink-nav #666666**: navigation and links; **ink-strong #333333**, **ink-black #000000**, **ink-faint #aaaaaa** for headings, emphasis and dates. +- **primary #f57d00**: the orange of the "ติดต่อเรา" (Contact us) button, white text; the same orange fills the "กลุ่มธุรกิจ" tile in the capture. +- **green #008c39**: secondary button fill ("แผนที่"), hover fill of the grey About button; **green-deep #006e2d**: footer background and the large green tiles. +- **hairline #f2f2f2**: a measured border colour. + +The hover of "ข้อมูลเพิ่มเติมเกี่ยวกับเรา" was recorded as a change from fill rgb(102, 102, 102) with white text to fill rgb(0, 140, 57) with text rgb(51, 51, 51). + +## Typography + +**IBM Plex Sans** (1936 characters) with **Kanit** (65) and sans-serif fallbacks. Weights measured: 300 (877 characters), 500 (441), 100 (194), 200 (189), 600 (124), 400 (110), 700 (66); the very light 100 and 200 weights are used on small button and tile captions. Roles: hero h1 600 50px/55px uppercase (mobile 44px/48.4px); section heading 300 32px/35.2px uppercase ("ผลิตภัณฑ์ของเรา"); body 300 14px/23.8px; button 100 12px/17.1429px uppercase; navigation 400 14px/20px capitalised, header text 13px. Most-read sizes: 14px (882), 11px (310), 13px (242), 18px (189), 10.5px (93), 12px (80), 50px (64). The fonts are named in the site's CSS; no substitute is declared beyond sans-serif. + +## Layout + +Desktop viewport 1280px. The header is 89px tall and 1200px wide: logo "AIE" at left, a language switch (EN | TH) at top right and a single row of Thai labels (เกี่ยวกับเรา, กลุ่มธุรกิจ, ผลิตภัณฑ์, นักลงทุนสัมพันธ์, การกำกับดูแลกิจการที่ดี, การพัฒนาความยั่งยืน, สมัครงาน, ติดต่อเรา). The full menu lists vision and mission, history, directors, products, financial information, 56-1 One Report, shareholder meetings, press room, governance charters, supply-chain policies and human-rights policy. Content is centred in a 1200px container with four-up product cards, a two-column About section and a three-column document-card row. Paddings by frequency: 20px (18), 40px (15), 25px (14), 12px (11), 18px (7), 5px (7), 30px (6). The footer is 187px tall. + +## Elevation & Depth + +Measured shadows: `rgba(0, 0, 0, 0.576) 2px 2px 6px 0px` (4 elements, the cards), `rgba(0, 0, 0, 0.15) 0px 1px 1.5px 0px` (3) and `rgba(0, 0, 0, 0.3) 2px 2px 5px 0px` (1). Cards lift off the grey and pale bands with a noticeable bottom-right shadow; slanted tiles are flat colour. + +## Shapes + +Measured radii: `0% 0px 0px` (7 elements), 6px (7), 100% (4), 5px (4) and 2.5px (4). Buttons are 2.5px, cards 5px, 6px is used on other boxed elements, 100% on four elements whose shape the extraction did not isolate. The About tiles are parallelograms (slanted edges) rather than rectangles, and the tabs on document cards are angled. + +## Components + +- **Contact button:** "ติดต่อเรา", orange #f57d00, white Plex 100 weight 12px uppercase, padding 10px, 39px tall, 2.5px radius. +- **Map button:** "แผนที่", green #008c39 with the same type and shape. +- **About button:** grey #666666 with white text, 45px tall, changing to green on hover. +- **Product cards:** white, 5px radius, shadow `rgba(0, 0, 0, 0.576) 2px 2px 6px 0px`, product photo, product name and a grey "ข้อมูลเพิ่มเติม >" tab at the bottom. +- **Document cards:** white, a coloured top line (orange, green, red), a line icon at top right, a photograph and a "ดาวน์โหลด" tab. +- **Slanted tiles:** green #006e2d and orange tiles with a white heading and small caption. +- **Footer:** #006e2d background, white 18px text, 187px tall, company name and address. +- The cookie bar is not a component. + +## Design System Architecture + +No public design system or brand-guidelines page was found: the opened page https://www.aienergy.co.th/th links to company, product, investor, governance, sustainability, careers and contact pages only. The extraction recorded no root CSS variables (rootVars is empty), so the system is plain class-based CSS: the palette above lives directly in component rules, with IBM Plex Sans and Kanit as the fonts named in the CSS. + +## Do's and Don'ts + +- Do use white cards on grey (#ebebeb) and pale (#f8f8f8) bands with the noticeable bottom-right shadow. +- Do reserve orange #f57d00 for the contact action and green #008c39 / #006e2d for hover, tiles and footer. +- Do set body text in IBM Plex Sans 300 at 14px/23.8px in warm grey #685d5d. +- Do show a coloured top rule on each investor document card. +- Don't use heavy weights for small captions; the page uses weight 100 and 200 there. +- Don't document the cookie bar as brand UI. +- Don't round buttons beyond 2.5px. + +## Responsive Behavior + +Mobile was measured at 390px. The hero h1 drops from 50px to 44px (line 48.4px) in a 263px by 97px block; body text shrinks from 14px to 12.32px/20.944px in a 354px by 188px block; the contact button measures 10.56px text with 8.8px padding; the header is 354px by 69px and records only "EN TH". Mobile size frequencies: 12.32px (817 characters), 11.44px (264), 15.84px (189), 9.68px (181), 9.24px (93), 10.56px (80); each of these equals the desktop size multiplied by 0.88 (14px to 12.32px, 13px to 11.44px, 18px to 15.84px, 11px to 9.68px, 10.5px to 9.24px, 12px to 10.56px). Menu behaviour, column reflow and card widths at narrow viewports were not measured. + +## Iteration Guide + +1. Start from page-body #ffffff, canvas #ebebeb, ink #685d5d, primary #f57d00, green #008c39, footer #006e2d. +2. Type: IBM Plex Sans 300 for body and light headings, 600 for the hero; Kanit as the second family. +3. Buttons are 2.5px radius, 10px padding, uppercase 12px; orange for contact, green for secondary, grey-to-green hover for text buttons. +4. Cards: white, 5px radius, strong bottom-right shadow, tab-shaped action bar. +5. Hero with a slider photograph and a 50px uppercase white greeting. +6. Measure new components before adding tokens; states not recorded stay "not measured". diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aesop/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aesop/DESIGN.md new file mode 100644 index 0000000..5b90f48 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aesop/DESIGN.md @@ -0,0 +1,613 @@ +--- +version: alpha +name: Aesop +category: "Beauty & Personal Care" +description: Aesop (Aēsop) storefront design language measured from aesop.com — a warm cream canvas "#fffef2" with graphite ink "#333333", SuisseIntl grotesque for almost everything (14px body, SuisseIntl-Medium 14px buttons) and Zapf-Humanist 31px for editorial section titles, hard 0px corners on every button, input and tile, 48px-tall solid graphite CTAs that darken to "#252525" on hover, a "#252525" footer, and amber-glass product photography on near-white tiles. + +colors: + primary: "#333333" + primary-hover: "#252525" + canvas: "#fffef2" + ink: "#333333" + ink-muted: "#666666" + ink-strong: "#000000" + on-dark: "#fffef2" + on-primary: "#fffef2" + surface-alt: "#f6f5e8" + footer: "#252525" + badge: "#945c26" + hairline: "#33333333" + chip-border: "#bcbbb4" + disabled-bg: "#f3f3f3" + disabled-text: "#999999" + white: "#ffffff" + +typography: + display: + fontFamily: "Zapf-Humanist, sans-serif" + fontSize: 31px + fontWeight: 400 + lineHeight: 41.23px + display-mobile: + fontFamily: "Zapf-Humanist, sans-serif" + fontSize: 25px + fontWeight: 400 + display-sm: + fontFamily: "Zapf-Humanist, sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 31.92px + hero-title: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 30px + fontWeight: 400 + lineHeight: 39.9px + hero-title-mobile: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 31.92px + page-title: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 30px + tab: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 31.2px + footer-heading: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 18px + fontWeight: 700 + lineHeight: 27px + lead: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + price: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 19.2px + body: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 22.4px + body-tile: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + product-name: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 14px + fontWeight: 700 + lineHeight: 15.12px + button: + fontFamily: "SuisseIntl-Medium, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + footer-link: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 16.8px + nav: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 19.2px + utility: + fontFamily: "SuisseIntl, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 18px + breadcrumb: + fontFamily: "SuisseIntl-Medium, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 16.8px + +rounded: + none: 0px + chip: 4px + circle: "50%" + +spacing: + xxs: 4px + xs: 8px + sm: 12px + md: 16px + lg: 24px + xl: 32px + xxl: 40px + button-y-top: 13px + button-y-bottom: 12px + tab-y: 15px + tab-x: 35px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 13px 24px 12px + height: 48px + border: 1px solid transparent + transition: background-color 0.25s ease-out, color 0.25s ease-out + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-primary-disabled: + backgroundColor: "{colors.disabled-bg}" + textColor: "{colors.disabled-text}" + button-secondary: + backgroundColor: transparent + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 13px 24px 12px + height: 48px + border: "1px solid {colors.hairline}" + button-secondary-light: + backgroundColor: transparent + textColor: "{colors.on-dark}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 13px 24px 12px + height: 48px + border: "1px solid {colors.on-dark}" + link: + textColor: "{colors.ink}" + typography: "{typography.breadcrumb}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.nav}" + footer: + backgroundColor: "{colors.footer}" + textColor: "{colors.on-dark}" + typography: "{typography.footer-link}" + footer-heading: + textColor: "{colors.on-dark}" + typography: "{typography.footer-heading}" + borderBottom: "1px solid {colors.on-dark}" + padding: 0px 0px 15px + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.body}" + rounded: "{rounded.none}" + border: "1px solid {colors.hairline}" + padding: 0px 16px + height: 40px + select: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.body}" + rounded: "{rounded.none}" + border: "1px solid {colors.hairline}" + padding: 0px 30px 0px 20px + height: 40px + filter-chip: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.nav}" + rounded: "{rounded.chip}" + border: "1px solid {colors.chip-border}" + padding: 4px 8px 4px 4px + height: 27px + filter-chip-hover: + backgroundColor: "{colors.surface-alt}" + border: "1px solid {colors.footer}" + filter-chip-selected: + backgroundColor: "{colors.surface-alt}" + border: "2px solid {colors.footer}" + height: 29px + variant-option: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.none}" + border: "1px solid {colors.hairline}" + padding: 8px + height: 54px + variant-option-hover: + border: "1px solid {colors.footer}" + variant-option-selected: + border: "2px solid {colors.ink-strong}" + tab: + backgroundColor: transparent + textColor: "{colors.ink-muted}" + typography: "{typography.tab}" + padding: 15px 35px + height: 61px + tab-active: + textColor: "{colors.ink-strong}" + borderBottom: "2px solid {colors.ink-strong}" + product-tile: + backgroundColor: transparent + rounded: "{rounded.none}" + nameTypography: "{typography.product-name}" + descriptionColor: "{colors.ink-muted}" + descriptionTypography: "{typography.body-tile}" + priceTypography: "{typography.price}" + badge: + textColor: "{colors.badge}" + typography: "{typography.utility}" +--- + +## Overview + +Aesop's website is an apothecary counter rendered in pixels. The page opens on a warm, faintly yellow +cream (`#fffef2`) rather than white, and nearly every word is set in SuisseIntl at small sizes in a +soft graphite (`#333333`) instead of black. There is no gradient, no tinted brand color, and no +rounded corner on any primary control: buttons, inputs, selects, variant pickers and product tiles +all measure `0px` radius. The only curves on the page are the circular media controls (`50%`) and the +small `4px` filter chips on category pages. + +The capture shows a quiet three-tier header (utility row — "Stores", "Customer service" on the left, +"Email sign up", "Account", "My cart" on the right — the serif Aēsop wordmark centered, and a single +row of category links underneath with a "Search..." field divided off by a vertical rule). Below it a +full-bleed cinematic hero carries a small "Introducing" label, a 30px SuisseIntl title in cream, one +line of 16px copy and a ghost button outlined in cream. The rest of the homepage alternates between +centered editorial sections ("Curated Sets", "A scent—and story—for all") whose titles switch to the +humanist Zapf-Humanist face at 31px, and product carousels of amber-glass bottles photographed on +near-white tiles. + +The brand's voice is literary and unhurried: "Each fragrance a fable. Each fable a question.", +"A woody, earthy, smoky duo to cleanse and hydrate the hands". Microcopy is sentence case, never +shouted, never exclamatory. Product badges read like library labels — "Online exclusive", +"New addition", "Beloved formulation", "Daily essential" — set in 12px in a russet brown (`#945c26`). + +Density is low and rhythm is generous. Large photographic blocks (hero, 50/50 image-and-text splits) +punctuate long stretches of cream whitespace; product grids run three or four across with wide +gutters; every commerce tile ends in the same full-width graphite button. + +**Key characteristics:** +- Cream canvas `#fffef2`, graphite ink `#333333`, muted copy `#666666`, dark footer `#252525` +- SuisseIntl for UI and copy; Zapf-Humanist only for editorial section titles (31px desktop, 25px mobile) +- Weight contrast comes from family switching (SuisseIntl-Medium for buttons) and 700 for product names +- Every button 48px tall with `13px 24px 12px` padding and `0px` radius +- Hover is a value shift, never a lift: `#333333` → `#252525`, `0.25s ease-out` +- No drop shadows on content; depth comes from photography and full-bleed dark bands + +## Colors + +All values below were measured on aesop.com (homepage, a category page and a product page). + +### Brand & Accent +- **Primary / Graphite** (`#333333`): solid CTA fill ("Add to cart", "Change region or country"), body + ink, the sole "brand color". Aesop has no chromatic accent on the storefront. +- **Primary hover** (`#252525`): measured hover fill of every solid button; also the footer band. +- **Badge russet** (`#945c26`): the only warm hue in UI text — product badges such as "Online exclusive". + +### Surface +- **Canvas** (`#fffef2`): page background (body bg and the dominant color of the capture), input and + select fills, filter-chip fill. +- **Surface alt** (`#f6f5e8`): slightly deeper cream used for the product-detail panel area, the + "How to use" half of 50/50 blocks, and the hover/selected fill of filter chips. +- **Footer** (`#252525`): full-width footer band and promotional dark bands; text on it is `#fffef2`. +- **White** (`#ffffff`): appears in small areas (media tiles, overlays); not a page surface. + +### Text +- **Ink** (`#333333`): all body copy, nav, headings on cream. +- **Ink muted** (`#666666`): product-tile descriptions, inactive tabs, breadcrumb current item, + results count ("13 products"). +- **Ink strong** (`#000000`): active tab label and its 2px underline; selected variant border. +- **On dark** (`#fffef2`): text on the hero imagery and in the footer. The same cream as the canvas — + inverted sections simply swap ink and canvas. + +### Semantic & State +- **Hairline** (`#33333333`, i.e. `#333333` at 20% alpha): 1px border of inputs, selects, secondary + buttons and variant options. +- **Chip border** (`#bcbbb4`): 1px border of category quick-link chips. +- **Disabled** (`#f3f3f3` fill, `#999999` text): measured on the newsletter "Submit" button before + the form is valid. + +A note on the measurement: on the homepage the most frequent text color by character count is +`#fffef2`, because the footer, the newsletter form and the hero overlays are long cream-on-dark +blocks. On the product page the top text color is `#333333`, and all reading text on the canvas is +`#333333`; that is why `ink` is graphite and the cream is kept as `on-dark`. + +## Typography + +### Font Family +- **SuisseIntl** (served `@font-face` name `SuisseIntl`, weight 400) — the workhorse for nav, copy, + prices, tabs, footer. 4614 of ~5650 measured characters on the homepage. +- **SuisseIntl-Medium** (served as its own family name, declared weight 500, rendered with + `font-weight: 400`) — buttons, the hero label, breadcrumbs. +- **Zapf-Humanist** (served `@font-face` name `Zapf-Humanist`, weight 400, CSS fallback `sans-serif`) + — editorial section titles only: "Curated Sets", "Browse by category", "Recommended reading", + "Suggested partners", "Frequently asked questions", and the 24px "how to use" line on product pages. +- **CircularStd** appears once, on the product-page h1 (24px/400, line-height 30px). It covers 33 + characters and looks like a leftover; do not adopt it as a system font. + +All measured letter-spacing is `normal`. There is no uppercase styling anywhere in the measured UI. + +### Hierarchy + +| Token | Family | Size | Weight | Line height | Where | +|---|---|---|---|---|---| +| display | Zapf-Humanist | 31px | 400 | 41.23px | homepage / PDP section titles | +| display-mobile | Zapf-Humanist | 25px | 400 | — | same titles at 390px | +| display-sm | Zapf-Humanist | 24px | 400 | 31.92px | PDP "Dispense into damp hands…" | +| hero-title | SuisseIntl | 30px | 400 | 39.9px | hero h1 "The Fragrant Fables", promo h2 | +| hero-title-mobile | SuisseIntl | 24px | 400 | 31.92px | same at 390px | +| page-title | SuisseIntl | 24px | 400 | 30px | category h1 "Cleansers" | +| tab | SuisseIntl | 24px | 400 | 31.2px | "Fresh / Floral / Woody / Ambery", "Description / Ingredients" | +| footer-heading | SuisseIntl | 18px | 700 | 27px | "Orders and support", "About" | +| lead | SuisseIntl | 16px | 400 | 24px | hero sub-line | +| price | SuisseIntl | 16px | 400 | 19.2px | tile price "$140.00" | +| body | SuisseIntl | 14px | 400 | 22.4px | paragraphs, form copy | +| body-tile | SuisseIntl | 14px | 400 | 21px | tile description (`#666666`) | +| product-name | SuisseIntl | 14px | 700 | 15.12px | tile name "Reverence Duo" | +| button | SuisseIntl-Medium | 14px | 400 | 21px | all `.c-button` | +| footer-link | SuisseIntl | 14px | 400 | 16.8px | footer nav links | +| nav | SuisseIntl | 12px | 400 | 19.2px | category nav, filter chips | +| utility | SuisseIntl | 12px | 400 | 18px | utility row, badges, results count | +| breadcrumb | SuisseIntl-Medium | 12px | 400 | 16.8px | breadcrumb links | + +The page also contains a screen-reader-only h1 ("Plant-based and laboratory-made ingredients", +SuisseIntl 36px/400, clipped to 1×1px). It is invisible and is not a display style. + +### Principles +- Small is the default. The most-read size is 14px, then 16px and 12px. Big type is rare and never bold. +- Hierarchy is made by **family**, not weight: Zapf-Humanist for editorial titles, SuisseIntl-Medium for + actions, SuisseIntl 700 only for product names and footer headings. +- Nothing is uppercase, nothing is tracked. Headlines read like book titles in sentence case. +- Copy blocks are centered under centered section titles; product information is centered in tiles. + +### Note on Font Substitutes +SuisseIntl is Swiss Typefaces' **Suisse Int'l** (designed by Ian Party, commercial licence — +[swisstypefaces.com](https://www.swisstypefaces.com/fonts/suisse/)). The served name "Zapf-Humanist" +matches Bitstream's **Zapf Humanist 601**, which is Bitstream's name for the Optima design +([CTAN fontname note](https://tex.org.uk/fonts/psfonts/w-a-schmidt/bop.txt)); which exact cut Aesop +licenses is not stated in any source consulted. Both are proprietary. If they cannot be licensed, a +neo-grotesque with similar proportions can stand in for SuisseIntl and an Optima-style flared sans +for Zapf-Humanist — keep the measured sizes and line heights, and keep weights at 400. + +## Layout + +### Spacing System +Measured paddings and gaps cluster on: `4px`, `8px`, `12px`, `13px`, `15px`, `16px`, `17px`, `20px`, +`23px`, `24px`, `32px`, `35px`, `40px`. Flex/grid gaps are `8px` (dominant) and `10px`. The tokens keep +the round steps (`4 / 8 / 12 / 16 / 24 / 32 / 40px`) plus the component-specific values that recur +exactly: button `13px 24px 12px`, tab `15px 35px`. + +### Grid & Container +At a 1280px viewport the content column measures `1170px` wide (section titles and the hero copy +container both report 1170px). Product carousels on the homepage show three tiles of `376px`; the +category grid shows four tiles of `270px`; product pages split into a wide image column (`761px`) and +a `410px` commerce column. The footer band is full width. + +### Whitespace Philosophy +Sections are separated by large expanses of cream. Section titles sit alone, centered, with one or +two lines of 14px copy under them. Product tiles leave generous room around each bottle; badges and +the bookmark icon float in the tile corners rather than in boxes. The hero is the only element that +runs edge to edge at the top; mid-page 50/50 image/text splits bleed to the viewport edge on the +image side. + +## Elevation & Depth + +Content has **no shadows**. The few box-shadows measured on the homepage +(`rgba(51, 51, 51, 0.2) 0px 0px 4px 0px`) belong to small utility controls, and the product page +adds an `rgb(34, 34, 34) 0px 0px 8px 0px` shadow on minor overlay elements. Product tiles, buttons, +inputs and cards are flat. + +### Decorative Depth +Depth comes from photography (warm, low-key, often amber light on dark wood or paper) and from +inverting whole bands: the hero image with cream text, the `#252525` footer, the full-bleed +editorial images. The cookie banner on the product page is a flat white strip over the content. + +## Shapes + +### Border Radius Scale +- `0px` — everything structural: buttons, inputs, selects, variant options, product tiles, tabs, + footer elements. This is the brand's signature right angle. +- `4px` — category quick-link filter chips only (`.c-quicklinks__link`). +- `50%` — circular media controls (the hero pause / mute buttons seen in the capture). + +### Other Shapes +No skew, notch, clip-path or mask was measured on any control. The extractor recorded a rotated +`::before` (`transform: matrix(0.745378, 0.666642, -0.666642, 0.745378, 0, 0)`, cream fill) inside the +graphite add-to-cart button; in the capture this is the circular-arrows "Loading ..." icon caught +mid-rotation, not a shape of the button itself. + +### Photography Geometry +Product shots are square-ish tiles on a near-white backdrop with soft natural shadow under the +bottle. Editorial imagery is full-bleed and rectangular. Nothing is masked into circles or blobs. + +## Components + +### Buttons +- **Primary (solid graphite)** — `#333333` fill, `#fffef2` label, SuisseIntl-Medium 14px / 21px, + `13px 24px 12px` padding, `48px` tall, `0px` radius, 1px transparent border. Measured transition: + `background-color 0.25s ease-out, color 0.25s ease-out`. Hover fill `#252525`. In product tiles it + spans the full tile width (376px homepage, 270px category, 410px PDP). +- **Primary disabled** — `#f3f3f3` fill with `#999999` label (newsletter "Submit"). +- **Secondary (ghost, on cream)** — transparent, `#333333` label, `1px solid #33333333` border, same + 48px height and padding ("Discover more", "Discover Services"). Each carries a right-arrow icon + after the label. +- **Secondary light (ghost, on imagery)** — transparent, `#fffef2` label and `1px solid #fffef2` border + ("Explore the story", "Explore", "Learn more"). + +### Cards & Containers +- **Product tile** — no border, no fill, no radius. Image area on a near-white photo background, an + optional russet badge top-left (`#945c26`, 12px), a bookmark icon top-right, then centered + product name (SuisseIntl 14px/700, line-height 15.12px), description in `#666666` (14px / 21px), + an optional "Size" select, the price (16px / 19.2px) and the full-width graphite button. +- **PDP commerce panel** — sits on `#f6f5e8`; product title, price, short description, star rating + with an underlined count, the variant options, a radio list (one-time / subscription) and the + graphite add-to-cart button. + +### Inputs & Forms +- **Text input** — `#fffef2` fill, `#333333` text, `1px solid #33333333` border, `0px` radius, + `0px 16px` padding, `40px` tall, SuisseIntl 14px. +- **Select** (country selector, tile size selector) — same fill and border, `0px 30px 0px 20px` + padding, `40px` tall, chevron at the right. +- **Sort select** on category pages is borderless: 14px / 24px text with `0px 20px 0px 5px` padding + inside the `#f6f5e8` toolbar. + +### Navigation +- **Header** — cream, no border. Utility row in 12px (`#333333`), centered serif wordmark, category + row "Shop all · New & Notable · Skin Care · Hand & Body · Fragrance · Home · Hair · Travel · Gifts · + Library · Experience" in SuisseIntl 12px / 19.2px, then a vertical divider and "Search..." with a + magnifier icon. +- **Breadcrumbs** — SuisseIntl-Medium 12px / 16.8px, `#333333` links separated by small chevrons, + current page in `#666666`. +- **Tabs** — SuisseIntl 24px / 31.2px; inactive `#666666`, active `#000000` with a `2px solid #000000` + underline drawn by `::after`. Homepage fragrance tabs pad `15px 35px` (61px tall); PDP tabs pad + `70px 100px 22px 0px` and sit on a full-width hairline. +- **Footer** — `#252525` band; column headings SuisseIntl 18px/700 with a `1px solid #fffef2` rule + beneath and `15px` bottom padding; links SuisseIntl 14px / 16.8px in `#fffef2` with `8px` bottom + padding. + +### Pills, Tags, and Chips +- **Filter chip** (category quick links) — `#fffef2` fill, `1px solid #bcbbb4`, `4px` radius, + `4px 8px 4px 4px` padding, 27px tall, SuisseIntl 12px / 19.2px. Hover: fill `#f6f5e8`, border + `#252525`. Selected: fill `#f6f5e8`, `2px solid #252525` border, 29px tall. +- **Badge** — plain text, no box: 12px SuisseIntl in `#945c26`. + +### Signature Components +- **Variant option** (PDP size picker) — a rectangular tile with size and price on two centered lines, + `#fffef2` fill, `8px` padding, 54px tall. The selected option measured `2px solid #000000`; the + measured hover turned a `#33333333` border to `#252525`. +- **Editorial section header** — centered Zapf-Humanist 31px title over a 14px centered paragraph, + optionally preceded by a 14px SuisseIntl-Medium eyebrow ("Eaux de Parfum"). +- **50/50 story block** — full-bleed photograph on one half, `#f6f5e8` or cream text panel on the + other, with a small label, a Zapf-Humanist title and definition-list rows separated by hairlines + ("Dosage — Single pump", "Texture — Clear, low-foaming gel"). + +## Design System Architecture + +Aesop has built a coded design system, but it is no longer public. The npm namespace +`@aesop-engineering` lists **`@aesop-engineering/gel`** — "UI Component Library and Design System for +Aēsop.com", latest version 5.78.0, last released 2023-05-05, repository `github.com/aesop/aesop-gel` +([ecosyste.ms npm namespace listing](https://packages.ecosyste.ms/api/v1/registries/npmjs.org/namespaces/aesop-engineering/packages)). +Today the npm registry answers "Not found" for the package and the GitHub repository returns 404; +a copy of 5.78.0 is still on the jsDelivr CDN, and the facts below come from that copy. It is a 2023 +snapshot — where it disagrees with the live site, the live site wins (see the button note below). + +- **Name and purpose** — the README calls it "Aesop Global Experience Language" (GEL), a React + component library installed with `npm install @aesop-engineering/gel` and imported per component + path ([README](https://cdn.jsdelivr.net/npm/@aesop-engineering/gel@5.78.0/README.md)). It mentions + a consuming app named `aesop-web-ui`, Rollup builds to ES modules plus TypeScript declarations, and + a Gitflow branching model. +- **Token architecture** — GEL ships no separate token package or token file. Values live directly in + CSS Modules bundled into the JS (class names like `Button-module_base__2Lrsr`, + `Heading-module_xLarge__r0QbC`), with hex values such as `#333`, `#fffef2`, `#f6f5e8`, `#bcbbb4`, + `#666` repeated in the modules ([bundle](https://cdn.jsdelivr.net/npm/@aesop-engineering/gel@5.78.0/dist/index.esm.js)). + The live storefront likewise exposes no brand custom properties: its `:root` variables are third-party + (Flowplayer `--fp-*`, `--flowplayer-*`) plus a handful of generic names (`--darkgray`, `--lightgray`, + `--black`). The live markup uses BEM-style component classes with modifier and helper prefixes — + `c-button m-secondary m-readmore-dark`, `c-product-tile__name`, `c-quicklinks__link m-selected`, + `l-footer__nav-link`, `h-text-size-31-for-large h-text-size-25` (`c-` component, `l-` layout, + `m-` modifier, `h-` helper). +- **Theming** — GEL's theme type is exactly `'dark' | 'light'` + ([Themes.types.d.ts](https://cdn.jsdelivr.net/npm/@aesop-engineering/gel@5.78.0/dist/sharedChunks/Themes.types.d.ts)), + passed as a `theme` prop and through `ThemeContext` / `NavBarThemeContext`. Here "dark" means dark + ink for cream backgrounds and "light" means cream ink for imagery. It is not a dark mode: the live + site has no dark-mode switch. The same split shows on the live site as `m-readmore-dark` / + `m-readmore-light` button modifiers. +- **Type & spacing** — GEL's CSS uses the families `'Suisse Regular'`, `'Suisse Medium'` and + `'Zapf Humanist'`. Its `Heading` sizes step 14 / 16 / 18 / 20 / 22 / 24px, with a `serifFont` variant + that switches to Zapf Humanist and goes larger at wider breakpoints; Korean pages swap the serif + back to Suisse. The live site serves the families as `SuisseIntl`, `SuisseIntl-Medium` and + `Zapf-Humanist`, and its responsive helper classes (`h-text-size-31-for-large h-text-size-25`) + match the measured 31px desktop / 25px mobile section titles. No documented base unit was found. +- **Component model** — the GEL 5.78.0 file tree + ([jsDelivr listing](https://data.jsdelivr.com/v1/packages/npm/@aesop-engineering/gel@5.78.0)) lists: + Accordion, AddToCartButton, Alert, AssetGrid, Audio, BodyCopy, Breadcrumbs, Button, Carousel, + Checkbox, ContentHubArticle(List), CopyGrid, DateSelector, DefinitionList, DialogBanner, + DoubleMedia, FiftyFiftyFloatingText, Figure, FlyinPanel, FooterBlock, FullWidthHeroScroll, + GlobalNavigation, GoogleMap, Heading, HeroBanner, Hyperlink, Icon, IconLink, Image, ImageCarousel, + KitList, LinkButtonGroup, List, Loading, LoadMoreButton, MediaWithContent, Modal, NavigationBar, + NotificationModal, Overlay, Paragraph, PasswordInput, Podium, ProductAccordion, ProductCommerce, + ProductDetailHeader, ProductExtract, ProductGridItem, Quote, RadioGroup, Rating, ReadMore, + SecondaryMessage, SectionHeading, Select, SubNav, Table, Textarea(V2), TextInput(V2), + TextOverFullWidthAsset, Transition, TwoColumnLayout, Video, plus compositions (DynamicForm, + StoreDetail) and hooks (useTrapFocus, useEscapeKeyListener, useFocusOnFirst, useOnScreen…). + The 2023 `Button` had `blockStyle` (60px tall, `19px 23px` padding, 200ms + `cubic-bezier(0.645, 0.045, 0.355, 1)`), `dark` / `light` / `alternate` variants and a disabled state. + **The live button differs:** 48px, `13px 24px 12px`, `0.25s ease-out`. Follow the live values. +- **Accessibility** — GEL includes focus-trap and escape-key hooks, `ScreenReaderOnly` and `Hidden` + components, checkbox focus outlines of `2px solid #333` (dark theme) / `2px solid #f6f5e8` (light), + and an `@media (forced-colors: active)` rule. No published contrast target or touch-target + minimum was found. On the live site, measured controls are 40px (inputs, selects) and 48px (buttons); + "skip to content" and "skip to footer navigation" links come first in the DOM, and there is a hidden + h1 for screen readers. +- **Delivery** — npm (`@aesop-engineering/gel`, ISC licence, React 17 peer dependency), a GitHub + Pages Storybook at [aesop.github.io/aesop-gel](https://aesop.github.io/aesop-gel/), and shared lint + configs in [`@aesop-engineering/code-styles`](https://raw.githubusercontent.com/aesop/aesop-code-styles/HEAD/package.json) + (eslint, prettier, stylelint). The public [Aesop GitHub org](https://api.github.com/orgs/aesop/repos) + no longer lists aesop-gel. No public Figma kit and no public brand portal or press kit with color or + type specifications were found. + +## Do's and Don'ts + +### Do +- Use `#fffef2` as the page background and `#333333` for text — never pure white or pure black for these. +- Keep every button, input, select, tile and tab at `0px` radius; use `4px` only for filter chips. +- Make solid CTAs `#333333` with a `#fffef2` label, 48px tall, `13px 24px 12px` padding, hover `#252525`. +- Use SuisseIntl-Medium 14px for button labels and SuisseIntl 14px / 22.4px for reading text. +- Reserve Zapf-Humanist (31px / 41.23px) for editorial section titles, centered and in sentence case. +- Use `#666666` for secondary descriptions and inactive tabs. +- Put cream text (`#fffef2`) and cream 1px outlines on photography and on the `#252525` footer. +- Write literary, calm, sentence-case microcopy; label badges in plain russet text (`#945c26`). +- Let photography carry warmth: amber glass, wood, paper, low warm light. + +### Don't +- Don't add drop shadows, gradients or glassmorphism to tiles, buttons or sections. +- Don't introduce a chromatic brand color for CTAs; there is none on the live storefront. +- Don't round corners or make pill buttons. +- Don't uppercase, letter-space or bold headlines; display type stays at weight 400. +- Don't set body copy in Zapf-Humanist, and don't use CircularStd (a one-off on the product h1). +- Don't put badges in filled boxes or colored pills — they are bare text. +- Don't use the 2023 GEL button metrics (60px, `19px 23px`) for new work; the site now ships 48px. + +## Responsive Behavior + +### Breakpoints +Only two viewports were measured: 1280px (desktop) and 390px (mobile). GEL's 2023 CSS uses +`max-width: 639px`, `min-width: 640px`, `min-width: 1025px`, `min-width: 1220px`, `1600px` and `1920px` +media queries ([bundle](https://cdn.jsdelivr.net/npm/@aesop-engineering/gel@5.78.0/dist/index.esm.js)). +The live markup uses matching `-for-large` and `-for-medium-down` helper suffixes, but the live +breakpoint pixel values were not measured. + +### Measured changes at 390px +- Hero / promo title: SuisseIntl 30px → **24px** (line-height 39.9px → 31.92px). +- Editorial section titles: Zapf-Humanist 31px → **25px**. +- Body stays 14px / 22.4px; buttons stay 48px tall with `13px 24px 12px` padding (tile buttons 170px wide). +- The header becomes a 50px cream bar (`#fffef2`) whose visible text is only "Stores" and "My cart" + beside the wordmark; the desktop category row is not shown at this width. + +### Touch Targets +Buttons are 48px tall at every width; inputs and selects are 40px; filter chips are 27–29px tall. + +### Collapsing Strategy +At 1280px the homepage shows three carousel tiles (376px) and the category grid four columns (270px); +at 390px the measured tile button is 170px wide. How the 50/50 story blocks and tab rows reflow at +small widths was not measured — check the live site before specifying it. + +### Image Behavior +At 1280px the hero and editorial images are full-bleed and cropped to their blocks; product shots sit +on a near-white photographic background inside the tile. Mobile image crops were not measured. + +## Iteration Guide + +1. Start every screen on `#fffef2` with `#333333` text in SuisseIntl 14px / 22.4px. +2. Add the three-tier header: 12px utility row, centered serif wordmark, 12px / 19.2px category row. +3. Title sections with centered Zapf-Humanist 31px / 41.23px (25px on mobile) and one 14px paragraph. +4. Build product tiles flat: image, russet 12px badge, 14px/700 name, `#666666` 14px / 21px description, + 16px / 19.2px price, full-width 48px `#333333` button. +5. Use ghost buttons (`1px solid #33333333` on cream, `1px solid #fffef2` on imagery) for "Discover more". +6. Close with the `#252525` footer: 18px/700 cream headings over a 1px cream rule, 14px / 16.8px links. +7. Check: no radius except chips (`4px`) and media controls (`50%`); no shadows; no uppercase. +8. Hover states change color only (`#252525` fill, `#f6f5e8` chip fill), `0.25s ease-out`. +9. When a component isn't listed here, follow GEL's naming and theme split (`dark` ink on cream, + `light` ink on imagery), but take sizes from the live measurements above. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aether-1/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aether-1/DESIGN.md new file mode 100644 index 0000000..54c0778 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aether-1/DESIGN.md @@ -0,0 +1,154 @@ +--- +version: alpha +name: Aether 1 +category: "Tech & AI" +description: "Aether 1 Earbuds launch site: near-black navy #050d15 canvas, white Manrope 500 headlines at 48px, Azeret Mono 300 bracketed labels, #41a5ff blue glow edges, glass cards, pill buttons with 53.33px radius." +colors: + canvas: "#050d15" + page-largest: "#0a1a29" + ink: "#ffffff" + primary: "#0a1a29" + on-primary: "#ffffff" + surface-2: "#41a5ff" + nav-bg: "#ffffff14" +typography: + display: + fontFamily: Manrope, Arial, sans-serif + fontSize: 48px + fontWeight: 500 + lineHeight: 57.6px + display-mobile: + fontFamily: Manrope, Arial, sans-serif + fontSize: 22px + fontWeight: 500 + lineHeight: 26.4px + body: + fontFamily: Manrope, Arial, sans-serif + fontSize: 12.4444px + fontWeight: 500 + lineHeight: 17.4222px + button: + fontFamily: Manrope, Arial, sans-serif + fontSize: 8.88889px + fontWeight: 400 + lineHeight: 10.6667px + nav: + fontFamily: Manrope, Arial, sans-serif + fontSize: 37.3333px + fontWeight: 400 + lineHeight: 48.5333px + link: + fontFamily: Manrope, Arial, sans-serif + fontSize: 10.6667px + fontWeight: 500 + lineHeight: 12.8px + textTransform: uppercase +rounded: + xs: 13.33px + sm: 53.33px + cta: 53.33px + pill: 9999px +spacing: + s1: 1px + s2: 4.44px + s3: 7.11px + s4: 8.89px + s5: 14.22px + s6: 21.33px + s7: 26.67px + s8: 35.56px + s9: 44.44px + s10: 106.67px +components: + button-primary: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.ink}" + typography: "{typography.button}" + height: 37px + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + nav: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.ink}" + padding: 0px 14.2222px 17.7778px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + transform: matrix(1, 0, 0, 1, 0, -48.5156) + card: + textColor: "{colors.ink}" + rounded: "{rounded.pill}" + boxShadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px, rgba(65, 165, 255, 0.1) 0px 1px 0px 0px inset + transform: matrix3d(0.895852, 0.305453, 0.32272, 0, 0.32272, -0.946494, 0, 0, 0.305453, 0.104148, -0.946494, 0, 0, 0, 0, 1) +--- + +# Aether 1 + +## Overview +Aether 1 is a single-product launch site for a pair of premium earbuds, titled "Aether 1 Earbuds" and carrying the line "Sound Without Boundaries" with the subline "Elevate your senses through timeless resonance." The page credits "OFF+BRAND." as its contact line. The capture shows an almost black navy field (`{colors.canvas}` #050d15) with one centered 3D object: translucent, glassy ellipsoids with small glowing blue points, labeled around it with bracketed monospace tags such as [ NOISE CONTROL ], [ AI ASSISTANT ] and [ EQUALIZER ]. The page measures 4,000px tall at 1280px width, and most of that height is empty dark space in the capture, with the lower part of the capture empty. Everything in the measured frame is white or blue on dark navy. + +The tone of the copy is poetic and minimal ("Experience every note as if it were born in silence"; "Its energy, eternal. No charging, no constraints."), with short evocative headings such as "Unrivalled audio quality", "Crafted for pure clarity.", "Intuitive Controls" and "Sub Alphatonic Power Core". Some body text on the page is still placeholder lorem ipsum, so copy tokens should not be taken as final. + +### Imagery and art direction +The visible art direction is a single abstract hero object rather than photography: concentric translucent ellipses tilted at different angles, filled with a deep blue gradient and outlined with thin gray strokes, with three small bright blue points at the edges. A tiny bracketed counter, [ 100 ], sits at the far right edge of the frame, and the wordmark text "AETHER : 1" is present in the page text. There are no people, no product photographs and no stock imagery in the measured frame. The grid is not visible; the labels are positioned freely around the object. Density is extremely low: a handful of tiny labels on a field that is more than three thousand pixels tall in the capture. + +## Colors +- **Canvas** `{colors.canvas}` #050d15: the brand/background variable (`--color-brand` and `--color-bg` are both #050D15 in the shipped CSS). +- **Elevated navy** `{colors.page-largest}` #0a1a29: the largest painted area and also the fill of the measured button, so `{colors.primary}` is the same value. +- **Ink** `{colors.ink}` #ffffff: the only text color measured (500 characters, all white); `{colors.on-primary}` is also #ffffff. +- **Glow blue** `{colors.surface-2}` #41a5ff: appears in the card shadows (`rgba(65, 165, 255, 0.1)` inset line and a `rgba(65, 165, 255, 0.7) 0px 0px 10px 2px` glow around the orbiting points). +- **Glass nav fill** `{colors.nav-bg}` #ffffff14: a translucent white used behind the nav. +- The root variables also publish `--color-blue: #2274ca`, `--color-light-blue: #EEF6FF`, `--color-white: #fff`, `--color-black: #000` and `--color-text: #fff`; they are present in CSS but not measured on visible elements in this capture. + +## Typography +Two families. **Manrope** (weights 400 and 500) carries all headline, body and button copy; **Azeret Mono** (weight 300, uppercase) carries the bracketed labels, measured on the body role at 7.11px with 8.53px line-height. Sizes are viewport-scaled: the root defines `--vw: 12.8px` and `--vh: 8px`, and measured sizes are fractional multiples of that unit. + +- `display` Manrope 48px / 500 / 57.6px: the h1 "Sound Without Boundaries". +- `display-mobile` Manrope 22px / 500 / 26.4px: the same h1 on the 390px pass. +- `body` Manrope 12.4444px / 500 / 17.4222px: descriptive paragraphs, the most used size (245 characters). +- `button` Manrope 8.88889px / 400 / 10.6667px. +- `nav` Manrope 37.3333px / 400 / 48.5333px: large navigation links (Home, Specs, Preorder). +- `link` Manrope 10.6667px / 500 / 12.8px, uppercase. +Manrope and Azeret Mono are open-source families; no substitute is documented. + +Weight usage is narrow: weight 500 dominates headlines and body, 400 appears on buttons and the large nav, and 300 only on the monospace labels. Letter-spacing was measured as normal on the headline and body; the monospace labels are uppercase and use no extra tracking in the measured roles. The result is a typographic voice that is calm and technical: a large light-medium sans for statements and a tiny mono for annotations, with almost nothing in between. + +## Layout +The shipped CSS publishes `--container-padding: 10rem`, `--grid-margin: 10rem`, `--inner-padding: 2rem`, `--outer-padding: 1rem` and `--grid-gutter: 2rem`. The hero is a centered stage with the object in the middle and labels placed around it by absolute position. Measured spacing values are 1, 4.44, 7.11, 8.89, 14.22, 21.33, 26.67, 35.56, 44.44 and 106.67px, again in viewport-scaled steps. + +Because sizes scale with the viewport unit, a designer reproducing the page should compute lengths from the 12.8px `--vw` unit instead of fixed pixels: for example the 48px h1 equals 3.75 viewport units and the 12.4444px body equals about 0.972 units. The 10rem container and grid margins mean the content column is narrow at 1280px, leaving wide empty gutters that frame the hero object. Navigation sits in a translucent glass bar; its links are large type, 37.3333px, offset by a transform of `matrix(1, 0, 0, 1, 0, -48.5156)` in the measured state, that is a vertical translate of -48.5156px; what triggers it was not measured. + +## Elevation & Depth +Depth is made with light, not with drop shadows. Cards carry `rgba(255, 255, 255, 0.2) 0px 1px 0px 0px, rgba(65, 165, 255, 0.1) 0px 1px 0px 0px inset`, a one-pixel white top edge plus a faint blue inner edge, and the 3D shell is a CSS `matrix3d` transform. Orbiting points use the blue glow `rgba(65, 165, 255, 0.7) 0px 0px 10px 2px`. The h1 has a `mask-image: linear-gradient(90deg, rgb(0, 0, 0) -100%, rgba(0, 0, 0, 0) 0%)`, a gradient mask on the heading. + +## Shapes +Radii measured: 50% (8 elements, the orbiting dots), 53.3333px (2 elements, `{rounded.sm}` / `{rounded.cta}`), and 13.3333px (`{rounded.xs}`). The mobile CTA "Ask Aether" measured a 60px radius, a pill. Large ellipsoid forms are the signature shape. + +## Components +- **button-primary** "Ask Aether": background `{colors.page-largest}` (#0a1a29), text `{colors.ink}`, `{typography.button}`, height 37px, pill radius (`{rounded.cta}`). +- **nav**: translucent `{colors.nav-bg}` fill, white text, padding 0px 14.2222px 17.7778px; nav links are the large 37.3333px `{typography.nav}`. +- **link**: white uppercase 10.6667px. +- **card**: the glass shape with the two-layer edge shadow above and a 3D transform. +No hover states were recorded (empty hover list). + +## Design System Architecture +No public design system or brand guideline is linked from the page; its only links are Home, Specs and Preorder. The de-facto system is a small CSS-variable layer: `--color-bg`, `--color-brand`, `--color-text`, `--color-blue`, `--color-light-blue`, plus spacing variables (`--container-padding`, `--grid-margin`, `--grid-gutter`) and viewport units (`--vw`, `--vh`) that scale all sizes with the window. + +## Do's and Don'ts +- Do keep the page dark (#050d15) with white text only; add color through the #41a5ff glow. +- Do label hardware features in bracketed uppercase monospace (Azeret Mono 300). +- Do use Manrope at weight 500 for headlines and body. +- Don't use opaque drop shadows; use the one-pixel light edge and blue glow. +- Don't ship the placeholder lorem ipsum as copy. +- Don't use pure black, which appears only as an unused variable. + +## Responsive Behavior +Measured on the 390px pass: the h1 is 22px / 500 / 26.4px (down from 48px at 1280px) and the "Ask Aether" button is 10px / 400 with a 60px radius on #0a1a29. Layout changes, breakpoints and navigation behavior on mobile were not measured. + +## Iteration Guide +1. Set the page to #050d15 and the one raised surface to #0a1a29. +2. Headline in Manrope 500 at 48px desktop and 22px mobile. +3. Add feature tags as `[ LABEL ]` in Azeret Mono 300 uppercase. +4. Express depth with the white 20% top edge and the blue 10% inner edge. +5. Re-measure with `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=aether-1 --force --no-motion` and re-run `node web/scripts/verify-designs.mjs --slug=aether-1`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/affine/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/affine/DESIGN.md new file mode 100644 index 0000000..b7d42cb --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/affine/DESIGN.md @@ -0,0 +1,251 @@ +--- +version: alpha +name: AFFiNE +category: "Productivity & SaaS" +description: "AFFiNE (affine.pro), open-source knowledge base software: a light #f8f8f7 page with Inter 500 headings at 48px/-1.92px and 36px/-1.44px, 19.6px/32.34px body copy, #1e96eb brand-blue 34px-radius Get Started buttons (hover 80% alpha), white 14.88px-radius cards with a 0 1px 4px shadow, and a solid #1e96eb footer." +colors: + canvas: "#f8f8f7" + ink: "#424149" + primary: "#1e96eb" + on-primary: "#ffffff" + ink-strong: "#000000" + ink-secondary: "#000000ad" + ink-muted: "#0000009e" + ink-body-soft: "#000000b8" + hairline: "#0000001a" + primary-hover: "#1e96ebcc" + surface-glass: "#ffffffdb" + link-border: "#00000014" + nav-text: "#ffffff99" + footer-text: "#ffffffd9" +typography: + display: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 48px + fontWeight: 500 + letterSpacing: "-1.92px" + display-mobile: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 40.019px + fontWeight: 500 + lineHeight: 40.019px + letterSpacing: "-2.80133px" + card-title: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 32px + fontWeight: 500 + lineHeight: 40px + letterSpacing: "-1.28px" + subheading: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 36px + fontWeight: 500 + lineHeight: 42.84px + letterSpacing: "-1.44px" + heading: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 24px + fontWeight: 500 + lineHeight: 31.992px + letterSpacing: "-0.48px" + body: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 19.6px + fontWeight: 400 + lineHeight: 32.34px + nav-menu: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 14px + fontWeight: 500 + lineHeight: 20px + letterSpacing: "-0.28px" + nav: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 18.2px + letterSpacing: "-0.07px" + link: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 600 + lineHeight: 21.6px + input: + fontFamily: Inter, "Inter Fallback", Roboto, Helvetica, Arial, sans-serif + fontSize: 15px + fontWeight: 400 + letterSpacing: "-0.075px" +rounded: + xs: 4px + sm: 8px + md: 10px + lg: 11.5px + xl: 12px + 2xl: 14.88px + 3xl: 16px + 4xl: 18px + button: 34px + none: 0px + pill: 9999px +spacing: + s1: 4px + s2: 6px + s3: 8px + s4: 8.39px + s5: 10px + s6: 11px + s7: 12px + s8: 16px + s9: 18px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.nav-menu}" + rounded: "{rounded.none}" + height: 30px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-get-started: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.nav-menu}" + rounded: "{rounded.button}" + padding: 5px 16px + height: 30px + button-github: + textColor: "{colors.ink-strong}" + typography: "{typography.nav-menu}" + rounded: "{rounded.button}" + padding: 6px 16px + height: 32px + link: + backgroundColor: "{colors.surface-glass}" + textColor: "{colors.ink}" + typography: "{typography.link}" + rounded: "{rounded.3xl}" + padding: 16px 18px + borderColor: "{colors.link-border}" + nav: + textColor: "{colors.nav-text}" + rounded: "{rounded.none}" + padding: 53.024px 0px + nav-link: + textColor: "{colors.on-primary}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + text-input: + textColor: "{colors.on-primary}" + typography: "{typography.input}" + rounded: "{rounded.none}" + height: 44px + card: + backgroundColor: "{colors.on-primary}" + textColor: "{colors.ink-strong}" + typography: "{typography.card-title}" + rounded: "{rounded.2xl}" + padding: 0px 24px 24px + boxShadow: rgba(0, 0, 0, 0.15) 0px 1px 4px 0px + footer: + backgroundColor: "{colors.primary}" + textColor: "{colors.footer-text}" + rounded: "{rounded.none}" + padding: 75.152px 0px 0px +--- + +# AFFiNE + +## Overview + +AFFiNE is an open-source workspace that merges docs, whiteboards and databases, and affine.pro (title "AFFiNE — Open-Source Knowledge Base Software") is a long, bright, product-first landing page: 1280px wide and 13031px tall on a warm off-white `#f8f8f7`. The header is light and airy: the triangular AFFiNE logo, menus (Product ▾, Team ▾, Download, Resources ▾, Pricing), a language picker ("English"), a blue pill "Get Started" button and an outlined GitHub pill showing the star count ("73,580 [U+2605]"). + +The hero headline is set large and tight, centred over two lines — "Write, Draw, [U+2611] Plan, All at Once. With AI." — with a blue text cursor at its start, a blue checkbox icon inline, and "AI." in brand blue. Under it: "AFFiNE is a workspace with fully merged docs, whiteboards and databases. Get more things done, your creativity isn't monotone.", then a filled blue "Get Started" pill and an outlined blue "Book a Demo" pill. A large white app window ("This is your Second Brain [U+1F4DA]") with a document, highlights and a table view floats below with a soft shadow, and a red "#1 Product of the Day" Product Hunt badge. + +The page continues with a gradient-text heading "Trusted by people from next-gen startups to established organizations." over a logo grid (Google, Microsoft, Amazon, Meta, IBM, Oxford, SAP, Michigan, PLAUD.AI, void), "Consolidate Your Workflow with Ease on a Hyperfused Platform", white feature cards ("Say goodbye to the hassle of switchover"), product sections for Write, Draw and Plan, AI, templates and community, then a solid blue footer ("To Shape, Not to Adapt.") with a newsletter field and link columns. A handwritten font (Kalam) adds a few annotation notes. + +## Colors + +- **canvas `#f8f8f7`** — the page background (`--bg: #f8f8f7`), the largest area. +- **on-primary `#ffffff`** — white cards and panels (second largest area) and button labels. +- **primary `#1e96eb`** — AFFiNE blue, declared as `--brand: #1e96eb` (`--brand-rgb: 30, 150, 235`). It fills the Get Started buttons and the entire footer, and colours "AI." in the headline. Hover recorded the fill as `rgba(30, 150, 235, 0.8)` = **primary-hover `#1e96ebcc`**. +- **ink `#424149`** — the most-read text colour (4415 characters), declared as `--primary: #424149`. +- **ink-strong `#000000`** — headings and card titles (`--primary-deep: #000`). +- **ink-body-soft `#000000b8`** (72%), **ink-secondary `#000000ad`** (68%), **ink-muted `#0000009e`** (62%) — paragraph and caption greys built from translucent black. +- **hairline `#0000001a`** — the most common border (23 elements); **link-border `#00000014`** for resource links. `#eeeeee` and `#f4f4f5` are also measured borders, and the CSS declares `--divider-color: #d7d7d7`. +- **surface-glass `#ffffffdb`** — translucent white for resource link cards; `#ffffffb8` is a large translucent background too. +- **nav-text `#ffffff99`** and **footer-text `#ffffffd9`** — white at 60% and 85% for footer column headings and copy on blue. `#0f7ac4` is a darker blue measured in the footer. + +The h2 "Trusted by people…" uses a text gradient, `linear-gradient(91deg, rgb(71, 71, 71) 20.12%, rgb(0, 0, 0) 55.27%, rgb(71, 71, 71) 82.61%)`, clipped to the text. The CSS also declares `--logo-color: #5438ff` and `--link-hover-color: #244ee7`. + +## Typography + +AFFiNE self-hosts **Inter** 400, 500, 600 and 700 (`/fonts/inter-v18-latin-*.woff2`), used on 8491 characters. **Kalam** appears on 23 characters as handwritten notes. + +- **Display — Inter 500, 48px, -1.92px tracking** (-4%): the largest measured desktop section heading, "Consolidate Your Workflow with Ease on a Hyperfused Platform". The animated hero headline was not captured by the desktop pass; at 390px it measures 40.019px / 40.019px with -2.80133px tracking (-7%). Larger sizes also appear on the page — 90px (23 characters), 60px, 55.776px and 45.328px — without a recorded role. +- **Card title — Inter 500, 32px / 40px, -1.28px.** +- **Subheading — Inter 500, 36px / 42.84px, -1.44px** ("your way to better productivity"). +- **Heading — Inter 500, 24px / 31.992px, -0.48px** (the gradient "Trusted by…" heading). +- **Body — Inter 400, 19.6px / 32.34px** for the lead paragraph, in `#000000b8`. The most common size on the page is 13px (3697 characters), then 16px, 14px and 15px. +- **Nav menu — Inter 500, 14px / 20px, -0.28px**; **footer nav — 400, 14px / 18.2px, -0.07px**; **link card titles — 600, 16px / 21.6px**; **input — 400, 15px, -0.075px**. + +Tracking is negative everywhere and scales with size (about -2% at 14px–24px, -4% at 32px–48px). **Substitute:** Inter is free; Kalam is free on Google Fonts. + +## Layout + +The page is centred with `--container-padding: 40px` and `--navbar-height: 72px`. Content spans x=96 to x=1180 in the main band. The hero is centred; the app screenshot is centred below it. The logo grid uses 5 columns; the widest measured row has 8 columns. Feature cards come in pairs (564px wide). The footer spans x=57 to x=1223 with 6 columns. + +The gap rhythm is dominated by 4px (104 elements), then 16px, 8px, 11px, 6px and 56px. Paddings: 24px and 32px most often, then 6px, 8px, 20px, 16px, 10px. Cards use 0px 24px 24px; link cards 16px 18px. The footer opens with 75.152px of top padding. + +## Elevation & Depth + +Elevation is light. White cards carry `rgba(0, 0, 0, 0.15) 0px 1px 4px 0px` (`0 1px 4px #00000026`, 12 uses in CSS). The hero app window floats with a wide, soft shadow. Other shadows in the CSS include `0 10px 30px -18px #1e96eb59` (a blue glow, 4 uses), `0 1px 6px #0000000d` and `0 1px 4px #0000000f`. Translucent whites (`#ffffffb8`, `#ffffffdb`) layer cards over the off-white page. + +## Shapes + +Soft and friendly. The card radius is 14.88px (21 elements, the most common). Buttons are pills at 34px (10 elements); `999px` also appears twice. Small controls use 4px (17) and 8px or 10px; link cards use 16px; other measured radii are 18px, 12px, 11.504px, 23px, 26px and 28px; avatars are 50% circles. The logo is a line-drawn triangle mark. + +## Components + +- **Get Started (primary)** — `#1e96eb` pill, 34px radius, white Inter 500 14px with -0.28px tracking, 5px 16px padding, 30px tall in the header; the hero version is 44px tall. Hover: fill `rgba(30, 150, 235, 0.8)`. +- **Book a Demo** — an outlined pill with a blue label beside the hero Get Started (a 1px `#1e96eb` border is measured once on the page). +- **GitHub star pill** — transparent, 1px `#cccccc` border, 34px radius, 6px 16px padding, 32px tall, GitHub icon, count and a yellow star. +- **Nav menu item** — Inter 500 14px `#000000`, 4px radius, 8px 12px padding, 36px tall, with a chevron. +- **Feature card** — white, 14.88px radius, 0px 24px 24px padding, `0 1px 4px` shadow, Inter 500 32px/40px title. +- **Resource link card** — `#ffffffdb`, 1px `#00000014` border, 16px radius, 16px 18px padding, 600 16px title in `#424149` with a `#0000009e` description. +- **Footer** — solid `#1e96eb`, "To Shape, Not to Adapt." headline, a newsletter strip ("Stay in the loop on open-source progress."), an email input with white text, and 60% white column headings (Company, Download, Resources, Compare) over white links. + +## Design System Architecture + +No public AFFiNE marketing design system was opened for this document; the site exposes its own variables in the shipped CSS. The brand layer is small: `--brand: #1e96eb` with HSL parts (`--brand-h: 204.88deg`, `--brand-s: 83.67%`, `--brand-l: 51.96%`), `--brand-gradient`, `--primary: #424149`, `--primary-deep: #000`, `--primary-gray: #747474`, `--secondary: #fff`, `--bg: #f8f8f7`, `--divider-color: #d7d7d7`, `--logo-color: #5438ff`, `--link-hover-color: #244ee7`, `--container-padding: 40px` and `--navbar-height: 72px`. The rest of the root variables belong to libraries: Element Plus (`--el-*`, e.g. `--el-color-primary-rgb: 64,158,255`), the cookie-consent widget (`--cc-*`) and UnoCSS (`--un-*`); those are not AFFiNE brand values. The AFFiNE app itself is open source, but its in-app tokens were not used here. + +## Do's and Don'ts + +**Do** +- Use the warm off-white `#f8f8f7` page with white cards and `#424149` text. +- Use `#1e96eb` for primary pills and for one highlighted word in a headline. +- Set headings in Inter 500 with strong negative tracking (-4% at 32px–48px). +- Round buttons fully (34px) and cards at 14.88px. +- Keep shadows small (`0 1px 4px` at 15%). +- End the page with a solid blue footer and white text. + +**Don't** +- Don't use bold 700 for headings; the measured heading weight is 500. +- Don't use square buttons. +- Don't treat Element Plus `rgb(64,158,255)` or the cookie-banner colours as brand colours. +- Don't use heavy dark shadows on cards. +- Don't fill large page areas with blue except the footer. + +## Responsive Behavior + +The extractor's 390px mobile pass recorded: the hero h1 "Write, Draw, Plan, All at Once. With AI." at Inter 500 40.019px / 40.019px with -2.80133px tracking (329px wide); the "Trusted by…" heading at 18px / 23.994px with -0.36px tracking; the lead paragraph at 17.019px / 28.0813px in `#000000b8`. The mobile primary CTA is "Get Started": `#1e96eb`, white Inter 600 15px/22.5px, 8px radius (34px on desktop), 46px tall and 326px wide. The layout probe recorded a visible "Toggle navigation menu" button on mobile (none on desktop), 0 visible header text links on both, and a maximum of 2 card columns on mobile versus 8 on desktop. Mobile font sizes measured: 13px, 14px, 16px, 15px, 18px, 17.019px, 14.015px, 24.019px. CSS breakpoints include max-width 478.4px, 480px, 600px, 640px, 767px, 800px, 900px and 1000px. Other section arrangements at mobile width were not measured. + +## Iteration Guide + +1. Start with a `#f8f8f7` page, a 72px light header with 14px/500 menu items and a blue 34px-radius "Get Started" pill. +2. Centre a large Inter 500 headline with tight negative tracking and one word in `#1e96eb`. +3. Follow with a 19.6px/32.34px lead paragraph in `#000000b8` and two pills (filled blue, outlined blue). +4. Float a large white product screenshot with a soft shadow. +5. Build sections from white 14.88px cards with `0 1px 4px` shadows and Inter 500 32px/40px titles. +6. Use translucent-black greys (`#000000b8`, `#000000ad`, `#0000009e`) for secondary text. +7. Close with a solid `#1e96eb` footer, white headline and 60% white column headings. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/affinity/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/affinity/DESIGN.md new file mode 100644 index 0000000..cca8c0b --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/affinity/DESIGN.md @@ -0,0 +1,239 @@ +--- +version: alpha +name: Affinity +category: "Design & Creative Tools" +description: "Affinity (affinity.studio, by Canva) is a black #000000 page with huge Affinity Serif Variable headlines (148px/700 display, 80px section titles), Canva Sans body at 24px/33.6px in #c4c4c4, lime #a7f175 'Free for individuals' buttons with dark #0e1318 labels and 12px radius (hover #96d969), stone #e0dcd6 secondary buttons and warm-black #211d1d panels." +colors: + canvas: "#000000" + ink: "#ffffff" + primary: "#a7f175" + on-primary: "#0e1318" + primary-hover: "#96d969" + stone: "#e0dcd6" + stone-hover: "#ccc8c2" + surface-warm: "#211d1d" + surface-ink: "#0f1015" + ink-muted: "#c4c4c4" + violet: "#a370fc" + magenta: "#f075f1" + taupe: "#b0a79e" +typography: + display: + fontFamily: "\"Affinity Serif Variable\", \"Canva Sans\", \"Noto Sans Variable\", \"Noto Sans\", -apple-system, \"system-ui\", \"Segoe UI\", Helvetica, Arial, sans-serif" + fontSize: 148px + fontWeight: 700 + lineHeight: 153.92px + display-mobile: + fontFamily: "\"Affinity Serif Variable\", \"Canva Sans\", \"Noto Sans Variable\", \"Noto Sans\", -apple-system, \"system-ui\", \"Segoe UI\", Helvetica, Arial, sans-serif" + fontSize: 64px + fontWeight: 700 + lineHeight: 66.56px + heading: + fontFamily: "\"Affinity Serif Variable\", \"Canva Sans\", \"Noto Sans Variable\", \"Noto Sans\", -apple-system, \"system-ui\", \"Segoe UI\", Helvetica, Arial, sans-serif" + fontSize: 80px + fontWeight: 700 + lineHeight: 78.4px + subheading: + fontFamily: "\"Affinity Serif Variable\", \"Canva Sans\", \"Noto Sans Variable\", \"Noto Sans\", -apple-system, \"system-ui\", \"Segoe UI\", Helvetica, Arial, sans-serif" + fontSize: 56px + fontWeight: 700 + lineHeight: 56px + body: + fontFamily: "\"Canva Sans\", \"Noto Sans Variable\", \"Noto Sans\", -apple-system, \"system-ui\", \"Segoe UI\", Helvetica, Arial, sans-serif" + fontSize: 24px + fontWeight: 401 + lineHeight: 33.6px + button: + fontFamily: "\"Canva Sans\", \"Noto Sans Variable\", \"Noto Sans\", -apple-system, \"system-ui\", \"Segoe UI\", Helvetica, Arial, sans-serif" + fontSize: 16px + fontWeight: 500 + lineHeight: 24px + button-small: + fontFamily: "\"Canva Sans\", \"Noto Sans Variable\", \"Noto Sans\", -apple-system, \"system-ui\", \"Segoe UI\", Helvetica, Arial, sans-serif" + fontSize: 14px + fontWeight: 500 + lineHeight: 22px + link: + fontFamily: "\"Canva Sans\", \"Noto Sans Variable\", \"Noto Sans\", -apple-system, \"system-ui\", \"Segoe UI\", Helvetica, Arial, sans-serif" + fontSize: 14px + fontWeight: 401 + lineHeight: 22px +rounded: + xs: 6px + sm: 8px + md: 10px + lg: 12px + xl: 16px + 2xl: 20px + 3xl: 100px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 6px + s4: 8px + s5: 12px + s6: 14px + s7: 16px + s8: 20px + s9: 22px + s10: 24px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.lg}" + padding: 8px 16px + height: 48px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-small: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button-small}" + rounded: "{rounded.lg}" + padding: 8px 16px + height: 40px + button-secondary: + backgroundColor: "{colors.stone}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.lg}" + padding: 8px 16px + height: 48px + button-secondary-hover: + backgroundColor: "{colors.stone-hover}" + text-link: + textColor: "{colors.ink-muted}" + typography: "{typography.link}" + nav: + textColor: "{colors.ink}" + panel: + backgroundColor: "{colors.surface-warm}" + textColor: "{colors.ink}" + rounded: "{rounded.2xl}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + borderColor: "{colors.taupe}" +--- + +# Affinity + +## Overview + +Affinity is a professional design suite — vector, pixel and page layout in one app — now presented as "Craft in Affinity, scale in Canva". The queued URL affinity.serif.com redirects to the measured site, **www.affinity.studio** (1280px wide, 9345px tall, `lang="en"`), which carries an "Affinity by Canva" lockup. + +The page is black and loud. A thin header holds the lowercase "affinity" logotype, two menus (Product, Discover) and Help, with a lime "Get Affinity" button at right. The hero is a dense collage of colourful illustrations around a massive centred serif headline, "Create freely" — "freely" set in the italic of the same serif — followed by "Professional design, photo editing, and page layout in one app.", a lime "Free for individuals" button, a stone "Get for enterprise" button and a small "by Canva" mark. A bright lime band of customer logos (University of Washington, Public School, WPP, Pentagram, Twitch, Expedia, Hey, T-Mobile) follows. + +Further down: "No more app switching" over an app screenshot with Vector / Pixel / Layout / Canva AI mode tabs; large serif testimonials on black ("Affinity lets us focus on the work…"); "The new standard" with warm-black and cream feature panels (File compatibility, Cross-collaboration); a Cavalry integration section; "Just dropped" product updates (Blend Tool, In-App Scripting); an "Inspired.af" article carousel; "Zero bucks given" with Mac / Windows / iPad download cards; and a footer that ends in a giant "affinity" wordmark. + +The voice is cheeky and confident — "Zero bucks given", "Inspired.af", "Affinity is free for individuals (seriously)". + +## Colors + +Measured on the rendered page (`web/data/extracted/affinity.json`). + +- **canvas `#000000`** — the body and largest area (10054). +- **ink `#ffffff`** — the most-read text colour (1880 characters): headlines and key copy on black. +- **ink-muted `#c4c4c4`** — paragraph copy on black (698 characters), including the 24px intro paragraphs. +- **primary `#a7f175`** — lime: the fill of every main action ("Free for individuals", "Get Affinity", "Download for free") and of the logo band. Hover: **primary-hover `#96d969`**. +- **on-primary `#0e1318`** — near-black label on lime and stone buttons. +- **stone `#e0dcd6`** — the secondary "Get for enterprise" button; hover **stone-hover `#ccc8c2`**. +- **surface-warm `#211d1d`** — warm-black panels (6961 by area): feature cards and the "Just dropped" tiles. +- **surface-ink `#0f1015`** — a cooler near-black panel colour (1167). +- **violet `#a370fc`** — purple text accents (282 characters), such as category tags. +- **magenta `#f075f1`** — one of three tool-mode outline colours, alongside `#2ec7ff` (cyan) and `#ff6124` (orange), each measured on 5 borders around the mode tabs. +- **taupe `#b0a79e`** — footer border colour. + +Light black text `#000000` (1193 characters) appears on the cream panels (`#efe9de`, `#f0e7de`) and white cards. Tinted cards measured in coral `#e35b67`, aqua `#92dcde` and pink `#ffa9db`, each covering the same area (398) — a set of colour-coded tiles. + +## Typography + +- **Affinity Serif Variable** — a variable serif with roman and italic, used for all headlines (731 characters). +- **Canva Sans** (400–700) — all body and UI text (3467 characters), shared with Canva. + +Measured roles: + +- **display** — Affinity Serif 148px / 700 / 153.92px: "Create freely". +- **heading** — 80px / 700 / 78.4px (line height below the size): "No more app switching", "Zero bucks given". +- **subheading** — 56px / 700 / 56px: panel titles such as "File compatibility". +- A 48px serif size carries the testimonial quotes (487 characters) and 32px appears in card titles. +- **body** — Canva Sans 24px / 401 / 33.6px for intro paragraphs; 16px is the most common size (2106 characters). +- **button** — 16px / 500 / 24px; **button-small** — 14px / 500 / 22px. +- **link** — 14px / 401 / 22px for footer and inline links. + +The computed body weight is 401 (2798 characters) — the variable Canva Sans is set one unit above regular. No letter-spacing was measured on any size. Headline weight is always 700; the italic of the serif is used for single emphasised words ("freely"). + +**Substitute:** both families are served by the site; the declared fallbacks are Noto Sans, system UI fonts, Helvetica and Arial. + +## Layout + +The hero band measured content from x=152 to x=1240; the main black band from x=279 to x=1001 for centred headline blocks. Feature panels sit in two-up rows, the download section in three columns (Mac, Windows, iPad), and the article carousel three-up with arrows. The extractor counted up to 5 card columns (the logo band). + +Spacing: gaps of 16px (58 uses), 2px (52), 4px (30), 8px and 24px; paddings of 4px, 12px, 16px, 24px and 40px, with 64px and 120px for section padding. Section headlines are centred; panel content is left-aligned. + +## Elevation & Depth + +On black, depth is drawn with light edges rather than shadows: the most common shadow (6 uses) combines `rgba(255, 255, 255, 0.12) 0px 1px 0.5px 0px inset` and `rgba(255, 255, 255, 0.1) 0px 0px 0px 0.5px inset` with dark outer shadows `rgba(0, 0, 0, 0.21) 0px 2px 5px 0px, rgba(0, 0, 0, 0.14) 0px 6px 12px 0px` — a lit top edge on floating UI. 1px white inset rings at 15% and 50% opacity outline selected controls. Most depth comes from imagery: illustrations, app screenshots and photo collages with saturated colour against black. + +## Shapes + +- **12px (lg)** — the dominant radius (58 uses): all buttons and many cards. +- **10px** (23) and **20px** (17) — tiles and larger panels. +- **9999px** (19) — pills such as the mode tabs and small tags. +- **6px**, **8px**, **16px** and **100px** — small UI, the header's Product/Discover menu buttons (6px) and circular arrow buttons. + +## Components + +**Primary button** — lime `#a7f175`, `#0e1318` label in Canva Sans 16px/500, 12px radius, `8px 16px`, 48px tall. Hover `#96d969`. The header and download cards use the 40px, 14px version. + +**Secondary button** — stone `#e0dcd6` with the same label colour and geometry; hover `#ccc8c2`. + +**White button** — `#ffffff` with black 14px/500 text, 40px tall ("Learn more" in the Just dropped tiles). + +**Mode tabs** — a pill row under the app screenshot: Vector, Pixel, Layout, Canva AI, each with its own outline colour. + +**Feature panel** — warm-black `#211d1d` or cream, 20px radius, a small overline, a 56px serif title, a paragraph and a large collage. + +**Testimonial** — a lime quote mark, a 48px serif quote in white on black, the author's avatar and name, and the client logo at right. + +**Download card** — platform name, short description and a small lime "Download for free" button above a product image. + +**Footer** — black, four link columns (Product, Discover, Help, Contact), then a full-width "affinity" wordmark with "by Canva". + +## Design System Architecture + +No public Affinity design-system documentation was found in the sources checked: https://www.affinity.studio/press and https://www.affinity.studio/brand both returned 404. + +The site is built on Canva's web stack: fonts load from `static.canva.com`, the favicon from `static.canva.com/domain-assets/affinity/`, and the 397 root custom properties have hashed names (for example `--Mm01yw: #612dae`, `--d-GAYw: #0e1318`, `--A4X7Bw: #373434`), which are compiler output rather than a public token API. The brand layer on top is small: Affinity Serif Variable for headlines, Canva Sans for UI, lime as the action colour, stone as the secondary, and warm blacks for surfaces. + +## Do's and Don'ts + +**Do** +- Set headlines in Affinity Serif at 700, very large, and use its italic for one emphasised word. +- Use lime `#a7f175` with a `#0e1318` label for every primary action; stone `#e0dcd6` for the secondary. +- Keep the page black with `#c4c4c4` body copy at 24px for intros. +- Put saturated illustration and product screenshots against black. +- Round buttons at 12px; use pills only for tabs and tags. + +**Don't** +- Don't put white text on the lime button; the measured label is `#0e1318`. +- Don't use a sans for headlines. +- Don't add letter-spacing; none was measured. +- Don't use heavy drop shadows on cards; use light inset edges. +- Don't treat the browser-default link colours recorded on empty links as brand colours. + +## Responsive Behavior + +From the extractor's 390px pass: "Create freely" measured 64px / 700 with a 66.56px line height (148px on desktop); intro paragraphs measured 18px / 25.2px (24px / 33.6px on desktop); the "Free for individuals" button measured 14px / 22px text, 40px tall and 162px wide (48px tall on desktop). The extractor recorded a visible menu toggle labelled "Show main menu" and 1 header link. Content measured from x=32 to x=358. Breakpoint widths were not measured. + +## Iteration Guide + +1. Black `#000000` canvas, white headlines, `#c4c4c4` paragraphs. +2. Headline: Affinity Serif 148px/700 in the hero, 80px for sections, 56px in panels. +3. Actions: lime `#a7f175` buttons with `#0e1318` labels, 12px radius, 48px or 40px tall. +4. Panels: `#211d1d` or cream with 20px radius and big imagery. +5. Keep colour in imagery and the lime band; take any new colour from the measured set. +6. Run `node web/scripts/verify-designs.mjs --slug=affinity` after changes. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/affirm/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/affirm/DESIGN.md new file mode 100644 index 0000000..02646c9 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/affirm/DESIGN.md @@ -0,0 +1,189 @@ +--- +version: alpha +name: Affirm +category: "Banking & Insurance" +description: "Affirm (affirm.com), pay-over-time lender: dark #13131f canvas, light-weight 80px Axiforma headlines, white 96px-radius pill buttons with #9cadfc hover, 24px cards with a faint periwinkle inset ring." +colors: + canvas: "#13131f" + ink: "#9f9f9f" + primary: "#ffffff" + on-primary: "#0c0c14" + ink-4: "#a8a9fc" + ink-5: "#f7f7f8" + primary-hover: "#9cadfc" + text-input-text: "#000000" + card-text: "#101820" +typography: + display: + fontFamily: "\"Axiforma for Affirm\", Axiforma, Calibre, sans-serif" + fontSize: 80px + fontWeight: 300 + lineHeight: 88px + letterSpacing: "-3.2px" + display-mobile: + fontFamily: "\"Axiforma for Affirm\", Axiforma, Calibre, sans-serif" + fontSize: 40px + fontWeight: 300 + lineHeight: 44px + letterSpacing: "-4%" + heading: + fontFamily: "\"Axiforma for Affirm\", Axiforma, Calibre, sans-serif" + fontSize: 48px + fontWeight: 300 + lineHeight: 52.8px + subheading: + fontFamily: "\"Axiforma for Affirm\"" + fontSize: 30px + fontWeight: 400 + body: + fontFamily: Calibre, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 20px + button: + fontFamily: "\"Axiforma for Affirm\", Axiforma, Calibre, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 14px + nav: + fontFamily: "\"Axiforma for Affirm\", Axiforma, Calibre, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 14.4px + input: + fontFamily: Arial + fontSize: 18px + fontWeight: 400 + lineHeight: 21.06px +rounded: + xs: 10px + sm: 16px + md: 24px + lg: 25px + xl: 25.22px + 2xl: 36px + 3xl: 96px +spacing: + s1: 1px + s2: 1.5px + s3: 2px + s4: 4px + s5: 8px + s6: 9.82px + s7: 10px + s8: 12px + s9: 14px + s10: 15px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 14px 23px + height: 44px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 14px 23px + height: 44px + boxShadow: rgb(12, 12, 20) 0px 0px 0px 1px inset + link: + textColor: "{colors.primary}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 14px 23px + nav: + textColor: "{colors.primary}" + nav-link: + textColor: "{colors.primary}" + typography: "{typography.nav}" + padding: 14px 4px + text-input: + backgroundColor: "{colors.primary}" + textColor: "{colors.text-input-text}" + typography: "{typography.input}" + rounded: "{rounded.2xl}" + padding: 20px 104px 20px 54px + height: 54px + borderColor: "{colors.on-primary}" + card: + textColor: "{colors.card-text}" + rounded: "{rounded.md}" + padding: 1.5px + boxShadow: rgba(156, 173, 252, 0.1) 0px 0px 0px 1.5px inset +--- + +# Affirm + +## Overview +Affirm is a pay-over-time (buy now, pay later) lender and card issuer. The measured home page (title "Affirm | Pay over time with flexible payment plans and no fees") is a dark-mode marketing page: a deep indigo-black canvas (`{colors.canvas}` #13131f), an 80px light-weight headline "Flexible plans for every purchase", a white pill button "See plans", then a hero image of a phone held in a hand with floating product tiles (homeware, fashion, travel, electronics, luxury) that tilt on a purple-to-teal radial glow. Further down, a second 48px light headline "Pay how you want, wherever you want" introduces large rounded panels such as "Pay with Affirm wherever you go" with a short paragraph, an "Explore the Affirm Card" pill button and a blue-violet gradient card image of a Visa debit card. + +The header is a thin utility strip ("For shoppers", "For businesses") above a rounded glass navigation bar holding the logo, Discover, Shop and Help Center menus, a search icon, a language globe, "Log in", a white "Sign up" pill and a ghost pill "Check my purchasing power". The page text says the product names are Affirm Card, Affirm Money Account, Affirm Pay in 4 and the browser extension. The copy voice is friendly and direct, opening with "We're glad you're here!" and favoring "shop" and "pay over time". The page measured 6,833px tall at 1280px. + +## Colors +Measured from the rendered page: +- **Canvas** `{colors.canvas}` #13131f, also published as `--color-ui-colors-background-dark`. +- **Primary** `{colors.primary}` #ffffff: the fill of the primary pill buttons, with `{colors.on-primary}` #0c0c14 as label color (`--color-ui-text-dark` is #0c0c14). +- **Primary hover** `{colors.primary-hover}` #9cadfc: measured on hover for "Sign up" and "See plans"; the ghost button "Check my purchasing power" changes its text and border from white to #9cadfc. +- **Ink** `{colors.ink}` #9f9f9f is the most-read text color (1,780 characters), with white (#ffffff, 1,665 characters) for headlines; `{colors.ink-4}` #a8a9fc tints labels and chips and `{colors.ink-5}` #f7f7f8 is the inverse text used by the h2. +- **Card text** `{colors.card-text}` #101820 and **text-input-text** `{colors.text-input-text}` #000000 are used on light cards and inside the search field. +- The shipped CSS publishes a fuller palette as root variables: `--color-primary-base` #4a4af4, `--color-primary-darkest` #212189, `--color-primary-light` #a8a9fc, neutral backgrounds #f4f3f2, #f0f5f7, #ede9e6 and #d3e3ea, success greens #0a894c / #105432 / #97e8b8 / #e8f9ef, warning #ffca61 and #ffe98f, destructive #ff6d50 and #feaa97, plus `--glass-background-color: #1b1b30cc` and a hero radial gradient `radial-gradient(44.05% 43.36% at 52.67% 56.72%,#9cadfc 0%,#296a7d 54.81%,#13131f 100%)`. These are published but only some appear on the measured home frame. +- `--swiper-theme-color: #007aff` is a carousel-library default, not a brand color. + +## Typography +The measured body font stack is `"Axiforma for Affirm", Axiforma, Calibre, sans-serif`, with Calibre (400, 600) as the body face (`--font-family-body: "Calibre", sans-serif`). Loaded weights for Axiforma for Affirm are 300, 400, 500 and 600. +- `display` 80px / 300 / 88px, letter-spacing -3.2px: the h1. +- `display-mobile` 40px / 300 / 44px, letter-spacing -4%: the h1 at 390px. +- `heading` 48px / 300 / 52.8px: section headlines such as "Pay how you want, wherever you want". +- `subheading` 30px / 400. +- `body` Calibre 14px / 400 / 20px. +- `button` 14px / 400 / 14px. +- `nav` 12px / 400 / 14.4px. +- `input` Arial 18px / 400 / 21.06px: the search input uses a system font. +The character of the page is large, light and tightly tracked headlines against small functional text. Axiforma is a commercial typeface (licensed to Affirm as a custom cut); where it is unavailable, a geometric sans at weight 300 is the closest generic choice, but the measured stack itself lists only Axiforma and Calibre then `sans-serif`. + +## Layout +The page is 1280px wide with a 64px header (`--header-height: 64px`). The hero is centered: headline, a two-line centered paragraph, a single pill, then the phone image spanning the full width and bleeding off both edges. Lower sections are large rounded panels with a text column on the left and a media card on the right. Measured spacing values are 1, 1.5, 2, 4, 8, 9.82, 10, 12, 14 and 15px for small steps. Vertical rhythm is generous: the capture shows a large empty band between the hero image and the next headline. + +## Elevation & Depth +Depth comes from glow and hairlines, not shadow. The only shadows measured are `rgba(156, 173, 252, 0.1) 0px 0px 0px 1.5px inset` (15 elements, a faint periwinkle ring on cards and the nav) and `rgb(12, 12, 20) 0px 0px 0px 1px inset` (an inner outline on the secondary button). Translucent glass is used for navigation (`--glass-background-color: #1b1b30cc`) and the hero uses a radial gradient from #9cadfc through #296a7d to the canvas. + +## Shapes +Rounded everywhere: 24px for cards and panels (43 elements, `{rounded.md}`), 96px pills for buttons (12 elements, `{rounded.3xl}`), 16px top corners on media (`{rounded.sm}`), 25px and 25.22px top corners on large cards (`{rounded.lg}`, `{rounded.xl}`), 10px (`{rounded.xs}`) and 36px for the text input (`{rounded.2xl}`). The base radius variable is `--border-radius-base: 8px`. + +## Components +- **button-primary**: white background, #0c0c14 text, 14px, 96px radius, padding 14px 23px, height 44px. Hover swaps the fill to `{colors.primary-hover}`. +- **button-secondary**: same as primary with a 1px inner outline `rgb(12, 12, 20) 0px 0px 0px 1px inset`. +- **ghost button** ("Check my purchasing power"): transparent fill, white text and border, 96px radius, 44px high; hover turns text and border #9cadfc. +- **text-input**: white background, black Arial 18px, 36px radius, padding 20px 104px 20px 54px, height 54px. +- **card**: 24px radius, 1.5px padding, periwinkle inset ring. +- **nav-link**: white 12px links with padding 14px 4px. + +## Design System Architecture +Sources opened: https://www.affirm.com/ (home page and its shipped CSS). Affirm does not link a public brand guideline or design system from its home page; the page links "Press" to its investor newsroom and "For developers" documentation. The de-facto system is the root variable set measured in the page CSS: semantic names such as `--color-ui-colors-background`, `--color-ui-colors-text-inverse`, `--color-primary-base`, `--color-greyscale-grey-60`, status scales (success, warning, destructive, each with lightest/light/base/dark/darkest), type-scale variables like `--line-height-xxxs: 14px` and `--line-height-base-xl: 31px`, and layout variables such as `--cardHeight: 756px`. + +The practical consequence for anyone rebuilding the page is that color and type choices should be taken from these named variables rather than re-sampled from screenshots. The semantic split is clear: `ui-colors` names (background, background-dark, text-inverse, caption, border-neutral) describe roles, `primary`, `success`, `warning` and `destructive` are ramps, and `greyscale` carries numbered greys from black-5 through black-80 and grey-50 through grey-90. + +## Do's and Don'ts +- Do pair white pill buttons (96px radius) with #0c0c14 text on the #13131f canvas. +- Do set headlines in Axiforma weight 300 with tight tracking (-3.2px at 80px). +- Do use #9cadfc for hover and glow accents. +- Do keep cards at 24px radius with the faint periwinkle ring. +- Don't use heavy drop shadows; the system uses rings and glow. +- Don't use bold headlines; the measured headlines are weight 300. +- Don't treat the Swiper default #007aff as a brand blue. + +## Responsive Behavior +Measured at 390px: the h1 drops from 80px to 40px (line-height 44px, letter-spacing -4%), and the "See plans" button stays a white 14px label on #0c0c14 text. Column counts, breakpoints and menu collapse on mobile were not measured. + +## Iteration Guide +1. Canvas #13131f, white pill actions, text #9f9f9f for secondary copy. +2. Headlines 80/48px in weight 300; mobile h1 40px. +3. Round everything: 24px cards, 96px pills. +4. Add one periwinkle (#9cadfc) accent for hover and glows. +5. Re-run `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=affirm --force --no-motion` after site changes, then `node web/scripts/verify-designs.mjs --slug=affirm`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/agentic/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/agentic/DESIGN.md new file mode 100644 index 0000000..dfe4e62 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/agentic/DESIGN.md @@ -0,0 +1,71 @@ +# Design System Inspired by Agentic + +> Category: Themed & Unique +> Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows. + +## 1. Visual Theme & Atmosphere + +Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows. + +- **Visual style:** modern, bold +- **Color stance:** surface/subtle layers +- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability. + +## 2. Color + +- **Primary:** `#FF5701` — Token from style foundations. +- **Secondary:** `#F6F6F1` — Token from style foundations. +- **Success:** `#16A34A` — Token from style foundations. +- **Warning:** `#D97706` — Token from style foundations. +- **Danger:** `#DC2626` — Token from style foundations. +- **Surface:** `#FFFFFF` — Token from style foundations. +- **Text:** `#111827` — Token from style foundations. +- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility. + +- Favor Primary (#FF5701) for CTA emphasis. +- Use Surface (#FFFFFF) for large backgrounds and cards. +- Keep body copy on Text (#111827) for legibility. + +## 3. Typography + +- **Scale:** 14/16/18/24/32/40 +- **Families:** primary=Playfair Display, display=Playfair Display, mono=JetBrains Mono +- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900 +- Headings should carry the style personality; body text should optimize scanability and contrast. + +## 4. Spacing & Grid + +- **Spacing scale:** 8pt baseline grid +- Keep vertical rhythm consistent across sections and components. +- Align columns and modules to a predictable grid; avoid ad-hoc offsets. + +## 5. Layout & Composition + +- Prefer clear content blocks with consistent internal padding. +- Keep hierarchy obvious: headline → support text → primary action. +- Use whitespace to separate concerns before adding borders or shadows. + +## 6. Components + +- Buttons: primary action uses `#FF5701`; secondary actions stay neutral. +- Inputs: strong focus-visible states, clear labels, and predictable error messaging. +- Cards/sections: use consistent radii, spacing, and elevation strategy across the page. + +## 7. Motion & Interaction + +- Use subtle transitions that emphasize Primary (#FF5701) as the interaction signal. +- Default to short, purposeful transitions (150–250ms) with stable easing. +- Ensure hover, focus-visible, active, disabled, and loading states are explicit. + +## 8. Voice & Brand + +- Tone should reflect the visual style: concise, confident, and product-specific. +- Keep microcopy action-oriented and avoid generic filler language. +- Preserve the style identity in headlines while keeping UI labels literal and clear. + +## 9. Anti-patterns + +- Do not introduce off-palette colors when an existing token can solve the problem. +- Do not flatten hierarchy by using the same type size/weight for all text. +- Do not add decorative effects that reduce readability or accessibility. +- Do not mix unrelated visual metaphors in the same interface. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/agoda/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/agoda/DESIGN.md new file mode 100644 index 0000000..c963dc4 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/agoda/DESIGN.md @@ -0,0 +1,451 @@ +--- +version: alpha +name: Agoda +category: "Thai Brands" +description: "Agoda's travel-booking homepage: white #ffffff canvas, Helvetica Neue throughout (24px/700 uppercase white hero 'SEE THE WORLD FOR LESS', 24px/600 #252c38 section heads, 14px/12px UI text), interaction blue #2067da for the 44px pill SEARCH button, active tabs and outlined pills, a #f8f7f9 16px-radius search panel with a soft shadow, #5e6b82 secondary text, #c53829 prices, 16px-radius result cards and 999px chips, plus the six-colour logo dots." + +colors: + primary: "#2067da" + on-primary: "#ffffff" + primary-pressed: "#1751ae" + primary-subtle: "#e5efff" + link: "#5392f9" + canvas: "#ffffff" + surface-blue: "#eff4fc" + surface-panel: "#f8f7f9" + surface-deals: "#f3efd8" + surface-dark: "#2a2a2e" + sticky-bar: "#20274d" + ink: "#252c38" + ink-muted: "#5e6b82" + ink-black: "#000000" + input-text: "#2a2a2e" + on-dark-muted: "#d7d7db" + price: "#c53829" + positive: "#007e3e" + border: "#dddfe2" + hairline: "#5e6b8252" + logo-black: "#292929" + logo-red: "#ff2938" + logo-yellow: "#fdb812" + logo-green: "#00b057" + logo-purple: "#af38b1" + logo-blue: "#00aae0" + interaction-guideline: "#478cf7" + +typography: + display-hero: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 24px + fontWeight: 700 + lineHeight: 31.2px + textTransform: uppercase + display-hero-mobile: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 24px + fontWeight: 700 + lineHeight: 31.2px + textTransform: uppercase + heading-section: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 24px + fontWeight: 600 + lineHeight: 29px + heading-card: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 20px + fontWeight: 600 + lineHeight: 24px + button: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 16px + fontWeight: 600 + lineHeight: 20.33px + field-value: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 22.8571px + body: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 14px + fontWeight: 600 + lineHeight: 18.19px + body-light: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 14px + fontWeight: 300 + lineHeight: 14px + ui: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 13px + fontWeight: 400 + lineHeight: 18.5714px + caption: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 17.1428px + micro: + fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 10px + fontWeight: 400 + +rounded: + xs: 2px + sm: 4px + md: 8px + lg: 16px + tab: 24px + pill: 9999px + +spacing: + xxs: 2px + xs: 4px + sm: 8px + md: 12px + lg: 16px + xl: 24px + xxl: 32px + xxxl: 48px + huge: 64px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 12px 24px + height: 44px + button-outlined: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + typography: "{typography.ui}" + rounded: "{rounded.pill}" + border: "1px solid #5e6b8252" + padding: 12px 24px + height: 44px + button-outlined-hover: + border: "1px solid #2067da" + button-ghost: + backgroundColor: "#ffffff00" + textColor: "{colors.primary}" + rounded: "{rounded.pill}" + padding: 8px 16px + height: 36px + chip: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.caption}" + rounded: "{rounded.pill}" + border: "1px solid #5e6b8252" + padding: 4px 16px + height: 36px + chip-selected: + backgroundColor: "{colors.primary-subtle}" + textColor: "{colors.primary-pressed}" + border: "2px solid #2067da" + tab-active: + textColor: "{colors.primary}" + rounded: "{rounded.tab}" + padding: 4px 12px + tab-inactive: + textColor: "{colors.ink-muted}" + rounded: "{rounded.tab}" + padding: 4px 12px + search-panel: + backgroundColor: "{colors.surface-panel}" + rounded: "{rounded.lg}" + padding: 32px 48px 64px + shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 3px + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.input-text}" + typography: "{typography.field-value}" + rounded: "{rounded.md}" + border: "1px solid #dddfe2" + height: 66px + card-promo: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.caption}" + rounded: "{rounded.md}" + padding: 16px + card-result: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.caption}" + rounded: "{rounded.lg}" + border: "1px solid #5e6b8252" + padding: 8px + link: + textColor: "{colors.link}" + typography: "{typography.ui}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-black}" + typography: "{typography.ui}" + height: 60px + sticky-search-bar: + backgroundColor: "{colors.sticky-bar}" + padding: 11px 0px + height: 70px + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-muted}" + typography: "{typography.body}" + footer-legal: + backgroundColor: "{colors.surface-dark}" + textColor: "{colors.on-dark-muted}" + typography: "{typography.body-light}" +--- + +## Overview + +Agoda's homepage is a booking tool first and a magazine second. The top of the page is a short full-bleed aerial photograph of turquoise water and green coastline, with the hero line "SEE THE WORLD FOR LESS" set in white, bold, uppercase Helvetica Neue. Directly over the photo floats the search panel: a pale `{colors.surface-panel}` (`#f8f7f9`) card with 16px corners and a soft shadow, holding product tabs (Hotels, Flights, Homes & Apts, Flight + Hotel, Activities, Airport transfer), stay-type chips (Overnight Stays / Day Use Stays), a destination field, check-in/check-out fields, an occupancy field, a checkbox, an "Add a flight" ghost button and the wide blue pill **SEARCH** button that overhangs the panel's bottom edge. + +Below the fold the page becomes a long scroll of horizontal carousels inside a white bordered container: flight deals ("Flight to Chiang Mai"), "Top things to do", category tiles ("Explore Chiang Mai your way"), hotel cards ("Need more hotels for your trip?"), and "Top destinations in Thailand" — each headed by a 24px/600 title, often with a small green discount badge ("Up to 8% off"). Cards are white, with photographs on top, compact 12px meta text, star ratings, blue review scores and red Thai-baht prices aligned bottom-right with struck-through originals. + +The brand's personality lives in the logo — the lowercase "agoda" wordmark over five coloured dots (red, yellow, green, purple, blue) — and in playful 3D illustrations on the category tiles. The UI itself is restrained: one interaction blue `#2067da`, a deep slate ink `#252c38`, a grey-blue secondary text `#5e6b82`, and white. + +**Key Characteristics:** +- Interaction blue `{colors.primary}` (`#2067da`) for the primary button, active tabs, outlined-button labels and selected chips. +- Pill everything that is clickable: buttons, chips and outlined actions are 999px-radius. +- Cards at 16px radius with a translucent `#5e6b8252` hairline; promo cards at 8px. +- Helvetica Neue at small sizes (12–14px) with heavy use of weight 600. +- Red `{colors.price}` (`#c53829`) prices; green `#007e3e` for positive/discount signals. +- Dense carousels with round white arrow buttons on the right edge. + +### Imagery & Art Direction +- **Hero**: a single aerial travel photograph (sea, beach, forest) — bright, saturated, daylight. +- **Cards**: real property and activity photos, cropped to a fixed top area; overlay badges in blue ("Booked 4 times today", "Best seller", "9 sold in last 24 hours") sit on the photo's top-left corner. +- **Category tiles**: small playful 3D illustrations of people and objects (tours, restaurants, museums) on white. +- **Destination tiles**: landmark photos with the city name and an accommodation count beneath. +- **Icons**: thin line icons in the search fields (calendar, people, magnifier) and product tabs. + +### Interaction Cues +- Round white carousel arrows with a soft shadow sit on the right edge of each row. +- Dot pagination (blue active, grey inactive) under hotel carousels. +- A floating close button (blue circle with white ×) dismisses the app-promo card. + +### Voice & Microcopy +Short, direct and deal-focused: "SEE THE WORLD FOR LESS", "Save 10% on your 1st app booking!", "Just scan the QR code for instant savings", "Up to 20% off", "Booked 8 times today", "Free cancellation", "Per night before taxes". The press release describes the intended tone as "thoughtful, surprising, unexpected, playful and humble" ([press](https://www.agoda.com/press/agoda-new-brand-identity/)). + +## Colors + +> **Source pages:** `https://www.agoda.com/` (extraction + probes in SOURCES.json); logo palette from the official [logo guidelines](https://www.agoda.com/press/agoda-logo-guidelines/). ADS variable names (from `:root`) are given in brackets. + +### Interaction +- **Interaction Blue** (`{colors.primary}` — `#2067da`) [`--ads-border-primary-base-strong`]: SEARCH button, active product tab, outlined-button text ("List your place", "Create account", "Sign in"), selected-chip border, focus ring. +- **On Primary** (`{colors.on-primary}` — `#ffffff`). +- **Blue Pressed** (`{colors.primary-pressed}` — `#1751ae`) [`--ads-colors-notice-state-pressed`]: selected-chip label ("Overnight Stays"). +- **Blue Subtle** (`{colors.primary-subtle}` — `#e5efff`): selected-chip fill. +- **Link Blue** (`{colors.link}` — `#5392f9`): computed colour of nav/footer anchors and skip link. +- **Guideline interaction colour** (`{colors.interaction-guideline}` — `#478cf7`): the press-site guideline names `#478cf7` as the "Product interaction color … used for Agoda products' call-to-action buttons". The live site ships `#2067da` for its CTA, so the live value is `primary`; `#478cf7` is kept only as the documented brand value. + +### Surface +- **Canvas** (`{colors.canvas}` — `#ffffff`): page and card background. +- **Surface Blue** (`{colors.surface-blue}` — `#eff4fc`) [`--ads-colors-generic-base-on-intent`]: large pale-blue areas. +- **Surface Panel** (`{colors.surface-panel}` — `#f8f7f9`): the search panel. +- **Surface Deals** (`{colors.surface-deals}` — `#f3efd8`) [`--ads-colors-deals-base-inverted-subtle`]: deals tint. +- **Surface Dark** (`{colors.surface-dark}` — `#2a2a2e`): legal strip at the bottom of the page. +- **Sticky Bar** (`{colors.sticky-bar}` — `#20274d`): full-width compact search bar that appears on scroll. + +### Text +- **Ink** (`{colors.ink}` — `#252c38`) [`--ads-colors-trips-base-default`, `--ads-colors-feedback-neutral`]: headings and card text. +- **Ink Muted** (`{colors.ink-muted}` — `#5e6b82`) [`--ads-colors-generic-base-intent`]: most-read text colour — meta lines, inactive tabs, footer links. +- **Ink Black** (`{colors.ink-black}` — `#000000`): body element default, field values. +- **Input Text** (`{colors.input-text}` — `#2a2a2e`): destination field text. +- **On Dark Muted** (`{colors.on-dark-muted}` — `#d7d7db`): legal copy on the dark strip. + +### Semantic +- **Price** (`{colors.price}` — `#c53829`): sale prices in result cards (ADS uses `rgba(197,56,41,.16)` for `--ads-border-negative-base-subtle`, i.e. the same hue as its negative intent). +- **Positive** (`{colors.positive}` — `#007e3e`) [`--ads-border-positive-base-strong`]: positive/green intent; the only green background measured on the page. The discount badges in the capture are green; the per-element value was not separately probed. + +### Lines +- **Border** (`{colors.border}` — `#dddfe2`): search fields. +- **Hairline** (`{colors.hairline}` — `#5e6b8252`, ink-muted at 32% alpha): result cards, chips, outlined buttons — the most frequent border colour. + +### Logo Palette (official) +From the [logo guidelines](https://www.agoda.com/press/agoda-logo-guidelines/) "Primary colors" — "the only ones you should use in our logo": +- `{colors.logo-black}` `#292929` (PMS Neutral Black C) · `{colors.logo-red}` `#ff2938` (PMS 1795C) · `{colors.logo-yellow}` `#fdb812` (PMS 124C) · `{colors.logo-green}` `#00b057` (PMS 7739C) · `{colors.logo-purple}` `#af38b1` (PMS 2069C) · `{colors.logo-blue}` `#00aae0` (PMS 299C). +These are logo colours, not UI fills. + +## Typography + +### Font Family +Every measured text element renders in **Helvetica Neue** (stack `"Helvetica Neue", Helvetica, Arial, sans-serif`); it is the only family in the character-weighted table. The 2019 brand refresh announced a "custom Agoda typeface" ([press](https://www.agoda.com/press/agoda-new-brand-identity/)), visible in the logo wordmark, but the web UI does not load it — no Agoda webfont was among the loaded fonts (only an `icons` icon font). + +### Hierarchy + +| Token | Size | Weight | Line Height | Notes | +|---|---|---|---|---| +| `{typography.display-hero}` | 24px | 700 | 31.2px | Uppercase, white, on photo | +| `{typography.display-hero-mobile}` | 24px | 700 | 31.2px | Unchanged at 390px | +| `{typography.heading-section}` | 24px | 600 | 29px | Section titles, `#252c38` | +| `{typography.heading-card}` | 20px | 600 | 24px | App-promo card title | +| `{typography.button}` | 16px | 600 | 20.33px | SEARCH label | +| `{typography.field-value}` | 16px | 400 | 22.8571px | Search field values (dates) | +| `{typography.body}` | 14px | 600 | 18.19px | Most frequent size; card names, footer links | +| `{typography.body-light}` | 14px | 300 | 14px | Legal line on dark strip | +| `{typography.ui}` | 13px | 400 | 18.5714px | Body element default, nav, outlined buttons | +| `{typography.caption}` | 12px | 400 | 17.1428px | Chips, meta text, card body | +| `{typography.micro}` | 10px | 400 | — | Tiny labels ("New!", "Bundle and save!") | + +Weight 600 carries the most characters on the page; 400 is second. No letter-spacing other than `normal` was measured. + +### Principles +- Small and dense: 12px and 14px make up the large majority of text. +- Emphasis by weight 600, not by size. +- Uppercase only for the hero line and the SEARCH label. + +### Note on Font Substitutes +Helvetica Neue is a system/commercial font (Linotype). On platforms without it, the site's own stack falls back to Helvetica, then Arial. Keep that stack. + +## Layout + +### Spacing System +- Measured gaps are dominated by 4px and 8px, then 16px and 12px; paddings by 4px, 2px, 8px, 12px, 16px, 24px. +- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.xxxl}` 48px · `{spacing.huge}` 64px. +- **Search panel padding**: 32px 48px 64px. +- **Card padding**: 16px (promo), 8px (flight result). + +### Grid & Container +- Content column 900px wide at a 1280px viewport (hero title and section titles measure 900px); the search fields are 804px. +- Carousels show 4–6 cards with a round arrow button overlapping the right edge. +- Result cards: 180×153px flight cards; hotel and activity cards in rows of five. + +### Whitespace Philosophy +Tight inside components (4–8px), generous between sections. Content sits in a centred white container with a hairline border; the page relies on photography for colour. + +## Elevation & Depth + +| Level | Treatment | Use | +|---|---|---| +| 0 | Flat + `#5e6b8252` hairline | Result cards, chips | +| 1 | `rgba(4, 7, 10, 0.16) 0px 1px 3px 0px` | Light raise (measured) | +| 2 | `rgba(4, 7, 10, 0.24) 0px 2px 7px 0px` | Nav pills, carousel arrows (most frequent shadow) | +| 3 | `rgba(0, 0, 0, 0.2) 0px 2px 8px 3px` | Search panel over the hero | +| Focus | `0 0 0 2px #fff, 0 0 0 4px #2067da` | Focus ring declared in the CSS | + +## Shapes + +### Border Radius Scale + +| Token | Value | Use | +|---|---|---| +| `{rounded.xs}` | 2px | Most frequent: badges, small tags, anchor focus box | +| `{rounded.sm}` | 4px | Input element | +| `{rounded.md}` | 8px | Search fields (date pair uses 8px 0px 0px 8px / 0px 8px 8px 0px), promo card | +| `{rounded.lg}` | 16px | Search panel, result cards | +| `{rounded.tab}` | 24px | Product tabs | +| `{rounded.pill}` | 9999px | Buttons and chips (rendered as 999px) | + +The check-in / check-out fields form one joined control: the left half rounds only its left corners and the right half only its right corners. The hero photograph has a large rounded lower-left corner in the capture (value not measured). + +## Components + +### Buttons +**`button-primary`** — SEARCH: `{colors.primary}` fill, white `{typography.button}` uppercase label, `{rounded.pill}`, padding 12px 24px, 44px tall, 490px wide, centred and overhanging the bottom of the search panel. No hover change was measurable on the button element. + +**`button-outlined`** — "List your place", "Create account": white fill, `{colors.primary}` label in `{typography.ui}`, 1px `#5e6b8252` border, pill, padding 12px 24px, 44px tall. +- **`button-outlined-hover`**: border becomes `#2067da` (measured hover); fill and text unchanged. +- "Sign in" is the same shape with a transparent fill. + +**`button-ghost`** — "+ Add a flight": transparent, `{colors.primary}` 14px/600 label, pill, padding 8px 16px, 36px tall. + +### Chips +**`chip`** — "Day Use Stays", category filters (Attractions, Transportation, Food …): white, `{colors.ink}` 12px label, 1px `#5e6b8252` border, pill, padding 4px 16px, 36px tall. +**`chip-selected`** — "Overnight Stays": `{colors.primary-subtle}` fill, `{colors.primary-pressed}` label, 2px `#2067da` border. +Small "See all" chips are 28px tall with 1px 12px padding. + +### Tabs +**`tab-active` / `tab-inactive`** — product tabs with an icon and label: 24px radius, 4px 12px padding, active label `{colors.primary}`, inactive `{colors.ink-muted}`. + +### Inputs & Forms +**`text-input`** — search fields: white, 1px `#dddfe2` border, `{rounded.md}`, 66px tall, leading line icon, value in `{typography.field-value}` with a 12px `#5e6b82` sub-label ("Saturday", "1 room"). Destination input text `#2a2a2e`, placeholder "Enter a destination or property". + +### Cards & Containers +**`search-panel`** — `{colors.surface-panel}`, `{rounded.lg}`, padding 32px 48px 64px, Level 3 shadow. +**`card-promo`** — app promotion card ("Save 10% on your 1st app booking!"): white, 8px radius, 16px padding, centred QR code. +**`card-result`** — flight/hotel/activity cards: white, 16px radius, `#5e6b8252` hairline, 8px padding, photo top, 12px meta, red `{colors.price}` price bottom-right. + +### Navigation +**`nav`** — white 60px header: logo left, product links (Flight + Hotel with a red "Bundle and save!" micro label, Hotels & Homes, Transport with a red "New!" label, more menu), then outlined "List your place", language flag, currency, "Sign in", outlined "Create account", hamburger. +**`sticky-search-bar`** — on scroll a 70px `{colors.sticky-bar}` bar carries a compact search form. + +### Footer +**`footer`** — white multi-column link lists (Help center, FAQs, Privacy policy, Cookie policy, Terms of use …) in `{colors.ink-muted}` 14px/600. +**`footer-legal`** — `{colors.surface-dark}` strip with 14px/300 `#d7d7db` text: "Agoda is part of Booking Holdings Inc., the world leader in online travel & related services." + +## Design System Architecture + +Agoda builds its product UI with the **Agoda Design System (ADS)**. There is no public documentation site or npm package; what is known comes from Agoda's own engineering publication and from the tokens shipped on agoda.com. + +- **What ADS is (official)**: the Agoda Engineering & Design article [Pixels to Product: Innovating with Design System](https://medium.com/agoda-engineering/1062f9645a34) (Aug 28, 2023) describes a design system with a design-systems lead, a toolkit of "design language, UI kits, visual assets, and guidelines", components that feature teams compose into full pages, and use by the **white-label** team for "effortless reuse of components and theming" for partners. +- **Token architecture (measured)**: the live `:root` exposes hundreds of `--ads-*` custom properties with a strict naming grammar `--ads-{property}-{intent}-{base|state}-{role}-{strength}`: + - property: `bg`, `colors` (text/icon), `border`; + - intent: `primary`, `positive`, `negative`, `notice`, `deals`, `urgent`, `generic`, and product/loyalty families `hotels`, `homes`, `flights`, `trips`, `cash`, `luxury`, `family`, `day`, `premium`, `vip-bronze/silver/gold/platinum/diamond/prime`, plus `decorative-1…4` and `brand-1…5`; + - base roles: `default`, `intent`, `on-intent`, `surface`, `surface-floating`, `background`, `overlay`, `inset`, `transparent`, `inverted`; + - states: `hover`, `pressed`, `active`, `inactive`, `focus`, `disabled`; + - strength suffix: `-subtle`, `-strong`. + Verbatim examples: `--ads-border-primary-base-strong: #2067da`, `--ads-colors-notice-state-pressed: #1751ae`, `--ads-colors-trips-base-default: #252c38`, `--ads-bg-primary-state-disabled: rgba(25,43,73,.08)`, `--ads-border-positive-base-strong: #007e3e`, `--ads-shadow-center-l: 0px 0px 9px 4px rgba(0,0,0,.24)`. A `deprecated` family (`--ads-bg-deprecated-neutral-4`) shows tokens are versioned out rather than deleted. +- **Theming**: theming is an explicit ADS goal for white-label partners (article above). On agoda.com, intent families with `inverted` roles and `surface-floating-inverted` (`#192b49`) provide on-dark variants; no user-facing dark mode was observed. +- **Type & spacing**: one family (Helvetica Neue) with sizes 10/12/13/14/16/20/24px; spacing on a 4px base (2, 4, 8, 12, 16, 24, 32, 48, 64px). Component class names are atomic and prefixed (`afcde-box`, `afcde-bg-product-primary`, `afcde-fill-inherit`) alongside styled-components names (`Typographystyled__TypographyStyled`, `TextLink__TextLinkStyled`, `Inputstyled__InputStyled`, `Box-sc-…`). +- **Component model (observable)**: Button (primary / outlined / ghost; pill; 36px and 44px heights), Chip (default / selected), Tab, Input/IconBox, Card, TextLink, Typography, Box. No official inventory is public. +- **Accessibility**: the article states WCAG accessibility is integrated into the design system so components are accessible "out of the box", with page-level keyboard navigation and cross-device behaviour left to product teams. The site includes a "Skip to main content" link and a 2px white + 2px blue focus ring in CSS. +- **Brand layer**: logo rules, clear space and the six logo colours are in the official [logo guidelines](https://www.agoda.com/press/agoda-logo-guidelines/); the refreshed identity (logo, custom typeface, "Agojis" characters) is in the [brand identity release](https://www.agoda.com/press/agoda-new-brand-identity/). +- **Delivery**: no public npm package, Figma community kit or versioned docs were found (searches in SOURCES.json). + +## Do's and Don'ts + +### Do +- Use `{colors.primary}` `#2067da` for the single primary action and active states. +- Make buttons and chips pills; make cards 16px. +- Use `#5e6b8252` hairlines instead of shadows on cards. +- Keep text small (12–14px) and use weight 600 for emphasis. +- Show prices in `{colors.price}` with the struck original above. +- Keep the search panel floating over the hero photo with its Level 3 shadow. + +### Don't +- Don't use the six logo colours as UI fills; they belong to the logo dots. +- Don't substitute the guideline `#478cf7` for the live `#2067da` CTA blue. +- Don't use square-cornered buttons. +- Don't add hover colour changes to the primary button that were not measured. +- Don't set body text in pure black; use `#252c38` / `#5e6b82`. +- Don't introduce a custom webfont for UI — the site uses Helvetica Neue. + +## Responsive Behavior + +### Breakpoints + +| Name | Width | Key Changes | +|---|---|---| +| Desktop | 1280px measured | 900px content column, 5-up carousels, full header | +| Mobile | 390px measured | h1 stays 24px/700; section title 24px → 20.359px (fluid); header keeps "List your place", language and currency | + +### Touch Targets +- Primary and outlined buttons are 44px tall; chips 36px; search fields 66px. + +### Collapsing Strategy +- Section titles scale fluidly on mobile (measured 20.359px). +- The joined date fields keep their split radii. +- Carousels remain horizontal-scrolling. + +### Mobile Header +- The 390px header keeps the skip link, "List your place", language selector and currency (฿) entries, white background, 13px/400 text. +- The joined check-in / check-out date fields remain side by side (336px wide on mobile). + +### Image Behavior +Card photos crop to fixed-ratio tops; the hero photograph is full-bleed behind the search panel. + +## Iteration Guide + +1. Start with `{colors.canvas}`, `{colors.ink}` and `{typography.body}`. +2. One `button-primary` per view; secondary actions are `button-outlined` or `button-ghost`. +3. Filters are `chip` / `chip-selected`. +4. Results are `card-result` at 16px radius with hairline borders. +5. Section titles use `{typography.heading-section}` 24px/600. +6. Name new tokens with the ADS grammar (`--ads-{bg|colors|border}-{intent}-{base|state}-{role}-{strength}`). +7. Logo colours only for the logo; brand guideline `#478cf7` is not confirmed in the live product, so it was not measured there. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/agricultural-land-reform-office/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/agricultural-land-reform-office/DESIGN.md new file mode 100644 index 0000000..0022dd2 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/agricultural-land-reform-office/DESIGN.md @@ -0,0 +1,137 @@ +--- +version: alpha +name: Agricultural Land Reform Office service gateway (สำนักงานการปฏิรูปที่ดินเพื่อเกษตรกรรม, ส.ป.ก. / ALRO) +category: "Thai Brands" +description: "ALRO (ส.ป.ก.) Thai-language service gateway at alro.go.th/th/ set in Prompt-Light and Prompt-Medium, with a #ffffff and #f6f6f6 canvas, #23312d ink, #00ad6e green accents, white pill labels at 10px radius with a green glow shadow over photographic six-tile cards, and a #36403d footer bar." +colors: + canvas: "#ffffff" + ink: "#23312d" + primary: "#ffffff" + on-primary: "#000000" + surface-gray: "#f6f6f6" + charcoal-bar: "#36403d" + ink-body: "#212529" + ink-dark: "#202124" + ink-heading: "#363f3d" + accent-green: "#00ad6e" + accent-orange: "#ff6600" +typography: + display: + fontFamily: Prompt-Medium + fontSize: 44.8px + fontWeight: 500 + lineHeight: 53.76px + textTransform: uppercase + display-mobile: + fontFamily: Prompt-Medium + fontSize: 19.2px + fontWeight: 500 + lineHeight: 23.04px + textTransform: uppercase + body: + fontFamily: Prompt-Light + fontSize: 16px + fontWeight: 700 + lineHeight: 24px +rounded: + xs: 10px + sm: 25px + pill: 9999px +spacing: + s1: 6px + s2: 10px + s3: 12px + s4: 15px + s5: 20px +components: + button-primary: + backgroundColor: "{colors.canvas}" + textColor: "{colors.on-primary}" + typography: "{typography.body}" + rounded: "{rounded.xs}" + padding: 6px 12px + height: 62px + boxShadow: rgb(5, 126, 87) 0px 0px 15px 15px + button-secondary: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.body}" + rounded: "{rounded.xs}" + padding: 6px 12px + height: 62px + boxShadow: rgb(5, 126, 87) 0px 0px 15px 15px + card: + backgroundColor: "{colors.surface-gray}" + textColor: "{colors.on-primary}" + rounded: "{rounded.sm}" + padding: 349.047px 0px 0px + borderColor: "{colors.surface-gray}" +--- + +## Overview + +This file documents the page the extractor reached at https://alro.go.th/th/ (title "สปก. - สำนักงานการปฏิรูปที่ดินเพื่อเกษตรกรรม (ALRO)"). It is a gateway or launcher page rather than a full content portal: six large photographic tiles, each with a white label, below the office name. The labels are "คลิก" (a form-change notice), "เว็บไซต์ ส.ป.ก." (the office website), "ประกาศรายชื่อเกษตรกรผู้ได้รับการจัดที่ดินในเขตปฏิรูปที่ดิน" (announcement of farmers allocated land), "บริการประชาชน (E-Service)", "การประเมินคุณธรรมและความโปร่งใสในการดำเนินงานของหน่วยงานภาครัฐ (ITA)" and "Facebook ถาม - ตอบ". + +Important limit: the root address https://alro.go.th/ returned an Imperva hCaptcha challenge ("alro.go.th - Additional security check is required") to the extractor, and WebFetch received an empty body for both https://alro.go.th/th/ and https://www.alro.go.th/. The main office website therefore could not be measured, and everything below describes only this gateway page. The name of this file reflects that scope. + +The capture shows a faded aerial photograph of buildings as the page background, the Thai name of the office centred at the top with the English name "Agricultural Land Reform Office" beneath it in green, a three-by-two grid of rounded tiles, and a dark charcoal bar fixed at the bottom with the office emblem, "Copyright@2026" and an orange "เข้าสู่ระบบ" (log in) link. A mourning ribbon is shown at the top-left corner of the capture; it is an overlay and not brand UI. + +## Colors + +The page uses a pale neutral field with green as the only brand hue. `canvas` is white (83 weight) and `surface-gray` #f6f6f6 is the dominant background (878 weight), also the tile-frame border colour. A translucent green #2cb78480 (249 weight) is a measured background area on the page. `charcoal-bar` #36403d (103 weight) is the bottom bar. `ink` is #23312d, a dark green-black, with `ink-body` #212529 (74 characters), `ink-dark` #202124, `ink-heading` #363f3d (the office name), and black for tile labels. + +`accent-green` #00ad6e (31 characters) colours the English subtitle, with #0cad79 (31 characters) as a close second green. `accent-orange` #ff6600 (11 characters) is the hover colour of tile labels and the log-in link colour measured in the bar. `primary` #ffffff with `on-primary` #000000 text is the detected tile-label button: white fill, black text. The root CSS holds Bootstrap 4 defaults (--primary #007bff, --danger #dc3545, --success #28a745, --warning #ffc107); these are framework values and not brand colours. + +## Typography + +Two Prompt faces are loaded as separate families: Prompt-Light (393 measured characters) and Prompt-Medium (37). `display` is Prompt-Medium 44.8px / 53.76px weight 500 with uppercase transform (the office name); on mobile it is 19.2px / 23.04px. `body` is Prompt-Light 16px / 24px weight 700 (tile labels). Measured sizes: 16px (278 characters), 13.6px (53), 44.8px (37), 20.8px (31) and 12px (31). Weights: 700 (267 characters), 400 (95), 500 (37), 100 (31). The font stack in the root CSS is a system stack (-apple-system, Segoe UI, Roboto and so on), but the measured families on the page are the two Prompt faces. + +## Layout + +Measured at 1280px wide with a recorded height of 1175px. The page is a centred title block followed by a three-column, two-row grid of equal tiles, with a full-width bottom bar. Paddings measured: 15px (33 occurrences), 6px and 12px (6 each, label padding), 10px and 20px (once each). The generated card token has a fluid top padding of 349.047px, a measured value that places each tile label near the bottom of a tall image. + +## Elevation & Depth + +Each tile label carries a green outer glow: `rgb(5, 126, 87) 0px 0px 15px 15px` (6 occurrences), the only measured shadow. On hover a label changes text colour to rgb(255, 102, 0). Tiles sit in pale #f6f6f6 frames over the faded background photograph, so depth comes from the glow and from the photographic imagery rather than layered shadows. + +## Shapes + +Radii measured: 25px (12 occurrences, tile frames), 0px 0px 25px 25px (6, the lower label area of each tile), 10px (6, white labels) and 50% (1). The scale is 10px, 25px and a pill. Labels are therefore rounded rectangles inside tiles whose corners are rounded more generously. + +## Components + +**Tile label** (`button-primary`, `button-secondary`): white fill, 16px Prompt-Light weight 700, 6px 12px padding, 62px high, 10px radius, with the green glow shadow; primary text is black and secondary text is #23312d. On hover the text turns orange (rgb(255, 102, 0)). + +**Tile** (`card`): #f6f6f6 background and border, 25px radius, containing a full-bleed illustration or photograph, the circular office emblem and the label. **Bottom bar**: #36403d with a small emblem, the office name in white and the English name in green, and the orange log-in link at the right. + +## Design System Architecture + +No public design system or brand-guideline page was found. Research pages could not be opened (see Overview). The extraction shows a Bootstrap 4 base (root variables --primary #007bff, --breakpoint-sm 576px, --breakpoint-md 768px, --breakpoint-lg 992px and the usual colour names) with two Prompt font files named Prompt-Light and Prompt-Medium. The brand layer consists of the green and orange accents and the emblem. + +## Do's and Don'ts + +- Do present entry points as large illustrated tiles with a white label at the bottom. +- Do use #00ad6e for the English office name and #ff6600 only for hover and log-in emphasis. +- Do keep tile frames at 25px radius and labels at 10px. +- Do put the office emblem in a circle on every tile. +- Don't use Bootstrap blue #007bff as a brand colour. +- Don't treat the mourning ribbon as part of the visual identity. +- Don't claim measurements for the main office website; it was not measured. + +## Responsive Behavior + +A mobile pass was recorded. On mobile the heading measured 19.2px / 23.04px weight 500 (against 44.8px on desktop), body copy stayed 16px / 24px weight 700, and the detected button was a tile label measured #212529 text on a #f8f9fa fill with 4px radius, 6px 12px padding, 62px high and a 1px solid #f8f9fa border. Breakpoint widths and the tile column count on mobile were not measured. + +## Iteration Guide + +1. Begin with the white and #f6f6f6 canvas, #23312d ink and Prompt-Light 16px. +2. Add green #00ad6e only as an accent; use orange #ff6600 for hover. +3. Keep labels at 10px radius and tiles at 25px. +4. Measure the main site separately once it is reachable. +5. Re-run `node web/scripts/verify-designs.mjs --slug=agricultural-land-reform-office` after changes. + +## Measurement Notes + +Additional measured values: text colours #000000 (73 characters), #ffffff (53), #202124 (40), #363f3d (37), #00ad6e (31), #0cad79 (31) and #ff6600 (11); the border colour #f6f6f6 appears six times; background areas are #f6f6f6 (878), #2cb78480 (249), #36403d (103) and #ffffff (83). The spacing scale in the frontmatter is 6px, 10px, 12px, 15px and 20px. No measurement exists for navigation, forms, tables or any inner page of the office website, so none are described here; any such value must be measured before it is added. + +The capture itself shows how the tiles are composed: each tile fills its frame with a different full-bleed image (a green land document, a drone over a landscape, a purple announcement graphic, a service-desk scene, an integrity-assessment poster and a social-media Q and A graphic), the circular office emblem sits near the upper middle of every tile, and the white label with black Thai text sits below it. Voice is plain and directive: labels name the service ("บริการประชาชน (E-Service)", "Facebook ถาม - ตอบ") rather than describe it, and one tile uses the single word "คลิก" (click). diff --git a/skills/scd-uiux/data/vendor/design-systems/library/agricultural-research-development-agency/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/agricultural-research-development-agency/DESIGN.md new file mode 100644 index 0000000..2d3157f --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/agricultural-research-development-agency/DESIGN.md @@ -0,0 +1,188 @@ +--- +version: alpha +name: Agricultural Research Development Agency (สำนักงานพัฒนาการวิจัยการเกษตร, สวก.) +category: "Thai Brands" +description: "ARDA research-funding portal (arda.or.th) set in IBM Plex Sans Thai on white and #f9f9f9, with #194569 ink, #00857d teal pill buttons (40px radius, white 18px weight 600 text), a #2c3e61 navy band, and a 48px weight 700 hero headline over agricultural photography." +colors: + canvas: "#ffffff" + page-largest: "#f9f9f9" + ink: "#194569" + primary: "#00857d" + on-primary: "#ffffff" + navy-band: "#2c3e61" + ink-gray: "#4f4f4f" + ink-slate: "#3d4754" + hairline: "#e6edef" + link: "#24695c" + text-input-text: "#717171" + cyan-logo: "#009db1" +typography: + display: + fontFamily: "\"IBM Plex Sans Thai\"" + fontSize: 48px + fontWeight: 700 + lineHeight: 69px + display-mobile: + fontFamily: "\"IBM Plex Sans Thai\"" + fontSize: 36px + fontWeight: 700 + lineHeight: 59px + letterSpacing: 0.5px + subheading: + fontFamily: "\"IBM Plex Sans Thai\"" + fontSize: 18px + fontWeight: 500 + lineHeight: 23.4px + letterSpacing: 0.5px + body: + fontFamily: "\"IBM Plex Sans Thai\"" + fontSize: 22px + fontWeight: 400 + lineHeight: 31px + button: + fontFamily: "\"IBM Plex Sans Thai\"" + fontSize: 18px + fontWeight: 600 + lineHeight: 27px + nav: + fontFamily: "\"IBM Plex Sans Thai\"" + fontSize: 12px + fontWeight: 400 + lineHeight: 17px + link: + fontFamily: "\"IBM Plex Sans Thai\"" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + input: + fontFamily: "\"IBM Plex Sans Thai\"" + fontSize: 14px + fontWeight: 400 + lineHeight: 21px +rounded: + xs: 3px + sm: 5px + md: 6px + lg: 10px + xl: 12px + 2xl: 20px + 3xl: 40px + 4xl: 50px + pill: 9999px +spacing: + s1: 1px + s2: 5px + s3: 6px + s4: 8px + s5: 10px + s6: 11px + s7: 12px + s8: 15px + s9: 16px + s10: 24px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 11px 16px + height: 52px + boxShadow: rgba(123, 161, 170, 0.6) 0px 3px 15px 0px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 11px 16px + height: 52px + boxShadow: rgba(123, 161, 170, 0.6) 0px 3px 15px 0px + link: + textColor: "{colors.link}" + typography: "{typography.link}" + nav: + textColor: "{colors.canvas}" + nav-link: + textColor: "{colors.canvas}" + typography: "{typography.nav}" + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.text-input-text}" + typography: "{typography.input}" + rounded: "{rounded.4xl}" + padding: 6px 12px 6px 60px + height: 54px + borderColor: "{colors.hairline}" + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.cyan-logo}" + rounded: "{rounded.2xl}" + padding: 0px 12px + borderColor: "{colors.hairline}" +--- + +## Overview + +The ARDA home page (https://www.arda.or.th/, title "สำนักงานพัฒนาการวิจัยการเกษตร (องค์การมหาชน)", language `TH`) presents the Agricultural Research Development Agency, a public organisation that funds agricultural research. A page summary I opened lists a top utility bar (TH/EN switch, font-size controls, display settings, auto-read, search), navigation for research funding, the NRIIS project submission system, educational grants, international funding, training programmes and graduate research funding, research categories (rice and field crops, palm oil, horticultural plants, livestock, food, herbs), knowledge services (ARDA Catalogue, YouTube playlists, news), research impact figures, and a footer with the agency address, contact and social links. The summary states that no explicit corporate-identity manual is linked. + +The measured capture opens on a full-bleed hero photograph (an agricultural robot above crop rows) carrying the quote "ผู้นำในการบริหารการวิจัยการเกษตร เพื่อสร้างความเข้มแข็งของภาคการเกษตรอย่างยั่งยืน" in white at 48px, a floating pale rounded navigation bar with the ARDA logo, a purple promotional banner carousel, a row of rounded white program cards with teal pill buttons ("ยื่นขอรับทุน", "ดูรายงาน"), a deep blue photographic band, and a pill-shaped tab group for news (ข่าวผู้บริหาร, ข่าวประชาสัมพันธ์, ข่าวสำคัญประจำวัน). The extractor removed a site-wide grayscale filter for capture; a mourning ribbon at the top-left corner of the capture is an overlay and not brand UI. + +## Colors + +`primary` #00857d is a teal green, the fill of every call-to-action pill, with white `on-primary` text; it is also the colour of the active tab, the language switch "TH" and text accents (348 characters). `ink` is #194569, a deep blue, used for text (536 characters) and `ink-slate` #3d4754 and `ink-gray` #4f4f4f are the neutral text steps. `link` is #24695c. `navy-band` #2c3e61 is the dominant dark background (1,695 weight), with #1c6580 (641) as the blue-teal photographic band behind it. Surfaces are #f9f9f9 (`page-largest`, 3,434 weight) and white (2,769), with `hairline` #e6edef for borders and input outlines (16 border occurrences). + +`cyan-logo` #009db1 is the colour of the mobile "Arda" wordmark heading. Small accents measured: #dde8f8 (12 weight), #3971ad (7), #faeed1 (5), #f4e1f4 (2) and #e60000 (1). The root CSS includes Bootstrap defaults (--bs-primary #0d6efd, --bs-yellow #ffc107, --bs-info #0dcaf0, --bs-success #198754), cookie-consent variables (--cc-*) and custom variables `--secondary-color` #00857d and `--primary-color` #fff. Bootstrap blue is not used as a brand colour. + +## Typography + +IBM Plex Sans Thai is the only family (4,282 measured characters), loaded in weights 300, 400, 500, 600 and 700, with Font Awesome 5 Free for icons. The `display` style is 48px / 69px weight 700 (hero quote). `display-mobile` is 36px / 59px weight 700 with 0.5px letter spacing. `subheading` is 18px / 23.4px weight 500 with 0.5px letter spacing (card titles such as "ARDA CATALOGUE NEW!!!"). `body` is 22px / 31px weight 400 (hero paragraph, #efefef on the photograph). `button` is 18px / 27px weight 600, `link` 16px / 24px weight 400, `input` 14px / 21px weight 400 and `nav` 12px / 17px weight 400. + +By character count the common sizes are 11.2px (1,000), 16px (822), 18px (780), 14px (525), 22px (281), 12px (190) and 32px (131). Weight 400 covers 2,525 characters, 700 covers 754, 600 covers 547 and 500 covers 390. IBM Plex Sans Thai is an open-source Google Fonts typeface; the site loads it directly. + +## Layout + +Measured at 1280px wide. A full-width hero with the floating navigation capsule overlapping its top edge, then centered containers for the banner carousel, the program card carousel, the dark photographic statistics band and the tabbed news block. The navigation capsule and the carousel share the same left and right margins. Paddings measured: 12px (110), 30px (44), 16px (23), 8px (22), 24px (14), 11px (12), 48px (9). Card carousels show a partially visible neighbour at the left and right edges. + +## Elevation & Depth + +Elevation is soft, blue-gray and diffuse. Measured shadows: `rgba(123, 161, 170, 0.6) 0px 3px 15px 0px` (12 occurrences, the pill buttons), `rgba(102, 102, 102, 0.2) 0px 4px 15px 0px` (8), `rgba(102, 102, 102, 0.19) 0px 10px 31px 0px` (4), a two-layer `rgba(0, 0, 0, 0.06) 0px 0px 1px 0px, rgba(0, 0, 0, 0.06) 0px 10px 25px 0px` (4), and single uses of `rgba(98, 98, 98, 0.15) 0px 10px 45px 0px`, `rgba(109, 154, 172, 0.15) 0px 10px 45px 0px` and a blue two-layer shadow. Cards float over the pale background without hard borders. + +## Shapes + +Shapes are generously rounded. Measured radii: 10px (24 occurrences), 20px (23), 40px (13), 60px (8), 99px (5), 12px (4), 50% (3), and single uses of 90px, 5px, 50px, 6px and a 3px 3px 0px 0px top radius. The primary button uses 40px, the search input 50px, cards 10px to 20px, and the news tab group is a full pill. + +## Components + +**Primary pill button** (`button-primary`, `button-secondary`): #00857d fill, white 18px weight 600 text, 11px 16px padding, 52px high, 40px radius, shadow `rgba(123, 161, 170, 0.6) 0px 3px 15px 0px`. Labels are short Thai actions: "ยื่นข้อเสนอโครงการ", "ดูรายละเอียด", "ยื่นขอรับทุน", "ดูรายงาน". + +**Link**: #24695c, 16px weight 400. **Search input** (`text-input`): white fill, #717171 14px text, 6px 12px 6px 60px padding (room for an icon), 54px high, 50px radius, 1px solid #e6edef. **Navigation capsule**: pale rounded surface (on mobile the nav strip measured #e6edef) with white-on-colour utility items above it. **Program card**: white, rounded, with an illustration, a title, a description and a pill button. **News tabs**: pill group with the active tab filled teal. + +## Design System Architecture + +No public design system or brand-guideline page was found; the home page summary states that no CI manual is linked. The de-facto system is Bootstrap-based CSS with project variables (`--secondary-color` #00857d and `--primary-color` #fff), a cookie-consent library's `--cc-*` variables, and Font Awesome icons. The brand layer is the teal pill button, the navy and blue-teal photographic bands, and IBM Plex Sans Thai. + +## Do's and Don'ts + +- Do use #00857d for actions with white 18px weight 600 text and a 40px radius. +- Do overlay hero copy in white on photography at 48px weight 700. +- Do use soft blue-gray shadows (0.6 alpha, 15px blur) under buttons. +- Do keep IBM Plex Sans Thai as the only family. +- Don't use Bootstrap blue #0d6efd as a brand colour. +- Don't copy the cookie-consent styling or the corner mourning ribbon. +- Don't use hard borders on cards; the measured border colour is the pale #e6edef. + +## Responsive Behavior + +A mobile pass was recorded. On mobile the first heading measured 36px / 59px weight 700 in #009db1 (the "Arda" wordmark), the hero paragraph stayed 22px / 31px weight 400, the primary button stayed at 18px weight 600 with 11px 16px padding, 52px high and 40px radius ("ยื่นขอรับทุน"), and the navigation measured a 70px-high strip in #0a6f67 text on #e6edef with a TH | EN switch at 16px weight 600. Breakpoints and column counts were not measured. + +## Iteration Guide + +1. Start with white or #f9f9f9, #194569 ink and IBM Plex Sans Thai. +2. Apply #00857d to all pills; use #2c3e61 for dark bands. +3. Use 40px radius for buttons, 10px to 20px for cards. +4. Measure new components before adding tokens. +5. Re-run `node web/scripts/verify-designs.mjs --slug=agricultural-research-development-agency` after changes. + +## Measurement Notes + +Further measured text colours: #f9f9f9 (1,435 characters, on dark bands), #114773 (199), #efefef (161), #242934 (143), #dadada (99), #444444 (88) and #767676 (36). Border colours also include #ffffff, #dddddd and #7d9aa9 at one occurrence each. Hover on the "EN" language link changes its colour from #ffffff to #f2f3f4. Values not listed here or in the frontmatter were not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aig/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aig/DESIGN.md new file mode 100644 index 0000000..0d4ecf9 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aig/DESIGN.md @@ -0,0 +1,141 @@ +--- +version: alpha +name: AIG +category: "Banking & Insurance" +description: "AIG (aig.com) corporate insurance site: navy #001871 header and hero, #1352de blue links and hover fills, Futura PT headlines with Source Sans Pro body, square corners, one soft 0.16 card shadow." +colors: + canvas: "#ffffff" + ink: "#343741" + primary: "#1352de" + surface-2: "#001871" + ink-5: "#80d2f2" + ink-6: "#5b5c60" +typography: + display: + fontFamily: futura_pt_medium + fontSize: 44px + fontWeight: 400 + lineHeight: 56px + heading: + fontFamily: futura_pt_book + fontSize: 24px + fontWeight: 400 + lineHeight: 30px + subheading: + fontFamily: futura_pt_medium + fontSize: 24px + fontWeight: 400 + lineHeight: 30px + body: + fontFamily: aig_sourcesanspro_regular + fontSize: 20px + fontWeight: 400 + lineHeight: 30px + button-secondary: + fontFamily: aig_futura_medregular + fontSize: 14px + fontWeight: 400 + lineHeight: 14px + textTransform: uppercase +rounded: + none: 0px +spacing: + s1: 3px + s2: 13px + s3: 14px + s4: 15px + s5: 16px + s6: 17px + s7: 18px + s8: 21px + s9: 24px + s10: 25px +components: + button-secondary: + backgroundColor: "{colors.surface-2}" + textColor: "{colors.canvas}" + typography: "{typography.button-secondary}" + padding: 16px 17px + height: 48px + borderColor: "{colors.canvas}" + link: + textColor: "{colors.canvas}" + typography: "{typography.display}" + footer: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + padding: 40px 0px 32px +--- + +# AIG + +## Overview +AIG (American International Group) is a global insurance organization. Its home page (title "AIG Insurance Home | AIG US") describes it as "a leading global insurance organization providing a wide range of property casualty insurance and other financial services" operating in more than 200 countries and jurisdictions. The measured page is corporate and confident: a deep navy header (#001871) with the white boxed AIG wordmark and a row of uppercase navigation (RISK SOLUTIONS, CLAIMS, CAREERS, ABOUT, INVESTORS, NEWS, CONTACT), search and globe icons and an outlined LOGIN button. A hero panel in the same navy carries a 44px white headline "AIG Deepens Long-Term Commitment to Salford City" beside a sports photograph and a square outlined button "Watch the video". + +Below the hero the page alternates white and pale-blue bands: a light-blue strip with two news items (photo left, navy headline, blue "Watch the video" and "Learn more" links with arrows), a centered white "About AIG" paragraph, a pale-blue "Risk Solutions" panel with INDIVIDUALS and BUSINESSES tabs and a white card with an image and arrow-linked calls to action, then "AIG Performance & Initiatives" with a media block. Imagery is editorial photography of people (sports, executives) and architecture. Copy voice is confident, polished and client-focused. The page measured 5,236px tall at 1280px. + +## Colors +- **Canvas** `{colors.canvas}` #ffffff for the content bands. +- **Navy** `{colors.surface-2}` #001871: header, hero, headings and secondary button fill (the h2 text color is #001871). +- **Primary blue** `{colors.primary}` #1352de: link text and the hover fill for buttons. Measured on hover: LOGIN changes from #001871 to #1352de and "Watch the video" fills #1352de. +- **Ink** `{colors.ink}` #343741 for body text (1,300 characters) and as the footer background; `{colors.ink-6}` #5b5c60 is the muted text. +- **Sky** `{colors.ink-5}` #80d2f2 appears in a small number of text runs (12 characters). +- White text is the most frequent text color (1,962 characters), set on navy. +- The light-blue band is visible in the capture; its exact value was not recorded as a token. + +## Typography +Futura PT (custom loaded faces: futura_pt_light, futura_pt_book, futura_pt_medium, futura_pt_bold, plus aig_futuraregular and aig_futura_medregular) for headings, and Source Sans Pro (`source sans pro`, aig_sourcesanspro_regular) for body. A "custom-icons" font supplies icons. +- `display` futura_pt_medium 44px / 400 / 56px: the hero h1. +- `heading` futura_pt_book 24px / 400 / 30px: card headings in navy. +- `subheading` futura_pt_medium 24px / 400 / 30px: h3 "Risk Managers". +- `body` aig_sourcesanspro_regular 20px / 400 / 30px. +- `button-secondary` aig_futura_medregular 14px / 400 / 14px, uppercase: navigation and button labels. +The body element itself measured Source Sans Pro 16px with a 22.8571px line-height. Futura PT is a licensed Adobe/Paratype family; the page loads it from its own font files. + +### Imagery and voice +Photography is editorial and human: a women's football team seated on a pitch under floodlights, two executives shaking hands at a golf event, a trophy winner smiling, a glass-fronted office building, and a broadcast interview. Photos are cropped square or wide with no rounded corners, and sit beside text rather than behind it, except the hero where the photograph fades into the navy panel. Headlines are short title-case statements ("About AIG", "Risk Solutions", "AIG Performance & Initiatives") set centered in navy Futura. Link microcopy is action-first ("Watch the video", "Learn more", "Discover product & services", "Log In now", "Multinational Log In") and each link ends in a right-pointing arrow icon drawn by the custom icon font. The login area is split by audience, with Individuals, Businesses, Brokers & Agents and Risk Managers each given their own set of links, which gives the page the density of a portal rather than a brochure. + +The navigation items include a plus sign after each top-level label in the page text (RISK SOLUTIONS +, CLAIMS +, CAREERS +, ABOUT +). What the plus sign opens was not measured. The hover states recorded on the page are all color fills with no movement: the search button goes from navy to transparent, LOGIN from navy to blue, the outlined hero button from transparent to blue. + +## Layout +Centered content column on 1280px with wide white gutters. Hero text sits in the left half over navy with the photograph on the right. News cards use a two-column row with a small left thumbnail. Risk Solutions is a narrow centered card with a two-column list below the image. Measured spacing steps are 3, 13, 14, 15, 16, 17, 18, 21, 24 and 25px. Footer padding is 40px 0px 32px on a #343741 background. + +The text colors measured by frequency show the page is mostly white-on-navy and dark-gray-on-white: white 1,962 characters, #343741 1,300, navy #001871 593, blue #1352de 282. White text sits on the navy header and hero, and dark gray text sits on the white and pale-blue bands. + +## Elevation & Depth +Almost flat. One shadow was measured: `rgba(0, 0, 0, 0.16) 0px 2px 6px 0px`, on the white Risk Solutions card over the pale-blue band. Contrast between navy, white and pale-blue bands creates the layering. + +## Shapes +No border radius was measured on any element (`rounded` is empty); buttons, cards and images are square-cornered, including the outlined LOGIN and "Watch the video" buttons. + +## Components +- **button-secondary** (LOGIN): navy #001871 fill, white text, white 1px border, futura 14px uppercase, padding 16px 17px, height 48px, radius 0. Hover fills #1352de. +- **outlined hero button** "Watch the video": transparent with white border, height 52px; hover fills #1352de with a #1352de border. +- **search button**: navy fill, white icon, height 61px; hover becomes transparent. +- **link**: blue #1352de text with an arrow glyph ("Learn more", "Discover product & services"). +- **tabs**: INDIVIDUALS and BUSINESSES in uppercase, the active tab blue with an underline. +- **footer**: #343741 background, white text. + +## Design System Architecture +No public design system, brand guideline or press kit is linked from the home page; the only related item is the newsroom's media contacts page. The root CSS variable list was empty in the measurement, so the system is expressed through class-based CSS and the custom font names (`aig_futuraregular`, `aig_futura_medregular`, `aig_sourcesanspro_regular`) that suggest an AIG-licensed font build. A custom icon font covers the arrows, search and globe. + +Sources opened: https://www.aig.com/home (home page, its text and shipped CSS). Because no variables are published, a faithful rebuild must copy values from the measured tokens above: #001871, #1352de, #343741, #5b5c60 and #80d2f2 for color, and the specific font names for type. + +## Do's and Don'ts +- Do use navy #001871 for structure and #1352de for interactive states. +- Do keep corners square (radius 0). +- Do set headlines in Futura PT and body in Source Sans Pro. +- Do use uppercase 14px Futura for buttons and navigation. +- Do alternate white and pale-blue bands. +- Don't add rounded corners or heavy shadows. +- Don't set text in generic sans-serif; use the licensed faces. + +## Responsive Behavior +The mobile pass at 390px recorded the h1 at the same values as desktop (futura_pt_medium 44px / 56px), so the h1 size change on mobile is not evidenced; no mobile CTA was detected. Breakpoints, column collapse and menu behavior were not measured. + +## Iteration Guide +1. Navy #001871 header and hero, white content, #1352de links. +2. Futura PT medium 44px for hero, book 24px for card titles, Source Sans Pro 20px for body. +3. Square buttons 48px high, uppercase 14px. +4. One soft card shadow: `rgba(0, 0, 0, 0.16) 0px 2px 6px 0px`. +5. Re-run `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=aig --force --no-motion`, then `node web/scripts/verify-designs.mjs --slug=aig`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aim-ai-modernism-of-kharkiv/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aim-ai-modernism-of-kharkiv/DESIGN.md new file mode 100644 index 0000000..c933400 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aim-ai-modernism-of-kharkiv/DESIGN.md @@ -0,0 +1,112 @@ +--- +version: alpha +name: AIM — AI Modernism of Kharkiv +category: "Fashion & Apparel" +description: "AIM — AI Modernism of Kharkiv (Obys Agency project): warm paper #e7e4df, ink #141414, Khtekatrial 72.832px display and 12.16px labels, hairline rules, no radius, no shadow, opacity-only hovers." +colors: + canvas: "#e7e4df" + page-largest: "#111111" + ink: "#141414" + primary: "#141414" +typography: + display: + fontFamily: Khtekatrial, sans-serif + fontSize: 72.832px + fontWeight: 500 + lineHeight: 66.6146px + letterSpacing: "-2.18496px" + display-mobile: + fontFamily: Khtekatrial, sans-serif + fontSize: 37.44px + fontWeight: 500 + lineHeight: 34.2439px + letterSpacing: "-1.1232px" + subheading: + fontFamily: Khtekatrial, sans-serif + fontSize: 12.16px + fontWeight: 400 + lineHeight: 11.2914px +rounded: + none: 0px +spacing: + s1: 2.69px + s2: 12.42px + s3: 38.4px +components: + link: + textColor: "{colors.ink}" + typography: "{typography.subheading}" + padding: 0px 0px 0px 2.688px + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + padding: 12.416px 12.416px 0px + transform: matrix(1, 0, 0, 1, 0, -39.4109) + nav-link: + textColor: "{colors.ink}" + typography: "{typography.subheading}" + padding: 0px 0px 0px 2.688px +--- + +# AIM — AI Modernism of Kharkiv + +## Overview +"AIM— AI Modernism Of Kharkiv [Ukraine]" is an editorial web project published by Obys Agency (the footer line of the capture reads "Obys Agency ©2025" and the host is aim.obys.agency). The measured frame is a 1280 by 800 viewport: a warm off-white page (`{colors.canvas}` #e7e4df) filled at the top by a gigantic black wordmark of the letters A, I and M cut into heavy geometric blocks that run edge to edge, with a black bar beneath it. Under the bar is a one-line meta row ("AI Modernism of Kharkiv [Ukraine]", "Index / Experiment / About", "[Gallery]", "Obys Agency ©2025") separated by thin black rules, and below that a two-column area: on the left a list of "Modernists" (E01 Anatol Petrytskiy, E02 Vasyl Ermilov, E03 Oleksandr Khvostenko-Khvostov, E04 Borys Kosarev, E05 Vadym Meller), on the right a 72px tight headline "AIM— AI Modernism Of Kharkiv" and a "Scroll to Explore" cue with a down arrow. + +The look is Swiss-modernist and archival: a single sans family, black on warm paper, thin hairline rules, bracketed labels and index numbers. There is no color beyond the two neutrals, and no imagery in the first viewport other than the typographic mark. Attempts to open the live page with a fetch tool returned HTTP 403, so everything here comes from the extractor's measurements and capture only. The project, its copy and its credits beyond what the capture shows were not read. + +## Colors +Three values measured by painted area: #111111 (1,024 weight, the black wordmark and bar), #e7e4df (608, the paper canvas) and #141414 (52, thin rules and small blocks). Text is a single color, `{colors.ink}` #141414 (325 characters, all of the text). The shipped root variables name them: `--page-color--black: #141414`, `--page-color--white: #e7e4df`, and `--grey: #7b7b7b`. `{colors.primary}` is #141414 (the generator assigned it to the link text, as the page has no button), and `{colors.page-largest}` #111111 is the largest painted block. #7b7b7b is published but no element measured in it. + +## Typography +One family, **Khtekatrial** (weights 400 and 500), a custom-named face loaded by the page. Measurements: +- `display` 72.832px / 500 / 66.6146px, letter-spacing -2.18496px: the "AIM—" h2 (the extractor took it as the h1; the page uses h2 elements for the headline). +- `display-mobile` 37.44px / 500 / 34.2439px, letter-spacing -1.1232px: the same headline on the 390px pass. +- `subheading` 12.16px / 400 / 11.2914px: every small label, navigation link, the Modernists list and the footer line. The body element itself uses this size. +Line-heights are below the font size on both the display and the small text (66.6 for 72.8, 11.29 for 12.16), so the setting is tight and compact; display letter-spacing is negative (-3% of the size). + +### Measured type distribution +Only two sizes appear in the whole measured frame: 12.16px (299 characters at weight 400) and 72.832px (26 characters at weight 500, the headline "AIM—" repeated across the display text elements). There is no middle size at all. The sole letter-spacing recorded is -2.18496px on the 72.832px text; the small text carries no recorded tracking. The result is an extreme two-step scale: roughly a six-to-one ratio between display and label, with nothing between them. + +### Voice and content structure +Labels are plain and bracketed: "[Ukraine]", "[Gallery]", episode codes "E01" to "E05", and a "Scroll to Explore" cue. The page treats each modernist as an indexed entry, a convention borrowed from archives and exhibition catalogues. Names are written in full transliteration without titles. The headline restates the project name as a statement with an em dash ("AIM—"), which reads as a title card. Because the live page could not be read, no further sections, captions or credits are documented. + +## Layout +A full-bleed grid with a 12.416px gutter (padding 12.416px 12.416px 0px on the nav) and a 38.4px larger step; spacing tokens are 2.69px, 12.42px and 38.4px. The wordmark spans the entire width minus the gutters. Below, a hairline vertical rule divides the lower part of the viewport into a narrow left column and a wide right column; the headline hangs at the bottom of the right column. The navigation transform measured `matrix(1, 0, 0, 1, 0, -39.4109)`, a vertical offset of -39.4109px at capture time; what triggers it was not measured. The scroll height measured is 800px, one viewport, so the rest of the project is not described. + +## Elevation & Depth +None measured. No box-shadows (`boxShadows` empty), no gradients, no translucent layers. Separation comes from 1px rules (`--border-wrapper--1px: 1px`) and from the contrast between the two blacks and the paper. + +The measured paddings back this up: 12.416px (8 elements) and 2.688px (8 elements) for small insets, and 38.4px once. There are no recorded flex or grid gaps and no border colors, so the rules visible in the capture are not recorded as CSS borders in the extraction; they are described here only as seen in the capture, without a measured color or width beyond the `--border-wrapper--1px` variable. + +## Shapes +No radius anywhere (`borderRadii` empty; measured radius 0px on all hover targets). The only shapes are rectangles and the angular letterforms of the AIM wordmark. + +## Components +- **link / nav-link**: #141414 text in `{typography.subheading}` with left padding 2.688px. On hover the measured change is opacity 1 to 0.4 on "Index", with no color or background change. +- **nav**: paper background `{colors.canvas}`, ink text, padding 12.416px 12.416px 0px. +- **meta row**: four items spread across the width with a hairline rule beneath. +- **Modernists list**: a label "Modernists:" followed by episode codes (E01 to E05) and names, in the small size. +There is no button in the first viewport; the single call to action is the "Scroll to Explore" text cue. + +## Design System Architecture +No public design system or brand guideline was found; the page could not be fetched with the research tool (HTTP 403), so none was read. The de-facto system is the five root variables measured: `--page-color--black`, `--page-color--white`, `--grey`, `--border-wrapper--0px` and `--border-wrapper--1px`. Two neutrals, one grey and two border widths are the whole token set. Sources opened: none beyond the extractor capture of https://aim.obys.agency/. + +## Do's and Don'ts +- Do restrict the palette to #e7e4df paper and #141414 / #111111 ink. +- Do set all text in one family; use size for hierarchy (72.832px against 12.16px). +- Do use hairline rules and bracketed labels for structure. +- Do keep line-heights under the font size at display sizes. +- Don't add radius, shadow or gradient. +- Don't introduce accent colors; #7b7b7b is the only published extra and is used only as a variable. + +## Responsive Behavior +Measured at 390px: the display headline is 37.44px / 500 / 34.2439px with letter-spacing -1.1232px (about half the 72.832px desktop size). Anything else on mobile, including the wordmark scale, column count and navigation, was not measured. + +## Iteration Guide +Start from the measured facts, not from a mood: two background neutrals (#e7e4df and #111111), one text color (#141414), one family in two weights (400 and 500), two sizes (12.16px and 72.832px), and a single recorded letter-spacing (-2.18496px on the display). When extending the system to new pages, pick the next size from this scale only after measuring the live page, because the frame measured here contains nothing between the two sizes. +1. Paper #e7e4df, ink #141414, large black block #111111. +2. One typeface, two sizes: 72.832px display and 12.16px labels. +3. Hairline 1px rules between meta items and columns. +4. Hover only changes opacity to 0.4. +5. Re-measure with `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=aim-ai-modernism-of-kharkiv --force --no-motion` and run `node web/scripts/verify-designs.mjs --slug=aim-ai-modernism-of-kharkiv`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aim-reit/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aim-reit/DESIGN.md new file mode 100644 index 0000000..f579980 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aim-reit/DESIGN.md @@ -0,0 +1,139 @@ +--- +version: alpha +name: AIM Industrial Growth REIT (AIMIRT) +category: "Thai Brands" +description: "Investor site of AIM Industrial Growth Freehold and Leasehold Real Estate Investment Trust (AIMIRT), measured at aimirt.com/en/home after aimreit.com redirected there. DB Helvethaica X at 14.4px to 32px, emerald #00a788 buttons and nav accents with 3px radius, slate #99a3a8 asset band, white canvas and a #f4f4f4 footer." +colors: + canvas: "#ffffff" + ink: "#222221" + primary: "#00a788" + on-primary: "#ffffff" + surface-grey: "#f4f4f4" + ink-black: "#000000" + ink-grey: "#899595" + ink-offwhite: "#f8f8f8" + primary-hover: "#506161" + link-bg: "#00a788cc" + band-slate: "#99a3a8" +typography: + display: + fontFamily: db_helvethaica_x65_med + fontSize: 32px + fontWeight: 600 + lineHeight: 35.2px + body: + fontFamily: db_helvethaica_x65_med + fontSize: 14.4px + fontWeight: 400 + lineHeight: 27.36px + button: + fontFamily: db_helvethaica_x65_med + fontSize: 14.4px + fontWeight: 600 + lineHeight: 21.6px + nav: + fontFamily: db_helvethaica_x65_med + fontSize: 20px + fontWeight: 400 + lineHeight: 30px + link: + fontFamily: db_helvethaica_x65_med + fontSize: 17.6px + fontWeight: 400 + lineHeight: 26.4px +rounded: + xs: 3px + sm: 5px + md: 100px + pill: 9999px +spacing: + s1: 4px + s2: 5px + s3: 7px + s4: 8px + s5: 9.6px + s6: 10px + s7: 15px + s8: 16px + s9: 20px + s10: 24px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 20px 10px + height: 62px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + link: + backgroundColor: "{colors.link-bg}" + textColor: "{colors.canvas}" + typography: "{typography.link}" + padding: 25px 15px + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + padding: 8px 0px + nav-link: + textColor: "{colors.ink-black}" + typography: "{typography.nav}" + padding: 4px 0px + footer: + backgroundColor: "{colors.surface-grey}" +--- + +## Overview + +This file is named after the site that was measured, not the queued name. The queue lists "AIM Commercial Growth REIT" at `https://www.aimreit.com/`; that URL redirects (HTTP 200 after redirect) to `https://www.aimirt.com/th`, whose title is "AIM Industrial Growth Freehold and Leasehold Real Estate Investment Trust" (AIMIRT) — a sibling trust, so this DESIGN.md describes AIMIRT. The redirect target first shows a bilingual entry page: a memorial splash for 13 October (a portrait, a gold-washed temple skyline, a tribute text and an "เข้าสู่หน้าหลัก | Enter Site" pill button in #be9032 gold). That splash is a tribute page, not the site's design; the measurement was re-run on the real home page `https://www.aimirt.com/en/home` and only that page is described below. + +The home page has a white 97px header with the AIMIRT logo (a green cube mark, the letters "AIM" in dark and "IRT" in green, with the line "AIM Industrial Growth REIT") and a row of English menu items (Home, About AIMIRT, Management, Investment Assets, Investor Relations, Sustainability Policy, Newsroom, What is REIT, Property Rental / Offering, Contact Us) with the current item in green and underlined, plus a green "EN" language chip. A full-width photograph of an industrial warehouse carries the title "AIM INDUSTRIAL GROWTH FREEHOLD & LEASEHOLD REAL ESTATE INVESTMENT TRUST" in dark text with "AIM" in green; four translucent green tabs run along its bottom edge (AIMIRT Investment Highlight, Investment Assets, General Information, Contact Us). Below are "AIMIRT Investment Highlight" with ten line-icon bullets around a central highlighted item ("High-quality assets") and a green "More Info" button, then a slate "Investment Assets" band with a two-column grid of project photographs (JWD Project, TIP Project, SCC Project, Bangkadi Industrial Park Project and more), each with a translucent white caption strip and a green arrow. + +## Colors + +`canvas` #ffffff is the page background. The measured area leaders are `band-slate` #99a3a8 (3,632 units, the Investment Assets band), white (2,270), a translucent white #ffffffd9 (772, caption strips), `surface-grey` #f4f4f4 (529, footer) and the emerald `primary` #00a788 (393). `link-bg` #00a788cc (97) is the translucent green of the hero tabs and `primary-hover` #506161 (89) is the dark slate fill that a hovered button takes. The extraction's own canvas guess was the slate band; the body background is white, so `canvas` is #ffffff. + +Text: `ink` #222221 (912 characters), `primary` green (566, headings of the highlight items and project captions), white (534), `ink-black` #000000 (459, menu links), `ink-grey` #899595 (120) and `ink-offwhite` #f8f8f8 (81). `on-primary` is white on the green buttons. + +## Typography + +One family, DB Helvethaica X (loaded as `db_helvethaica_x65_med`, weight 400, with synthesized heavier weights), sets all 2,757 measured characters. It is a Thai typeface family with Latin glyphs; no foundry page was opened here, so nothing further is claimed about it. Icons come from FontAwesome and a Flaticon set. + +Scale: `display` 32px / 35.2px, weight 600 ("AIMIRT Investment Highlight"); `nav` 20px / 30px, weight 400; `link` 17.6px / 26.4px, weight 400 (hero tabs); `body` 14.4px / 27.36px, weight 400; `button` 14.4px / 21.6px, weight 600. By character count: 14.4px (1,492), 16px (502), 19.2px (409), 13.6px (138) and 32px (133). Weights: 400 (2,074 characters), 600 (670) and 700 (13). + +## Layout + +The desktop capture is 1280px wide and 6,287px tall. Header 97px with a soft shadow; hero photograph about 470px tall in the capture with a tab strip along its bottom; centered section titles at 32px; the highlight section is a three-column arrangement (five items left, a feature in the middle, five items right) separated by thin vertical and horizontal rules; the asset grid is two equal columns with 20px-class gaps. Section blocks are centered with a 1,250px title width. Spacing steps measured: 4, 5, 7, 8, 9.6, 10, 15, 16, 20 and 24px. + +## Elevation & Depth + +One shadow is recorded: `rgba(173, 173, 173, 0.5) 0px 2px 3px 0px` under the header. Other depth is color-driven: translucent green tabs and white caption strips over photographs and a solid slate band. + +## Shapes + +Radii on screen: 50% (10 elements, circular icon frames around the highlight icons and arrows), 3px (3, the buttons), 5px (1) and 100px (1, the language chip). Buttons are 3px; most other surfaces are square. + +## Components + +**Primary button** — emerald fill, white 14.4px DB Helvethaica 600 label ("More Info", "Read more"), padding 20px 10px, 62px tall, 150px wide, 3px radius; hover fill #506161. **Hero tab** — translucent green (#00a788cc) strip, white 17.6px label, padding 25px 15px, 76px tall (442px wide in the first). **Navigation** — white bar with an 8px vertical padding and soft shadow; 20px black links, current item in green with a short green underline. **Icon bullet** — 50% circular outline in green containing a line icon, with a 14.4px label and a hairline rule. **Project card** — photograph with a translucent white caption strip containing a green bold title and a circular arrow. **Footer** — #f4f4f4 band with a risk remark paragraph about REIT investment. + +## Design System Architecture + +No public design system, brand guideline or press kit was found: the homepage HTML links none and no search was run. The site's root variables are Bootstrap's stock set (`--primary` #007bff, `--blue`, `--danger` and breakpoints `--breakpoint-sm` 576px, `--breakpoint-md` 768px, `--breakpoint-lg` 992px), which do not match the measured emerald #00a788 and so are not brand tokens. The page's `` loads a family list of Thai fonts from a font host (Kanit, Prompt, Noto Sans Thai, the PSL family and others), of which only DB Helvethaica X was measured on the English home page. The de-facto system is therefore the measured set: one typeface, one emerald, one slate band and small 3px corners. + +## Do's and Don'ts + +Do use emerald #00a788 for actions, active menu items and caption titles, with white labels on buttons. Do alternate white sections with the slate asset band. Do place project photographs in a two-column grid with translucent caption strips. Do frame icons in thin circular green outlines. + +Don't use Bootstrap's #007bff as a brand color. Don't use the gold #be9032 of the memorial entry page as part of this system. Don't round buttons beyond 3px. Don't add shadows other than the soft header one. + +## Responsive Behavior + +Measured at a 390px viewport: the h1-equivalent title stays 32px / 35.2px (wrapping to 70px height in a 360px column); body stays 14.4px, with a 21.6px line height in the address paragraph (264px wide); the primary button is unchanged (14.4px, 150px wide, 62px tall, 3px radius); the header measures 95px tall with the same soft shadow. Most frequent mobile sizes: 14.4px, 16px and 19.2px. How the ten-item menu collapses and how the asset grid reflows were not measured. + +## Iteration Guide + +Start from the tokens: white canvas, #222221 text, emerald actions and one slate band. A new section should have a centered 32px title, optionally a green hairline under a sub-title, and a single emerald button. Keep photography industrial and bright. Measure anything not covered here (forms, tables of financial data, dark mode) before documenting it; no hover data beyond the button fill was recorded. + +A note on voice and imagery: copy is short and declarative, written as lists of benefits ("Thailand's first REIT investing in cold storage", "High occupancy rate", "Growth opportunity"), and the investment-asset section introduces itself with one sentence about freehold and leasehold rights over movable and immovable assets in the industrial sector. Photography is literal and well lit: warehouse racking with numbered bays, a steel-roofed distribution hall, storage tanks and an industrial-park gateway sign. The visual rhythm is white section, slate section, white section, with the emerald color reserved for the few things a visitor can act on. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aino-agency/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aino-agency/DESIGN.md new file mode 100644 index 0000000..de85b81 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aino-agency/DESIGN.md @@ -0,0 +1,127 @@ +--- +version: alpha +name: Aino +category: "Portfolio" +description: "Aino (aino.agency), Scandinavian e-commerce design agency: warm #f5f5f0 canvas, #181818 ink, ABC Plus weight 720 36.8px statements, 12.27px uppercase labels, coded portfolio captions, no radius or shadow." +colors: + canvas: "#f5f5f0" + ink: "#181818" + primary: "#181818" +typography: + display: + fontFamily: abcplus, helvetica, sans-serif + fontSize: 36.8062px + fontWeight: 720 + lineHeight: 37.9259px + letterSpacing: "-1.10419px" + display-mobile: + fontFamily: abcplus, helvetica, sans-serif + fontSize: 27.8117px + fontWeight: 720 + lineHeight: 29.25px + letterSpacing: "-0.83435px" + heading: + fontFamily: abcplus, helvetica, sans-serif + fontSize: 12.2687px + fontWeight: 500 + lineHeight: 17.0667px + letterSpacing: 0.54px + textTransform: uppercase + body: + fontFamily: abcplus, helvetica, sans-serif + fontSize: 22.0837px + fontWeight: 500 + lineHeight: 25.284px + letterSpacing: "-0.441674px" + nav: + fontFamily: abcplus, helvetica, sans-serif + fontSize: 12.2687px + fontWeight: 400 + lineHeight: 15.8025px + letterSpacing: 0.54px + textTransform: uppercase +rounded: + none: 0px +spacing: + s1: 7.9px + s2: 15.8px + s3: 31.6px + s4: 47.41px +components: + link: + textColor: "{colors.ink}" + typography: "{typography.heading}" + nav: + textColor: "{colors.ink}" + padding: 15.8025px 0px 0px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + footer: + textColor: "{colors.ink}" + padding: 31.6049px 15.8025px 0px +--- + +# Aino + +## Overview +Aino (aino.agency, titled "Aino — Design & Technology Agency") is a Scandinavian agency, based in Gothenburg and Oslo per the home page, that "designs and builds online stores for fashion and lifestyle brands." The measured home page is a warm off-white canvas (`{colors.canvas}` #f5f5f0) with near-black ink (`{colors.ink}` #181818). The top row is a monospace-looking uppercase navigation (AINO, WORK, SERVICES, ABOUT, PLAY, SETTINGS, CONTACT) spread across the width. Below it, a two-column portfolio grid of tall photographic tiles, each captioned with a catalog code and client name in small uppercase ("A002 SANDISK", "A004 SAMSØE SAMSØE", "A001 NUDIE JEANS", "A020 EMMA S"). Between rows a 36.8px statement reads "A design and technology agency in Scandinavia. We design and build online stores for fashion and lifestyle brands.", followed by two light-gray buttons, "ALL WORK" and "OUR SERVICES". + +Imagery is client work shown as product and campaign photography and as website mock-ups inset in full-bleed images (a store page floating over a close-up of sunglasses, a navigation menu over a soft abstract photo). The grid is irregular: some tiles fill a column, others are small and offset to the right. The page copy is confident and concise ("Scandinavian design with engineering underneath"). Services listed on the page include Centra Accelerator, Centra Agency, Fashion E-commerce, Brink Commerce, Replatforming, Shopify Accelerator, Shopify Liquid Themes, Design Studio, Intelligence Layer and Slash Portal. The page measured 6,110px tall at 1280px. + +## Colors +The palette is two values. Canvas `{colors.canvas}` #f5f5f0 covers 4,994 units of painted area and is the only background; text is `{colors.ink}` #181818 for all 786 measured characters. `{colors.primary}` is also #181818. The shipped CSS publishes them as RGB triplets: `--light: 245, 245, 240` and `--dark: 24, 24, 24`, plus `--pure-white: #fff` and `--pure-black: #000`. On the 390px pass the "OUR SERVICES" button measured a translucent fill #1818181a (ink at 10% alpha) with #181818 text. Photographic tiles bring all the color on the page; the interface itself stays neutral. + +## Typography +One family, **ABC Plus** (loaded as `abcplus`, with `abc`, weights 100 to 800), stack `abcplus, helvetica, sans-serif`. The root defines `--mono: mono, monospace`, `--font-size: 12.433px`, `--letter-spacing: .54px` and a 16px line unit. +- `display` 36.8062px / 720 / 37.9259px, letter-spacing -1.10419px: the agency statement (h1). +- `display-mobile` 27.8117px / 720 / 29.25px, letter-spacing -0.83435px. +- `body` 22.0837px / 500 / 25.284px, letter-spacing -0.441674px. +- `heading` 12.2687px / 500 / 17.0667px, letter-spacing 0.54px, uppercase: section labels such as "FIND OUT MORE". +- `nav` 12.2687px / 400 / 15.8025px, letter-spacing 0.54px, uppercase. +The weight 720 on the display is a variable-font value. Small text is uppercase with positive tracking; large text is mixed case with negative tracking. + +### Measured type distribution +Three sizes cover the page: 12.2687px (455 characters), 22.0837px (217 characters) and 36.8062px (114 characters). Weights are 500 (569 characters), 720 (115) and 400 (102). Letter-spacing pairs measured are 12.2687px with 0.54px (284 characters, the uppercase labels), 22.0837px with -0.441674px (217), 12.2687px with 0.02px (171, the caption text) and 36.8062px with -1.10419px (114). The tracking is about -3% on the display, -2% on the body and +4.4% on the uppercase labels, which are computed from those measured pairs. + +### Content structure +The home page is a catalogue: each tile carries a sequence code (A001, A002, A004, A020) and the client name in uppercase, which presents the agency's work like an index of releases. Statements are short, declarative and set at the 36.8px size, then followed by two buttons. Journal and Careers links, a closing call "Join us in building the future of digital commerce." and social links (LinkedIn, Instagram) are on the page as text. Gaps between elements are measured as 15.8025px (34 elements) and 7.90123px (2). + +## Layout +The shipped CSS defines a strip-based grid: `--cols: 162`, `--col: 42`, `--ch: 8`, strips `--strip-1` 20 through `--strip-8` 174 in 22px steps, and `--screen-height: 800`. Spacing tokens measured are 7.9px, 15.8px, 31.6px and 47.41px (multiples of 7.9). The nav uses padding 15.8025px 0px 0px and the footer 31.6049px 15.8025px 0px. Portfolio tiles sit in two equal columns with a small gutter and tall aspect ratios, captions below the image. + +## Elevation & Depth +None measured: no box-shadow (`boxShadows` is empty), no recorded gradients and no overlays in the CSS frequencies. The page is a flat sheet of #f5f5f0 on which photographs sit directly with no frame, border or shadow. Mock-up screenshots inside the tiles supply their own depth within the photographs: a browser-like card over a blurred photo, and a white menu card over an abstract image. Hierarchy comes from size and weight only. There is no stacking of surfaces, no sticky translucent header was recorded, and no focus or hover elevation was measured. + +The home page text also links the agency's offer in a service list and ends with a recruiting line, so the layout closes on text rather than on imagery: the capture ends mid-grid with two more tiles (one grey, one dark brown photograph with an inset store page labelled Gulled), and the footer holds the Journal, Careers, LinkedIn and Instagram links. Rows alternate between a full pair of equal tiles and an asymmetric row that places one large tile at the left and one small tile at the right edge, which keeps the grid from reading as a template. + +## Shapes +No radius measured on interface elements (`borderRadii` empty), although the root defines `--border-radius: calc(var(--char) * .4)`; where it applies, it was not measured on a visible element. Image tiles are rectangular. + +## Components +- **nav-link / link**: ink, uppercase 12.2687px with 0.54px tracking; on hover the measured link text scrambles (for example "WORK" shows "WEÖÉ"), with no change of color, background or border. +- **buttons** "ALL WORK", "OUR SERVICES": pale gray rectangles with small uppercase labels, the 10%-alpha ink fill measured on mobile. +- **portfolio tile**: image plus caption "A### CLIENT" in uppercase. +- **footer**: ink text, padding 31.6049px 15.8025px 0px. + +## Design System Architecture +Aino's home page links no public brand guideline or design system. The shipped CSS is a custom system: rgb-triplet color variables (`--black-rgb`, `--white-rgb` resolved into `--black` and `--white`), a character-based unit (`--ch`, `--char`) that drives radius and spacing, 162-column strip variables, and a mono font alias. Sources opened: https://aino.agency (page text and shipped CSS). + +## Do's and Don'ts +- Do keep the interface to #f5f5f0 and #181818 and let client imagery carry color. +- Do set labels in uppercase 12.2687px with 0.54px tracking. +- Do set statements in ABC Plus weight 720 with negative tracking. +- Do caption every tile with a code and client name. +- Don't add shadows, gradients or radius. +- Don't use pure black or pure white for the interface; they are defined but the measured surfaces use #181818 and #f5f5f0. + +## Responsive Behavior +Measured at 390px: the h1 is 27.8117px / 720 / 29.25px with letter-spacing -0.83435px, and the "OUR SERVICES" button uses a 12.6417px uppercase label with a #1818181a fill. Column counts, breakpoints and navigation on mobile were not measured. + +## Iteration Guide +Start from the measured facts: canvas #f5f5f0, ink #181818, one family (ABC Plus) in weights 400, 500 and 720, three sizes (12.2687px, 22.0837px, 36.8062px) with their paired tracking, spacing in multiples of 7.9px (7.9, 15.8, 31.6, 47.41) and no radius, shadow or border recorded. Add imagery before adding decoration: the page has no interface ornament, so every visual accent comes from client photography and the mock-ups inside it. +1. Canvas #f5f5f0, ink #181818. +2. Headline 36.8062px weight 720; labels 12.2687px uppercase. +3. Two-column tile grid with coded captions. +4. Hover text effect only, no fills. +5. Re-measure with `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=aino-agency --force --no-motion` and run `node web/scripts/verify-designs.mjs --slug=aino-agency`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/air-france/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/air-france/DESIGN.md new file mode 100644 index 0000000..03f2a41 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/air-france/DESIGN.md @@ -0,0 +1,180 @@ +--- +version: alpha +name: Air France +category: "Airlines" +description: "Air France's US booking site (wwws.airfrance.us), built on the Aero token system: navy #051039 text and brand panels, #0045b6 action blue, white #ffffff and #f6f6f7 grey surfaces, bold Excellence In Motion Display headings (20px/28px measured on the hero card) over Excellence In Motion Text 16px body, and small 2px/4px corners." +colors: + canvas: "#ffffff" + background-default: "#f6f6f7" + ink: "#051039" + brand: "#051039" + primary: "#0045b6" + primary-pressed: "#023897" + on-primary: "#ffffff" + surface-hover: "#f9f9fa" + neutral-200: "#e9e9eb" + on-brand-muted: "#d7e1f4" + ink-muted: "#646774" + ink-subtle: "#4e5160" + hairline: "#a6a8af" + border-disabled: "#d3d4d7" + loyalty: "#0800b9" + critical: "#ae0404" +typography: + display: + fontFamily: "\"Excellence In Motion Display\", \"Helvetica Neue\", sans-serif" + fontSize: 20px + fontWeight: 700 + lineHeight: 28px + body: + fontFamily: "\"Excellence In Motion Text\", \"Helvetica Neue\", sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + link: + fontFamily: "\"Excellence In Motion Text\", \"Helvetica Neue\", sans-serif" + fontSize: 16px + fontWeight: 500 + lineHeight: 24px +rounded: + xs: 2px + sm: 4px + loyalty: 20px + pill: 9999px +spacing: + s1: 4px + s2: 8px + s3: 10px + s4: 12px + s5: 16px + s6: 24px + s7: 32px + s8: 40px + s9: 48px + s10: 64px +components: + header-button: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.link}" + rounded: "{rounded.xs}" + height: 48px + header-button-hover: + backgroundColor: "{colors.surface-hover}" + textColor: "{colors.ink}" + rounded: "{rounded.xs}" + skip-link: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + link: + textColor: "{colors.on-primary}" + typography: "{typography.link}" + hero-card: + backgroundColor: "{colors.brand}" + textColor: "{colors.on-primary}" + typography: "{typography.display}" + rounded: "{rounded.sm}" + padding: 24px + footer: + backgroundColor: "{colors.brand}" + textColor: "{colors.on-primary}" +--- + +## Overview + +The measured page is Air France's United States site (finalUrl `https://wwws.airfrance.us/`). Its header is a white bar with the AIRFRANCE wordmark and its red flash at top left, a search icon, a "United States - EN" market button and a "Log in" button at the right, and a row of section links underneath (Book a flight, Check-in, My Bookings, Flying Blue, Information). The active link carries a red underline in the capture. + +Below the header sits a dark, cinematic hero: a night view of the Eiffel Tower with a figure in a red dress, the line "ELEGANCE IS A JOURNEY" above the wordmark, and a navy card on the right reading "Elegance is a journey / Day after day, Air France embodies the French art of living." with a "Watch the film →" link. A white "Book a flight" tab overlaps the bottom-left of the hero and leads into a white booking panel with a "Round trip" selector and a blue search button. + +Important context for anyone rebuilding the page: when the capture and the measurement were taken, most of the content below the booking panel was still in its loading state. The deal cards, inspiration tiles and editorial block are grey skeleton placeholders (the extraction records them as `bw-homepage-link-card-skeleton` elements). Their final imagery, copy and type sizes are therefore not measured. What did load are the "Destinations and deals" section with its Flights / Promo rewards switch and fare-origin sentence, a newsletter block ("Looking for special deals? Need inspiration?" with a "Sign up now" button beside a postcard illustration), a row of social icons and a navy footer with link columns and app-store badges. + +The tone is quiet and premium: a deep navy, generous white and pale grey, bold but compact headings, and the French-flag red used only in the logo and the active-tab underline. + +## Colors + +Air France's colors are exposed on the page as Aero design tokens (`--aero-color-*` custom properties on `:root`), so the roles below come with their own names from the shipped CSS. + +- **canvas `#ffffff`** (`--aero-color-surface-default`): the header, booking panel and the large white middle band. It covers the most pixels of the capture. +- **background-default `#f6f6f7`** (`--aero-color-background-default`): the body background, used for the "Destinations and deals" band and the newsletter band. +- **ink / brand `#051039`** (`--aero-color-text-default`, `--aero-color-background-brand`): navy for headings, body text, the hero card and the footer. +- **primary `#0045b6`** (`--aero-color-primary-500`, `--aero-color-text-link-default`): the action blue of the search button, the skip link and default links. **primary-pressed `#023897`** (`--aero-color-blue-600`) is the border the "Book a flight" link takes on hover. +- **on-primary `#ffffff`**: text on navy and on blue. +- **surface-hover `#f9f9fa`** (`--aero-color-surface-action-secondary-hover`): the measured hover background of the header buttons. +- **neutral-200 `#e9e9eb`**: the skeleton placeholder grey and the inactive half of the Flights / Promo rewards switch. +- **on-brand-muted `#d7e1f4`**: the most-read text color in the measurement, a pale blue; in the capture the large block of pale text is the navy footer. +- **ink-muted `#646774`** and **ink-subtle `#4e5160`** (`--aero-color-neutral-800`): secondary text greys. +- **hairline `#a6a8af`** (`--aero-color-border-strong`) and **border-disabled `#d3d4d7`**: borders. +- **loyalty `#0800b9`** (`--aero-color-brand-loyalty-one`): the Flying Blue programme color. +- **critical `#ae0404`** (`--aero-color-red-600`): error and critical-action red. + +The token set also contains wayfinding and seat-map colors (for example `--aero-color-way-finding-one: #ffd500`) that are not visible on the home page. + +## Typography + +Air France uses its own typeface, Excellence In Motion, in two optical styles that the page loads as web fonts: Excellence In Motion Display (600) and Excellence In Motion Text (400, 500, 600), plus a legacy `ExcellenceInMotionTextRegular`. By characters rendered, Text dominates (1151), Display follows (210) and Open Sans appears only in a feedback tab. + +- **display**: Display 20px/28px, weight 700, the hero card title "Elegance is a journey" (the largest heading whose family was recorded). +- **Section headings**: "Destinations and deals" measures 36px, weight 700, centred, and "Looking for special deals? Need inspiration?" 24px, weight 700; the extraction recorded their size and weight but not their family. +- **body**: Text 16px/24px, weight 400. 14px is the most frequent size on the page (733 characters), matching `--aero-body-s-regular-font-size: calc(16px * .875)`. +- **link**: Text 16px/24px, weight 500, as on "Watch the film". + +Measured sizes are 14, 16, 18, 20, 24 and 36px on desktop, with weights 400, 500, 600 and 700. The Aero type scale is expressed as multiples of 16px (`--aero-font-size-50` = 0.75, `-100` = 0.875, `-150` = 1, `-200` = 1.125, `-650` = 4.5), and the token set defines letter-spacing steps of -0.5px, 0.1px and 0.5px; letter-spacing on the measured text is normal. The site's own fallback is "Helvetica Neue", then sans-serif. + +## Layout + +The desktop pass at 1280px measured a page 4161px tall. The header band is 123px with content running from x=20 to x=1244. The hero band is 208px of media with the hero card set between x=804 and x=1228. The "Destinations and deals" band is 562px on `#f6f6f7` with content between x=160 and x=1120, and the newsletter band at the bottom splits into two columns. The extraction counted up to five card columns on desktop. + +Spacing follows the Aero space scale (`--aero-space-100` 4px, `-200` 8px, `-250` 12px, `-300` 16px, `-md` 24px, `-lg` 32px, `-600` 40px, `-700` 48px, `-800` 64px, `-900` 80px). On the page, the most used gaps are 12px and 24px, with 80px between large blocks; the most used paddings are 4px, 24px, 12px and 16px. + +## Elevation & Depth + +Depth is light. The Aero tokens define two shadow levels, `--aero-box-shadow-level-2: 0px 16px 16px -16px rgba(0, 0, 0, .16)` and `--aero-box-shadow-level-4: 0px 24px 32px -8px rgba(0, 0, 0, .16)`; both are negative-spread shadows that sit only under the bottom edge. On the page the measured shadows are `rgba(0, 0, 0, 0.08) 0px 8px 8px -8px` (once) and a Material button shadow. The booking panel reads as raised mainly because it overlaps the hero photo and has a thin border. The rest of the page separates areas with background changes between `#ffffff`, `#f6f6f7` and navy `#051039`. + +## Shapes + +Corners are small and consistent. The most frequent radius is 4px (98 uses, `--aero-border-radius-strong`), then 2px (40 uses, `--aero-border-radius-subtle`) for header buttons and tabs, and 50% for circular icons. Split controls use half-rounded corners (`2px 0px 0px 2px` and `0px 2px 2px 0px`), which is how the Flights / Promo rewards switch is drawn. The tokens also hold 20px as `--aero-border-radius-flying-blue-strong`, reserved for Flying Blue elements, and larger radii (12, 40, 48, 80px) that do not appear on the home page. + +## Components + +- **Header button** ("United States - EN", "Log in"): white background, navy `#051039` text, 2px corners, 48px tall. On hover the background turns `#f9f9fa`; text and border stay navy. +- **Section link** ("Book a flight", "Check-in"): white, navy text, 2px corners, 50px tall, a `#0045b6` border that becomes `#023897` on hover. +- **Skip link**: `#0045b6` background with white text, revealed on keyboard focus (measured as focus-visible). +- **Hero card**: navy `#051039`, white text, 4px corners, 24px padding, Display 20px/28px bold title, a 16px/500 "Watch the film" link with an arrow. +- **Booking panel**: white panel with a "Round trip" dropdown, four input slots, two secondary slots and a blue `#0045b6` search button at the right (in the capture the slots are still loading, so field styling is not measured). +- **Segmented switch**: Flights / Promo rewards, active segment white with bold navy text, inactive segment grey. +- **Newsletter block**: white card on grey with a bold 24px heading, 14px copy and a pale blue "Sign up now" button, next to a navy illustration tile. +- **Footer**: navy `#051039` background, bold white column headings and pale link text, app-store badges in black. + +## Design System Architecture + +No public Air France design-system site or brand guideline was reached (the corporate site returned HTTP 403 and the press page timed out). The shipped page itself shows a token-driven system named Aero: 400 custom properties on `:root` with the `--aero-` prefix, organised as primitives (`--aero-color-blue-900`, `--aero-color-neutral-200`, `--aero-space-300`, `--aero-border-radius-400`), semantic aliases (`--aero-color-text-default`, `--aero-color-surface-action-secondary-hover`, `--aero-color-border-strong`), typography roles (`--aero-body-s-regular-font-size`, `--aero-headline-m-font-weight`, `--aero-display-s-font-size`) and product-specific sets for Flying Blue, La Première, seat maps and airports (`--aero-color-airport-ams-one`). It is layered on Angular Material (`--mat-*` variables, some re-pointed to Aero values such as `--mat-slide-toggle-selected-handle-color: #0045b6`), and page parts are Angular custom elements (`bw-homepage-link-card-skeleton`). When rebuilding, name tokens the Aero way: primitive scale first, then semantic role. + +## Do's and Don'ts + +**Do** +- Use navy `#051039` for text and brand panels and `#0045b6` for actions and links. +- Alternate white `#ffffff` and `#f6f6f7` bands to separate sections. +- Set headings in Excellence In Motion Display bold and body in Excellence In Motion Text. +- Keep corners at 2px for controls and 4px for cards and panels. +- Keep red to the logo flash and the active navigation underline. + +**Don't** +- Don't use large radii outside Flying Blue elements. +- Don't add heavy drop shadows; Aero shadows only fall below the bottom edge. +- Don't treat the Open Sans "Feedback" tab as Air France typography; it is a feedback widget. +- Don't copy the grey skeleton blocks as a design pattern; they are a loading state. + +## Responsive Behavior + +The extractor's mobile pass recorded: the header shows one visible header link (five on desktop) and a visible toggle labelled "Search"; section headings shrink from 36px to 28px ("Destinations and deals") and from 24px to 22px (newsletter heading), while the hero card title stays 20px/700. Mobile font sizes by frequency are 16px, 12px, 14px, 18px, 22px, 28px and 20px. Mobile bands are single-column with content between roughly x=16 and x=374, and the footer ends in a 176px navy `#051039` band. The extraction counted up to four card columns on mobile. + +The stylesheet declares its breakpoints mainly at `min-width 600px` (154 rules), `min-width 960px` (74), `max-width 599px` (57), `min-width 768px` (14) and `min-width 1280px` (13). The behaviour of the booking panel and deal grid between those breakpoints is not measured. + +## Iteration Guide + +1. Start with Aero primitives: navy `#051039`, blue `#0045b6`, white, `#f6f6f7` and the neutral greys. +2. Map semantic roles exactly as the site does: text-default navy, link-default blue, surface-default white, background-default grey. +3. Set type in Excellence In Motion (fallback Helvetica Neue): Display bold for headings, Text for 14–16px copy; confirm the family of the 24–36px section headings by measurement. +4. Use the Aero space scale (4, 8, 12, 16, 24, 32, 40, 48, 64, 80px). +5. Keep radii at 2px and 4px; reserve 20px for Flying Blue. +6. Re-measure the home page after it has fully loaded before adding tokens for deal cards, inputs or the primary button, since those were skeletons in this capture. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/air-new-zealand/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/air-new-zealand/DESIGN.md new file mode 100644 index 0000000..6ba0841 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/air-new-zealand/DESIGN.md @@ -0,0 +1,514 @@ +--- +version: alpha +name: Air New Zealand +category: "Airlines" +description: "Air New Zealand's web system, built on its 'Unison' design system — black #000000 header and footer around white content, teal #008392 for actions and links (hover #00626e), Air New Zealand Sans (Klim's Söhne) at 17px/400 for body with 700 headings, the hero typeface Newzald Black Italic (served as 'airnewzald') for headlines and fares, a #262429 booking panel with #19181b fields, 8px action radius and round 222px fare roundels." + +colors: + primary: "#008392" + primary-hover: "#00626e" + teal-on-dark: "#2dbfd0" + teal-on-dark-hover: "#4bd0e0" + teal-highlight: "#4cd6e6" + canvas: "#ffffff" + ink: "#000000" + header: "#000000" + panel: "#262429" + field: "#19181b" + field-border: "#4f4d56" + on-dark: "#ffffff" + on-panel: "#f8f7f8" + ink-muted: "#767676" + ink-subtle: "#898989" + grey-50: "#bebcc2" + grey-60: "#64616b" + grey-40: "#d7d7db" + grey-30: "#ededee" + search-border: "#bbbbbb" + roundel: "#000000e0" + roundel-hover: "#000000c7" + koru-purple: "#440099" + new-tag: "#981d97" + error: "#d4002b" + success: "#007f2a" + loyalty-gold: "#e5c98a" + +typography: + h1: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 44px + fontWeight: 700 + lineHeight: 52.8px + h1-mobile: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 41px + fontWeight: 700 + lineHeight: 49.2px + hero-headline: + fontFamily: "airnewzald, \"Air New Zealand Sans\", Georgia, serif" + fontSize: 50.16px + fontWeight: 700 + lineHeight: 50.16px + letterSpacing: -0.88px + fare-price: + fontFamily: "airnewzald, \"Air New Zealand Sans\", Georgia, serif" + fontSize: 74.1px + fontWeight: 700 + lineHeight: 74.1px + letterSpacing: -1.3px + fare-title: + fontFamily: "airnewzald, \"Air New Zealand Sans\", Georgia, serif" + fontSize: 30.78px + fontWeight: 700 + lineHeight: 30.78px + letterSpacing: -0.54px + heading-lg: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 27px + fontWeight: 700 + lineHeight: 32.4px + heading-lg-light: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 27px + fontWeight: 400 + lineHeight: 40.5px + heading-md: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 22px + fontWeight: 700 + lineHeight: 26.4px + panel-title: + fontFamily: "\"Air New Zealand Sans\", airNewZealandSans, \"Helvetica Neue\", Arial" + fontSize: 20.928px + fontWeight: 500 + lineHeight: 26.7878px + body: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 17px + fontWeight: 400 + lineHeight: 25.5px + body-tight: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 17px + fontWeight: 400 + lineHeight: 20.4px + body-bold: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 17px + fontWeight: 700 + lineHeight: 22.1px + button: + fontFamily: "\"Air New Zealand Sans\", airNewZealandSans, \"Helvetica Neue\", Arial, sans-serif" + fontSize: 16.96px + fontWeight: 400 + lineHeight: 20.352px + button-signup: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 17px + fontWeight: 400 + lineHeight: 22.1px + panel-link: + fontFamily: "\"Air New Zealand Sans\", airNewZealandSans, \"Helvetica Neue\", Arial" + fontSize: 16.96px + fontWeight: 400 + lineHeight: 21.7088px + label: + fontFamily: "\"Air New Zealand Sans\", airNewZealandSans, \"Helvetica Neue\", Arial" + fontSize: 15.04px + fontWeight: 500 + lineHeight: 18.048px + small: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 15px + fontWeight: 400 + lineHeight: 19.5px + caption: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 13px + fontWeight: 400 + lineHeight: 19.5px + micro: + fontFamily: "\"Air New Zealand Sans\", \"Helvetica Neue\", Arial, sans-serif" + fontSize: 11.2px + fontWeight: 400 + lineHeight: 16.8px + +rounded: + xs: 3px + sm: 4px + action-small: 6px + action: 8px + focus: 10px + lg: 12px + bubble: 100px + circle: 50% + +spacing: + base25: 2px + base50: 4px + base75: 6px + base100: 8px + base125: 10px + base150: 12px + base200: 16px + base250: 20px + base300: 24px + base400: 32px + base500: 40px + base600: 48px + base800: 64px + base1000: 80px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-dark}" + borderColor: "{colors.primary}" + typography: "{typography.button}" + rounded: "{rounded.action}" + padding: 10px 16px + height: 48px + button-signup: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-dark}" + typography: "{typography.button-signup}" + rounded: "{rounded.sm}" + padding: 10px 20px + height: 44px + link: + textColor: "{colors.primary}" + typography: "{typography.body}" + link-hover: + textColor: "{colors.primary-hover}" + typography: "{typography.body}" + link-on-dark: + textColor: "{colors.teal-on-dark}" + typography: "{typography.panel-link}" + link-on-dark-hover: + textColor: "{colors.teal-on-dark-hover}" + typography: "{typography.panel-link}" + booking-panel: + backgroundColor: "{colors.panel}" + textColor: "{colors.on-panel}" + typography: "{typography.panel-title}" + field-on-dark: + backgroundColor: "{colors.field}" + textColor: "{colors.on-panel}" + borderColor: "{colors.field-border}" + typography: "{typography.button}" + rounded: "{rounded.action-small}" + padding: 12px + height: 48px + search-input: + textColor: "{colors.on-dark}" + borderColor: "{colors.search-border}" + typography: "{typography.body}" + rounded: "{rounded.xs}" + padding: 5px 5px 5px 40px + height: 38px + fare-roundel: + backgroundColor: "{colors.roundel}" + textColor: "{colors.on-dark}" + typography: "{typography.fare-title}" + rounded: "{rounded.circle}" + padding: 20px 5px 0px + height: 222px + fare-roundel-hover: + backgroundColor: "{colors.roundel-hover}" + textColor: "{colors.on-dark}" + rounded: "{rounded.circle}" + card-story: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.body-tight}" + nav: + backgroundColor: "{colors.header}" + textColor: "{colors.on-dark}" + typography: "{typography.body}" + padding: 0px 20px + height: 100px + nav-link-hover: + textColor: "{colors.teal-highlight}" + footer: + backgroundColor: "{colors.header}" + textColor: "{colors.on-dark}" + typography: "{typography.body}" + padding: 0px 80px +--- + +## Overview + +Air New Zealand's homepage is a black frame around a postcard. The capture shows a pure-black header — +the italic AIR NEW ZEALAND logotype with the koru, a menu row (Plan · Book · Fly · Koru · Help), an +outlined search box and teal utility links (Manage Booking · Check In · Sign in). Below it a +full-bleed landscape — Aoraki/Mount Cook's glaciers and golden tussock — carries the headline +"It's prime time for a trip" in a heavy serif italic, a countdown ("Hurry, Sale ends in: 28:10:00"), +and four translucent black **fare roundels** ("Los Angeles to Auckland, from $915*") that look like +stamped travel badges. A charcoal "Book your trip" panel overlaps the photo bottom: a segmented +Return / One-way / Multi-city control, dark fields and a teal "Continue" button. + +Under the hero the page is white, editorial and black-on-white: photo cards (a Business Premier +seat, an Expedia hotel, a vineyard lunch, the Koru purple promo) with 22px bold titles, 17px copy and +underlined teal "See more" links; a "Sign up to Special Offers" strip; "We're here to help" with +line icons; then a black footer. + +The typography is the signature. Klim Type Foundry, which drew the logotype, describes the palette: +"Air New Zealand Sans (Söhne) with Newzald Black Italic functioning as a 'hero' typeface across all +communication channels, used for a single word or phrase" +([Klim — The Air New Zealand logotype](https://klim.co.nz/blog/airnz/)). On the site Newzald appears +as the `airnewzald` 700-italic face in the hero headline and the fare roundels; everything else is +Söhne-based Air New Zealand Sans. + +**Key Characteristics:** +- Black (`#000000`) header and footer; white content; ink `#000000`. +- One action colour: teal `#008392` (Unison `teal80`) for buttons and links; hover `#00626e`. +- Lighter teals (`#2dbfd0`, `#4cd6e6`) for links and hover on dark surfaces. +- Hero serif italic (`airnewzald` 700) with negative tracking for headlines and prices. +- 17px body (not 16) — Air New Zealand Sans 400, 1.5 line height. +- Round, translucent fare roundels (222px, `rgba(0,0,0,.88)`). +- Charcoal booking panel `#262429` with `#19181b` fields and `#4f4d56` borders. +- `--unison-*` token system: colour ramps, fluid type with `clamp()`, semantic spacing, radii by role. + +## Colors + +> Source: `web/data/extracted/air-new-zealand.json` (https://www.airnewzealand.com/). Names in brackets are the site's own `--unison-*` variables. + +### Action +- **Teal** (`{colors.primary}` — `#008392`, `--unison-colors-teal80`): Continue, Sign up, "See more" links (153 chars). +- **Teal Hover** (`{colors.primary-hover}` — `#00626e`): measured hover of "See more". +- **Teal on dark** (`{colors.teal-on-dark}` — `#2dbfd0`, `--unison-colors-teal50`): panel links "Manage booking ↗", "Check-in ↗"; hover `#4bd0e0` (`--unison-colors-teal40`, measured). +- **Teal highlight** (`{colors.teal-highlight}` — `#4cd6e6`): measured hover of header nav links; "See More" in roundels. + +### Surface +- **Canvas** (`{colors.canvas}` — `#ffffff`, 7,930 area). +- **Header / footer** (`{colors.header}` — `#000000`, `--unison-colors-koru-black`). +- **Panel** (`{colors.panel}` — `#262429`, `--unison-colors-black80`): booking panel. +- **Field** (`{colors.field}` — `#19181b`, `--unison-colors-black90`), border `#4f4d56` (`--unison-colors-black70`). +- **Roundel** (`{colors.roundel}` — `rgba(0,0,0,.88)` → `#000000e0`); hover `rgba(0,0,0,.78)` → `#000000c7` (measured). + +### Text +- **Ink** (`{colors.ink}` — `#000000`): 1,827 chars, the most-read colour. +- **On dark** `#ffffff`; **on panel** `#f8f7f8` (`--unison-colors-black20`). +- **Muted** `#767676` (image credits), **subtle** `#898989` (copyright), `#bebcc2` (`black50`). +- **"New" tag** `#981d97` (measured on "New" label). + +### Neutral ramp (`--unison-colors-black*`) +`black10 #FFFFFF` · `black20 #F8F7F8` · `black30 #EDEDEE` · `black40 #D7D7DB` · `black50 #BEBCC2` · `black60 #64616B` · `black70 #4F4D56` · `black80 #262429` · `black90 #19181B` · `black100 #000000` — note the numbering runs light → dark and every grey leans faintly violet. + +### Semantic & loyalty +- Error `#d4002b` (`red80`), success `#007f2a` (`green90`). +- Koru purple `#440099` (`--unison-colors-loyalty-club`), gold `#e5c98a` (`--unison-colors-loyalty-gold`); also `koru-bronze #D38244`, `koru-silver #C5D1E3`, `koru-gold #D4BD75`, `koru-platinum #A39383`. + +## Typography + +### Font Family +- **Air New Zealand Sans** — served as `"Air New Zealand Sans"` (regular, 500, 700); default stack `--unison-fonts-default-font-stack: "Air New Zealand Sans", "airNewZealandSans", "Helvetica Neue", Arial`. Klim identifies it as Söhne. +- **airnewzald** — the hero face (loaded `700 italic`), i.e. Newzald Black Italic per Klim. +- Locale stacks for zh-Hans, zh-Hant (TW/HK) and ja are tokenised (`--unison-fonts-ja-font-stack` …). + +### Hierarchy + +| Token | Family | Size | Weight | Line height | Tracking | Measured on | +|---|---|---|---|---|---|---| +| `{typography.fare-price}` | airnewzald | 74.1px | 700 | 74.1px | -1.3px | "$915" | +| `{typography.hero-headline}` | airnewzald | 50.16px | 700 | 50.16px | -0.88px | "It's prime time for a trip" (span) | +| `{typography.h1}` | ANZ Sans | 44px | 700 | 52.8px | — | h1 element (desktop) | +| `{typography.h1-mobile}` | ANZ Sans | 41px | 700 | 49.2px | — | h1 at 390px | +| `{typography.fare-title}` | airnewzald | 30.78px | 700 | 30.78px | -0.54px | "Los Angeles to Auckland" | +| `{typography.heading-lg}` | ANZ Sans | 27px | 700 | 32.4px | — | "We're here to help" | +| `{typography.heading-lg-light}` | ANZ Sans | 27px | 400 | 40.5px | — | "Sign up to Special Offers" | +| `{typography.heading-md}` | ANZ Sans | 22px | 700 | 26.4px | — | card titles | +| `{typography.panel-title}` | ANZ Sans | 20.928px | 500 | 26.7878px | — | "Book your trip" | +| `{typography.body}` | ANZ Sans | 17px | 400 | 25.5px | — | body root (2,165 chars) | +| `{typography.body-tight}` | ANZ Sans | 17px | 400 | 20.4px | — | card copy | +| `{typography.body-bold}` | ANZ Sans | 17px | 700 | 22.1px | — | menu titles | +| `{typography.button}` | ANZ Sans | 16.96px | 400 | 20.352px | — | Continue | +| `{typography.panel-link}` | ANZ Sans | 16.96px | 400 | 21.7088px | — | panel links | +| `{typography.label}` | ANZ Sans | 15.04px | 500 | 18.048px | — | field labels ("From") | +| `{typography.small}` | ANZ Sans | 15px | 400 | 19.5px | — | nav sub-items | +| `{typography.caption}` | ANZ Sans | 13px | 400 | 19.5px | — | photo caption "Mount Cook National Park." | +| `{typography.micro}` | ANZ Sans | 11.2px | 400 | 16.8px | — | roundel fine print | + +The h1 element computes to Air New Zealand Sans 44px/700; its visible text is an inner span in +`airnewzald` 50.16px/700 italic, which is what the eye reads. + +### Principles +- Newzald (airnewzald) only for the "hero" moment — one headline, the fare numbers — with tight negative tracking (~-1.75%). +- Sans headings are bold (700) at 22/27px; body is 17px regular. +- Fluid Unison type scale: `--unison-font-size-md: 1.06rem` (16.96px — the 16.96px values above), `--unison-font-size-lg: clamp(1.22rem, …, 1.33rem)`, `--unison-font-size-xl`, `-xxl`, `-mega`, `-giga`, `-ultra`, `-titan: clamp(2.83rem, calc(1.99rem + 3.41vw), 5.07rem)`. +- Line-height tokens are percentages: `--unison-line-height-l0: 120%` … `l8: 152%`. + +### Note on Font Substitutes +Air New Zealand Sans is a custom build of **Söhne** (Klim Type Foundry, commercial — [klim.co.nz/fonts/soehne](https://klim.co.nz/fonts/soehne/)), and +the hero face is **Newzald** (also Klim). Licensing either from Klim is the faithful option. The +site's own fallback is `"Helvetica Neue", Arial`; for the hero use a black-weight serif italic only +as a placeholder, keeping the negative tracking. + +## Layout + +### Spacing System +Unison spacing primitives are named by percent of an 8px base: `--unison-spaces-base25: 2px`, +`base50: 4px`, `base75: 6px`, `base100: 8px`, `base125: 10px`, `base150: 12px`, `base175: 14px`, +`base200: 16px`, `base225: 18px`, `base250: 20px`, `base300: 24px`, `base400: 32px`, `base500: 40px`, +`base600: 48px`, `base700: 56px`, `base800: 64px`, `base1000: 80px`, `base1200: 96px`, `base1600: 128px`. +Semantic spacing is fluid and grouped by relationship — `connect`, `divide`, `break` — for +`inline`, `stack`, `inset-hoz`, `inset-vert`, `gap`, `offset` (e.g. +`--unison-semantic-spaces-stack-break: clamp(1.5rem, calc(0.57rem + 3.81vw), 4rem)`). + +- Measured paddings: 20px (21), 80px (9), 12px (8), 10px (7), 5px, 40px, 16px, 6px, 8px. +- Measured gaps: 4px, 8px, 24px. + +### Grid & Container +- Layout max widths: `--unison-layout-max-width-sm: 700px`, `-md: 900px`, `-lg: 1152px`. +- Breakpoints: mobile 0, tablet 768px, desktop 1024px, desktop-large 1280px. +- Story cards: 3-column grid (~272px images); help: 3 columns with icons; footer padded 0 80px. +- Form control width token `--unison-layout-form-control-width: 21em`. + +### Whitespace Philosophy +The hero is dense and immersive (photo + roundels + panel); content below is calm, aligned on a +narrow 3-column grid, with modest vertical spacing. + +## Elevation & Depth + +| Level | Treatment | Use | +|---|---|---| +| 0 | Flat | cards, footer | +| 1 | `rgba(25,24,27,.04) 0 6px 18px, rgba(25,24,27,.05) 0 4px 10px, rgba(25,24,27,.04) 0 1px 2px` | floating panels (measured once) | +| Translucency | `rgba(0,0,0,.88)` roundels over photography | fare badges | +| Focus | `0 0 0 2px #008392, 0 2.8px 7px 0 rgba(0,0,0,.25)` (light) / `0 0 0 2px #4cd6e6, …` (dark) | keyboard focus (CSS corpus) | + +Focus radii are tokenised one step larger than the element (`--unison-border-radius-action-medium-element: 8px` → `-focus: 10px`). + +## Shapes + +### Border Radius Scale + +| Token | Value | Unison alias | +|---|---|---| +| `{rounded.xs}` | 3px | header search input | +| `{rounded.sm}` | 4px | Sign up button | +| `{rounded.action-small}` | 6px | `--unison-border-radius-action-small-element`, `-checkbox`; dark fields | +| `{rounded.action}` | 8px | `-action-medium-element`, `-action-large-element`, `-field`, `-card`, `-alert`; Continue | +| `{rounded.focus}` | 10px | `-action-medium-focus`, `-action-large-focus` | +| `{rounded.lg}` | 12px | chat bubble (`12px 12px 12px 0`) | +| `{rounded.bubble}` | 100px | "Need some help?" pill | +| `{rounded.circle}` | 50% | fare roundels, icons | + +### Photography Geometry +New Zealand landscapes (alpine, tussock, coast), food and wine, cabin interiors; story images are +square-cornered rectangles above their text; the hero is full-bleed with a small location caption +("Mount Cook National Park.") in 13px white at bottom-left. + +## Components + +### Buttons +**`button-primary`** — "Continue": teal `#008392` with 1px teal border, white 16.96px/400, padding 10px 16px, 48px tall, 8px radius. +**`button-signup`** — "Sign up": teal, 17px/400/22.1px, padding 10px 20px, 44px, 4px radius (mobile: 12px 24px, 48px, full width). +**Segmented control** — Return / One-way / Multi-city: dark track, selected segment white with dark text, 15.04px labels. + +### Links +**`link`** — teal `#008392`, underlined, hover `#00626e`. **`link-on-dark`** — `#2dbfd0` with ↗ icon, hover `#4bd0e0`. + +### Inputs & Forms +**`field-on-dark`** — `#19181b`, 1px `#4f4d56`, 6px radius, padding 12px, 48px, 16.96px text; label 15.04px/500 `#f8f7f8` above. Swap icon in teal between From and To. +**`search-input`** — header search: transparent on black, 1px `#bbbbbb`, 3px radius, 38px, padding-left 40px for the magnifier icon. + +### Booking panel +**`booking-panel`** — `#262429` panel overlapping the hero, title "Book your trip" 20.928px/500, links top-right, hairline divider, form below. + +### Fare roundel +**`fare-roundel`** — 222px circle, `rgba(0,0,0,.88)`, padding 20px 5px 0; airnewzald title 30.78px, "from $" + 74.1px price, 11.2px fine print, teal "See More"; hover lightens to `rgba(0,0,0,.78)`. + +### Cards +**`card-story`** — image, 22px/700 title, 17px/20.4px copy, teal underlined link; optional purple "New" tag. + +### Navigation +**`nav`** — black, 100px, padding 0 20px; logotype; menu items 16px white, hover `#4cd6e6`; right: search + teal links. Mobile 56px. +**Chat** — "Need some help?" white pill bubble (`100px` radius) with the Oscar bot avatar. + +### Footer +**`footer`** — black, white 17px text, padding 0 80px, region selector "United States USD", link columns. + +## Design System Architecture + +Air New Zealand's design system is called **Unison**. The airline's own +[Accessibility Plan (2024)](https://p-airnz.com/cms/assets/PDFs/2024-air-nz-accessibility-plan-short-version.pdf) +states: "We have a design system called Unison, which holds a collection of components and design +principles for consistent design across all channels. Within Unison, the Digital Design chapter have +clear accessibility principles - these mainly cover visual accessibility (colour, font size, screen +reading etc)". The Unison documentation itself is not public; the token layer below is read from the +live `:root` (205 `--unison-*` variables). + +**Token architecture.** +- *Primitives*: colour ramps by hue in steps of 10 — `--unison-colors-teal10 … teal100` (`teal80: #008392`, `teal50: #2DBFD0`), `black10 … black100`, `violet`, `red`, `orange`, `green`, plus campaign ramps (`gas-green*`, `gas-pink*`) and alpha ramps (`--unison-colors-black-alpha80: #000000B2`, `white-alpha*`). +- *Brand/loyalty*: `--unison-colors-koru-black`, `koru-gold`, `koru-platinum`, `loyalty-club: #440099`, `loyalty-elite`, `loyalty-ep1`. +- *Type*: `--unison-font-size-xs … titan` (fluid `clamp()`), `--unison-font-weight-regular/medium/semi-bold/bold`, `--unison-line-height-l0 … l8`. +- *Space*: `--unison-spaces-base*` primitives and fluid `--unison-semantic-spaces-{inline|stack|inset-hoz|inset-vert|gap|offset}-{connect|divide|break}`. +- *Shape by role*: `--unison-border-radius-field`, `-card`, `-alert`, `-checkbox`, `-action-{small|medium|large}-{element|focus}`. +- *Layout & z-index*: `--unison-layout-max-width-{sm|md|lg}`, `--unison-breakpoints-*`, `--unison-z-index-z-index-{modal|popover|toast|notification}`. +Naming: `--unison-{category}-{name}{step}` for primitives, `--unison-semantic-{category}-{context}-{relationship}` for semantics. + +**Theming.** Light content with dark chrome; components switch to "on-dark" teal variants +(`teal50/40/30`) on black and charcoal surfaces. No dark-mode switch was found. + +**Type & spacing.** Fluid type and spacing via `clamp()` keyed to viewport width; 8px base. + +**Component model (observed).** Buttons (action small/medium/large), fields, checkbox, segmented +control, booking panel, fare roundel, cards, alerts, chat bubble, header with mega-menu, footer. + +**Accessibility (official).** Commitment "to achieve WCAG AA across all products"; keyboard +operability; "focus must always be clearly visible"; form fields "clearly labelled"; "Use the Unison +colour combinations documented in colour in use"; "Colour alone must not be used as the only means of +conveying information"; pages "must pass accessibility validation, e.g. using Lighthouse". The CSS +implements a 2px teal focus ring with a 10px focus radius. + +**Delivery.** CSS custom properties prefixed `--unison-`; web fonts self-hosted (`Air New Zealand Sans`, +`airnewzald`, icon fonts `vlookicon`, `airpoints-*`); no public npm or Figma kit. + +## Do's and Don'ts + +### Do +- Frame pages with a black header and footer; keep content white with black text. +- Use teal `#008392` for every action and link; hover `#00626e`; use `#2dbfd0`/`#4cd6e6` on dark. +- Reserve airnewzald (Newzald Black Italic) for one hero phrase and fare numbers, with negative tracking. +- Set body at 17px/25.5px; sans headings at 700. +- Use Unison role radii: 8px actions/cards, 6px small controls, 10px focus. +- Keep the 2px teal focus ring. + +### Don't +- Don't use Newzald for paragraphs or UI labels. +- Don't use teal for large background fields — it's an action colour. +- Don't round cards with large radii; story images are square. +- Don't convey status by colour alone (official rule). +- Don't introduce non-Unison greys; the ramp is violet-tinted. + +## Responsive Behavior + +### Breakpoints +`--unison-breakpoints-mobile-min-width: 0px`, `tablet: 768px`, `desktop: 1024px`, `desktop-large: 1280px`. + +| Element | Desktop (1280) | Mobile (390) | +|---|---|---| +| Header | 100px | 56px | +| h1 | 44px/700/52.8px | 41px/700/49.2px | +| Sign up button | 10px 20px, 44px | 12px 24px, 48px, full width | + +### Touch Targets +48px Continue and fields; Sign up 48px on mobile. + +### Collapsing Strategy +- Mobile behaviour of fare roundels and the booking panel was not measured. +- Story grid 3 → 1 column. +- Mobile sizes measured: 17, 20, 10.24, 22.8, 12, 15, 15.04, 16.96, 24, 13, 46.74, 11.2px — the fluid `clamp()` scale produces fractional sizes. + +### Image Behavior +Hero landscape crops to keep the subject behind the headline; credits remain bottom-left. + +## Iteration Guide + +1. Black header, full-bleed NZ landscape, hero line in airnewzald 700 italic with -0.88px tracking. +2. Add the charcoal `#262429` booking panel with `#19181b` fields and a teal 8px button. +3. Use `--unison-*` names when emitting CSS; pick spacing from `base*` steps. +4. Content: 22px/700 titles, 17px copy, teal underlined links. +5. Verify hovers: teal → `#00626e`; nav → `#4cd6e6`; roundel → `rgba(0,0,0,.78)`. +6. Re-run `node web/scripts/verify-designs.mjs --slug=air-new-zealand` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/airalo/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/airalo/DESIGN.md new file mode 100644 index 0000000..c17b2b9 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/airalo/DESIGN.md @@ -0,0 +1,319 @@ +--- +version: alpha +name: Airalo +category: "Travel & Hospitality" +description: >- + Airalo's website is a warm eSIM storefront: cream canvas #f4ebe2, black ink, an orange #ff8832 pill button, a sky-blue #85ccdb feature panel, Alexandria bold at 48px for headlines over Satoshi 18px body, and flat character illustrations with soft confetti shapes. +colors: + canvas: "#f4ebe2" + surface-cream: "#faf5f2" + ink-muted: "#60686c" + ink-highlight: "#295161" + positive: "#6bba8c" + negative: "#eb0000" + warning: "#ffa920" + ink: "#000000" + primary: "#ff8832" + on-primary: "#000000" + surface-card: "#ffffff" + surface-sky: "#85ccdb" + border-normal: "#aeb4b7" + primary-hover: "#ffb671" +typography: + display: + fontFamily: Alexandria, sans-serif + fontSize: 48px + fontWeight: 700 + lineHeight: 59px + letterSpacing: "-1.44px" + display-mobile: + fontFamily: Alexandria, sans-serif + fontSize: 32px + fontWeight: 700 + lineHeight: 39px + letterSpacing: "-0.96px" + body: + fontFamily: Satoshi-Regular, sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 28.8px + letterSpacing: "-0.18px" + button: + fontFamily: Satoshi-Regular, sans-serif + fontSize: 18px + fontWeight: 700 + lineHeight: 24px + letterSpacing: "-0.36px" + link: + fontFamily: Satoshi-Regular, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + xs: 4px + sm: 8px + md: 16px + lg: 24px + xl: 64px + pill: 9999px +spacing: + s1: 4px + s2: 6px + s3: 8px + s4: 12px + s5: 16px + s6: 20px + s7: 24px + s8: 32px + s9: 40px + s10: 48px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 12px 24px + height: 48px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-secondary: + backgroundColor: "{colors.surface-card}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 12px 16px + height: 51px + borderColor: "{colors.border-normal}" + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + nav: + textColor: "{colors.ink}" + padding: 0px 0px 24px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.button}" + padding: 6px 8px + text-input: + backgroundColor: "{colors.surface-card}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 0px 8px + height: 54px + card: + backgroundColor: "{colors.surface-card}" + textColor: "{colors.ink}" + rounded: "{rounded.md}" + padding: 24px + boxShadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 4px 8px 0px +--- + +## Overview + +Airalo sells travel eSIMs, and its homepage looks like a friendly illustrated storybook rather than a telecom site. The page background is a warm cream (`{colors.canvas}`), a centred text nav sits above a wide search field ("Where do you need an eSIM?"), and a rotating hero shows two flat-style travellers dancing with phones beside "Feel the freedom of unlimited data". Pale peach, mint and blue lozenges float behind the content as confetti. + +Below the hero the page alternates between cream and a big sky-blue rounded panel that asks "Why do over 30 million people choose Airalo?" with four white circular icons, then a tabbed "How it works / Learn with Airalo" video block. The tone is cheerful, plain-language and reassuring; the visual system is soft, rounded and generously spaced. + +Key characteristics: +- Cream canvas and white cards instead of a stark white page. +- Pure black text (`{colors.ink}`) for maximum legibility on the cream. +- One loud accent: orange (`{colors.primary}`) on pill buttons; sky blue (`{colors.surface-sky}`) as a large feature surface. +- Alexandria (bold, tightly tracked) for headlines; Satoshi for body and UI. +- Pill buttons (9999px), 16px cards, a 24px-radius feature panel, 64px extra-large radius available. +- Illustration-first imagery: flat characters, landmark collages and abstract confetti shapes. +- A published Tailwind-style token layer (`--color-surface-*`, `--color-text-*`, `--color-border-*`, `--radius-*`). + +## Colors + +All hex values are measured from the live homepage and its root custom properties (semantic names in parentheses). + +### Brand +- **Primary** (`{colors.primary}`; `--color-core-primary`, `--color-cobrand-primary`, `--color-orange-500`): `#ff8832`, the orange of Sign up and primary calls to action; also the selected-border colour (`--color-border-selected`). +- **Primary hover** (`{colors.primary-hover}`; `--color-cobrand-primary-hover`): `#ffb671`, a lighter orange (hover lightens rather than darkens). +- **On-primary** (`{colors.on-primary}`): black text on orange. + +### Surfaces +- **Canvas** (`{colors.canvas}`; `--color-background-primary`, `--color-creamy-200`): `#f4ebe2`. +- **Surface cream** (`{colors.surface-cream}`; `--color-background-secondary`, `--color-creamy-100`): `#faf5f2`, the lighter cream used for the three expandable summary bars (How Airalo works, Destinations, Business solutions). +- **Surface card** (`{colors.surface-card}`; `--color-background-tertiary`): white, cards and inputs. +- **Surface sky** (`{colors.surface-sky}`; `--color-surface-secondary-highlight`): `#85ccdb`, the large "Why Airalo" feature panel. + +### Text +- **Ink** (`{colors.ink}`): `#000000` for all headings and body (`--color-text-*-normal`). +- **Ink muted** (`{colors.ink-muted}`; `--color-text-*-disabled`, `--color-neutral-600`): `#60686c`. +- **Ink highlight** (`{colors.ink-highlight}`; `--color-text-display-highlight`): `#295161`, a deep teal for text on blue highlights. + +### Lines and status +- **Border normal** (`{colors.border-normal}`; `--color-border-normal`): `#aeb4b7`, outlines on white buttons. +- **Positive** (`{colors.positive}`; `--color-border-positive`, `--color-surface-primary-positive`): `#6bba8c`. +- **Negative** (`{colors.negative}`; `--color-border-negative`): `#eb0000`. +- **Warning** (`{colors.warning}`; `--color-border-warning`): `#ffa920`. +- Tinted status surfaces also exist in the root (for example `--color-surface-tertiary-positive: #d9ebdd`, `--color-surface-tertiary-negative: #ffc9c7`, `--color-surface-tertiary-warning: #ffeec6`); they are not tokenised here. + +### Usage rules +- Black on cream and black on orange; do not put white text on the orange. +- Use sky blue for one large feature panel per page, with white circles inside it. +- Never use pure white as the page background; cards are white, the canvas is cream. + +## Typography + +### Families +- **Alexandria**: headings (variable weight 100 to 900 loaded; headlines use 700). Alexandria is a Google Fonts family (fonts.google.com/specimen/Alexandria). +- **Satoshi-Regular**: body, buttons, nav and inputs (variable weight 300 to 900 loaded). Satoshi is distributed by Fontshare (fontshare.com/fonts/satoshi). +- Root variables define system sans fallbacks only; the brand fonts are loaded through font-face rules. + +### Hierarchy + +| Token | Font | Size | Weight | Line | Tracking | Use | +|---|---|---|---|---|---|---| +| `{typography.display}` | Alexandria | 48px | 700 | 59px | -1.44px | Hero and section headlines | +| `{typography.display-mobile}` | Alexandria | 32px | 700 | 39px | -0.96px | Headlines at 390px | +| `{typography.body}` | Satoshi | 18px | 400 | 28.8px | -0.18px | Body copy | +| `{typography.button}` | Satoshi | 18px | 700 | 24px | -0.36px | Buttons, nav links, inputs | +| `{typography.link}` | Satoshi | 16px | 400 | 24px | normal | Links, small text | + +### Principles +- Tracking is always slightly negative: -0.03em on display (48px with -1.44px), -0.01em on body (18px with -0.18px) and -0.02em on buttons (18px with -0.36px). +- Two weights only: 700 for headlines and buttons, 400 for reading text. +- Headlines are short questions or promises, in sentence case, centred on feature panels and left-aligned beside illustration. +- Body line height is generous (28.8px at 18px, a 1.6 ratio). +- Other sizes measured: 13px, 14px, 16px, 20px and 22px for captions, prices and small headings. + +### Font substitutes +Alexandria and Satoshi are both freely available. If unavailable, use a geometric sans such as Montserrat for headlines and a geometric grotesque such as Plus Jakarta Sans or Inter for text. + +## Layout + +### Spacing +Extracted scale: `{spacing.s1}` 4px, `{spacing.s2}` 6px, `{spacing.s3}` 8px, `{spacing.s4}` 12px, `{spacing.s5}` 16px, `{spacing.s6}` 20px, `{spacing.s7}` 24px, `{spacing.s8}` 32px, `{spacing.s9}` 40px, `{spacing.s10}` 48px. Measured gaps: 4px to 48px; paddings go up to 64px for panels. + +### Grid and container +- A centred container about two-thirds of the screen wide for nav and search, wider (full viewport) for the hero. +- Hero: illustration left, text right, aligned on the vertical middle. +- The three summary bars sit in a single row, equal widths, each with a down arrow. +- The sky-blue panel bleeds to both viewport edges with 24px-ish rounded corners and has characters overlapping its left and right edges. +- Pagination for the hero is a segmented progress bar with circular arrow buttons. + +### Whitespace +- Large vertical gaps (roughly 60px to 100px) between bands; confetti shapes fill the margins. +- Text columns are narrow (about 420px) next to illustrations. + +## Elevation & Depth + +Elevation is soft and subtle: +- Cards: `rgba(0, 0, 0, 0.08) 0px 4px 8px 0px` (the `{components.card}` shadow). +- Larger floating elements: `rgba(0, 0, 0, 0.08) 0px 12px 24px 0px`. +- An overlay token (`--color-overlay: #0003`) dims content behind modals. +- There are no hard borders on cards; separation comes from white on cream and the soft shadow. +- Depth in imagery comes from overlapping illustration layers (characters in front of the blue panel). + +## Shapes + +- `{rounded.xs}` 4px: small tags. +- `{rounded.sm}` 8px: inputs (`{components.text-input}`). +- `{rounded.md}` 16px: cards. +- `{rounded.lg}` 24px: feature panels and image tops. +- `{rounded.xl}` 64px: very large containers. +- `{rounded.pill}` 9999px: all buttons and the search bar's outer shape, circular icon buttons. +- Confetti shapes are rotated rounded rectangles, diamonds and circles in pale peach, mint and blue. + +## Components + +### Buttons +- **button-primary** (Sign up, About unlimited packages): `{colors.primary}` fill, `{colors.ink}` text, `{typography.button}`, `{rounded.pill}`, padding 12px 24px, height 48px; hover `{colors.primary-hover}`. +- **button-secondary** (Log in, Download Android/iOS app): `{colors.surface-card}` fill, `{colors.ink}` text, `{typography.button}`, `{rounded.pill}`, padding 12px 16px, height 51px, 1px `{colors.border-normal}` outline. +- A small orange circular chat button floats at the right edge. + +### Cards +- **card**: `{colors.surface-card}` background, `{colors.ink}` text, `{rounded.md}`, padding 24px, soft shadow. Examples are the Support card ("Need help? We offer 24/7, multi-language support") at 344px tall and destination/price links such as "Thailand ฿138.50". + +### Inputs +- **text-input**: white, `{rounded.sm}`, 54px tall, padding 0px 8px, text `{typography.button}`. The hero search field is a wide white box with a magnifier icon at left and a "Locations" dropdown at right. + +### Navigation +- **nav**: a centred row (Home, eSIM Store, How Airalo Works, About Airalo, Magazine, Help) under a header holding the logo, globe, currency icon, Log in and Sign up. Active item "Home" is underlined. +- **nav-link**: `{typography.button}`, padding 6px 8px, `{colors.ink}`. +- **link**: `{typography.link}` black with underline on active state. + +### Accordion bars +- Three light-cream bars with a bold label and a down arrow: How Airalo works, Destinations, Business solutions. + +### Tabs +- "How it works" and "Learn with Airalo": two equal tabs with a black underline on the active one and a thin grey line beneath. + +### Signature components +- Feature panel with four white circular icon badges (globe, arrows, phone, QR) and short captions. +- Video card framed in white with a rounded outer border. +- Hero progress bar with arrows. + +## Design System Architecture + +No public Airalo design system site, token package or brand guideline was found beyond a media center; see `SOURCES.json`. What is observable: +- Media center: https://www.airalo.com/about-us/media-center offers a press kit PDF and primary and secondary logo zips; the page itself states no palette or typeface rules. +- The shipped stylesheet is Tailwind CSS v4 style: variables such as `--text-2xl`, `--container-md`, `--border-width-sm`, `--ease-in`, `--tw-ring-shadow`. +- On top of Tailwind it defines a semantic colour layer: `--color-background-{primary,secondary,tertiary}`, `--color-surface-{primary,secondary,tertiary}-{default,normal,highlight,positive,negative,warning,disabled,inverted}`, `--color-text-{display,title,body,caption}-{normal,disabled,inverted,positive,negative,warning,highlight}`, `--color-border-*`, `--color-icon-*`, plus brand aliases `--color-core-primary` and `--color-cobrand-*` (co-brand variants of primary, hover and on-primary). +- Raw palettes are included as scales (orange, yellow, green, blue, red, neutral, creamy). +- Radius tokens: `--radius-xs` .25rem, `-sm` .5rem, `-md` 1rem, `-lg` 1.5rem, `-xl` 4rem, `-full` 9999px. +- Email tokens (`--color-email-primary`, `--color-email-text-primary: #18191a`) show the system is shared with transactional email. + +## Do's and Don'ts + +### Do +- Use the cream `{colors.canvas}` as the page background and white for cards. +- Keep orange for the primary action; one per section. +- Set headlines in Alexandria 700 with negative tracking. +- Make every button a full pill. +- Use flat, friendly illustration with limited colours and floating soft shapes. +- Put a short reassuring sentence under every headline. +- Use sky blue for a single big panel with white icon circles. + +### Don't +- Don't use white text on orange; the on-primary colour is black. +- Don't darken the primary on hover; the system lightens it. +- Don't use thin or light font weights in headings. +- Don't add sharp corners; the smallest radius is 4px and only for tags. +- Don't use photography in place of the illustration language on the homepage. +- Don't use colours outside the root palette for status; use positive, negative and warning tokens. + +## Responsive Behavior + +### Breakpoints +Measurements exist at 1280px and 390px. No official breakpoint list was found. + +### Mobile +- Headline drops from 48px to 32px (`{typography.display-mobile}`) with line height 59px to 39px and tracking -1.44px to -0.96px. + +### Touch targets +- Buttons are 48px and 51px tall; the input is 54px tall. + +### Collapsing +- The summary bars (How Airalo works, Destinations, Business solutions) are accordion-style and are expected to work as full-width rows when narrow; this was not measured. + +### Images +- Illustrations are transparent-background PNG or SVG-like artwork placed on the canvas; photography is limited to the video thumbnail. + +## Voice and Microcopy + +- Benefit-first headlines: "A better way to stay connected", "Feel the freedom of unlimited data". +- Scale claims in plain numbers: "Why do over 30 million people choose Airalo?" and "200+ locations", "53 languages". +- Search prompt is a direct question: "Where do you need an eSIM?" +- Support promise: "Need help? We offer 24/7, multi-language support". +- Buttons are short verbs: Sign up, Log in, About unlimited packages. + +## Imagery and Art Direction + +- Characters are flat vector people with warm skin tones, bold colour-blocked clothing (red stripes, green jacket, yellow cardigan) and exaggerated gestures, always holding a phone, a suitcase or a skateboard. +- Backgrounds are simple landscape fragments (hills, trees, a sunrise disk) on a grey-beige ground shadow. +- The video thumbnail is a landmark collage (Big Ben, Eiffel Tower, Golden Gate-like bridge) with a title in the same headline face. +- Confetti shapes in pale orange, mint and blue float at the edges and are never interactive. + +## Iteration Guide + +1. Cream page, black text, white cards with a soft shadow. +2. Headline in Alexandria bold with negative tracking; body in Satoshi 18px. +3. One orange pill per section; secondary actions are white pills with a grey outline. +4. Add one large sky-blue rounded panel with white icon circles. +5. Place a friendly illustration beside every major headline. +6. Add tokens only from the site's own root variables or measured values, and record them in `SOURCES.json`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/airbnb/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/airbnb/DESIGN.md new file mode 100644 index 0000000..df63483 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/airbnb/DESIGN.md @@ -0,0 +1,297 @@ +--- +version: alpha +name: Airbnb +category: "E-commerce & Retail" +description: >- + Airbnb's website is a photo-first marketplace in white with near-black #222222 text and secondary grey #6c6c6c, a Rausch red-pink #ff385c primary reserved for the logo and the search action, one custom typeface (Airbnb Cereal VF, 14px body, 20px 600 headings) and heavily rounded 20px photo cards. +colors: + canvas: "#ffffff" + ink: "#222222" + ink-secondary: "#6c6c6c" + on-primary: "#ffffff" + primary: "#ff385c" + rausch-deep: "#da1249" + divider: "#ebebeb" + ink-tertiary: "#8c8c8c" + success: "#038026" + error: "#c13515" + info: "#318cf7" + surface-placeholder: "#dddddd" + surface-muted: "#f7f7f7" + ink-disabled: "#c1c1c1" + border-on-media: "#ffffff80" +typography: + display: + fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, \"system-ui\", Roboto, \"Helvetica Neue\", sans-serif" + fontSize: 20px + fontWeight: 600 + lineHeight: 24px + letterSpacing: "-0.18px" + display-mobile: + fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, \"system-ui\", Roboto, \"Helvetica Neue\", sans-serif" + fontSize: 18px + fontWeight: 600 + lineHeight: 24px + letterSpacing: "-0.18px" + heading: + fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, \"system-ui\", Roboto, \"Helvetica Neue\", sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 20.02px + subheading: + fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, \"system-ui\", Roboto, \"Helvetica Neue\", sans-serif" + fontSize: 14px + fontWeight: 500 + lineHeight: 18px +rounded: + xs: 3px + sm: 4px + md: 8px + lg: 12px + xl: 14px + 2xl: 20px + 3xl: 32px + 4xl: 50px + pill: 9999px +spacing: + s1: 2px + s2: 2.5px + s3: 4px + s4: 5px + s5: 5.5px + s6: 6px + s7: 8px + s8: 9.5px + s9: 10px + s10: 11px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + rounded: "{rounded.pill}" + link: + textColor: "{colors.ink}" + typography: "{typography.heading}" + rounded: "{rounded.md}" + nav: + textColor: "{colors.ink}" + padding: 0px 32px + nav-link: + textColor: "{colors.primary}" + typography: "{typography.heading}" + text-input: + textColor: "{colors.ink}" + typography: "{typography.subheading}" + height: 18px + card: + backgroundColor: "{colors.surface-placeholder}" + textColor: "{colors.ink}" + rounded: "{rounded.2xl}" + footer: + backgroundColor: "{colors.surface-muted}" + textColor: "{colors.ink}" + padding: 0px 0px 80px +--- + +## Overview + +Airbnb's logged-out homepage is a deliberately quiet frame around other people's photographs. A white header carries the Rausch-coloured Bélo and wordmark at left, four 3D-illustrated tabs (All, Homes, Experiences, Services) in the centre, and "Become a host" with an avatar menu at right. Under the header a three-part pill search (Where, When, Who) ends in a round Rausch search button. Below it, horizontal rows of square-ish listing cards sit under short place-based titles such as "Available next month in Chiang Mai" and "Popular homes in Opakchong", each with a one-line grey subtitle and a small circular arrow. + +Almost nothing on the page is decorated: white background, near-black text, grey metadata, rounded photographs. The brand colour appears only on the logo and on the search button, so the single saturated pink-red point on the page is always the thing that starts a search. The 2025 app redesign introduced 3D icons for the tabs; Airbnb's in-house design team made the UI, 3D elements and illustrations (itsnicethat.com/articles/airbnb-app-redesign-140525). + +Key characteristics: +- White canvas with `{colors.ink}` (#222222) as the main text colour and `{colors.primary}` (Rausch) as the primary action colour. +- A grey scale doing most of the work: `{colors.ink-secondary}` for metadata and captions, `{colors.ink-tertiary}`, `{colors.ink-disabled}`, `{colors.divider}`. +- Rausch (`{colors.primary}`) as the rare, high-signal primary: logo and search button. +- A single custom typeface, Airbnb Cereal VF, with only 400 to 600 weights visible on the homepage. +- Large radii: 20px listing cards, 32px and 50px containers, pill search, circular icon buttons. +- Photography carries every listing; cards have no borders and only a placeholder fill before images load. +- A very large published token layer (400 custom properties): `--palette-*`, `--corner-radius-*`, `--elevation-*`, `--spacing-*`, `--typography-*`, `--motion-*`. + +## Colors + +All values are measured (frequency analysis and live root properties). Semantic names in parentheses are Airbnb's own custom properties. + +### Brand +- **Primary / Rausch** (`{colors.primary}`; `--palette-rausch`, `--palette-bg-primary-core`, `--palette-logo-brand`): `#ff385c`, the logo colour and the fill of the round search button (an icon-only control the extractor skipped; the value is measured in the root properties). It is the primary action colour. +- **On-primary** (`{colors.on-primary}`; `--palette-text-on-brand`): white, the search glyph on Rausch. +- **Rausch deep** (`{colors.rausch-deep}`; `--palette-rausch700`, `--palette-bg-tertiary-core`, `--palette-text-brand`): `#da1249`, brand text, pressed and brand border states, and a background area measured on the page. +- A product Rausch (`#e00b41`), Plus (`#92174d`) and Luxe (`#222222`) palettes are also in the root; they are not used on the homepage. + +### Neutrals and ink +- **Ink** (`{colors.ink}`; `--palette-text-primary`, `--palette-grey1000`, Hof): `#222222`, headings, row titles, listing titles, nav text and dark controls. It is among the page's most-read text colours. +- **Ink secondary** (`{colors.ink-secondary}`; `--palette-bg-scrollbar-handle-active`, `--palette-icon-secondary`): `#6c6c6c`, the most-read text colour by character count: listing metadata ("฿12,282 for 2 nights", ratings) and subtitles. +- **Ink tertiary** (`{colors.ink-tertiary}`; `--palette-text-tertiary`, `--palette-text-placeholder`): `#8c8c8c`, placeholders ("Search destinations"). +- **Ink disabled** (`{colors.ink-disabled}`; `--palette-text-primary-disabled`): `#c1c1c1`. + +### Surfaces and lines +- **Canvas** (`{colors.canvas}`): white. +- **Surface muted** (`{colors.surface-muted}`; `--palette-grey100`, `--palette-bg-secondary`): `#f7f7f7`, the footer. +- **Surface placeholder** (`{colors.surface-placeholder}`; `--palette-grey400`): `#dddddd`, the fill behind listing images before they load, and the standard secondary border. +- **Divider** (`{colors.divider}`; `--palette-bg-divider`): `#ebebeb`. +- **Border on media** (`{colors.border-on-media}`): `#ffffff80`, a translucent white edge for elements over photographs. + +### Status +- **Success** (`{colors.success}`; `--palette-status-success`): `#038026`. +- **Error** (`{colors.error}`; `--palette-icon-error`, `--palette-border-secondary-error`): `#c13515`. +- **Info** (`{colors.info}`; `--palette-border-input-line-active`, `--palette-icon-info`): `#318cf7`, focus line on inputs. +- Invalid fields use `#d7251c`; warnings `#eb6100`; these are in the root but not tokenised. + +### Usage rules +- Never use Rausch for decoration, headings or large fills. +- Never use Airbnb's Rausch colour or the Bélo in your own brand material: the trademark policy explicitly prohibits featuring Rausch prominently or using the Bélo in any form (airbnb.com/help/article/3233). +- Grey steps are functional (primary, secondary, tertiary, disabled); do not invent intermediate greys. + +## Typography + +### Family +`"Airbnb Cereal VF", Circular, -apple-system, "system-ui", Roboto, "Helvetica Neue", sans-serif`. The loaded font file is named Airbnb Cereal VF (a variable font); Circular and the platform fonts follow as fallbacks in the stack. + +### Hierarchy + +| Token | Size | Weight | Line | Tracking | Use | +|---|---|---|---|---|---| +| `{typography.display}` | 20px | 600 | 24px | -0.18px | Row titles ("Available next month in Chiang Mai") | +| `{typography.display-mobile}` | 18px | 600 | 24px | -0.18px | Row titles at 390px | +| `{typography.heading}` | 14px | 400 | 20.02px | normal | Body copy and links | +| `{typography.subheading}` | 14px | 500 | 18px | normal | Labels, input text, footer headings ("Support") | + +Other measured sizes include 11px, 12px, 13px, 21px, 22px (with -0.44px tracking) and 28px, used for captions, price lines, tab labels and larger numerals. + +### Principles +- The homepage's largest text is 20px; hierarchy is built with weight (400, 500, 600, 700 appear) and colour (primary vs. grey), not size. +- Row titles pair with a lighter grey subtitle under them ("Temple city in northern Thailand"). +- Tracking is slightly negative only on titles. +- Listing metadata is small, 12px to 14px, in grey, separated with a middle dot ("for 2 nights · [U+2605] 4.92"). +- Sentence case throughout. + +### Font substitutes +Cereal is proprietary. Use Inter, DM Sans or Circular-like geometric sans with 400/500/600 weights, 14px body and 20px titles. + +## Layout + +### Spacing +Extracted scale: `{spacing.s1}` 2px, `{spacing.s2}` 2.5px, `{spacing.s3}` 4px, `{spacing.s4}` 5px, `{spacing.s5}` 5.5px, `{spacing.s6}` 6px, `{spacing.s7}` 8px, `{spacing.s8}` 9.5px, `{spacing.s9}` 10px, `{spacing.s10}` 11px. The odd half-pixel values come from icon-and-text alignment. The published scale is `--spacing-micro2px`, `-micro4px`, `-micro8px`, `-micro16px`, `-micro24px`, `-micro32px`, then `--spacing-macro16px` to `-macro80px`. Gaps measured: 2px, 8px, 10px, 12px, 16px, 35px. + +### Grid and container +- Header: 80px tall, 32px horizontal padding. +- Content: rows of six equal cards at 1280px, edge to edge with a small side margin; a scroller arrow appears at row ends. +- Cards are square-ish (image roughly 1:1 on top, two text lines below). +- Footer: `{colors.surface-muted}`, 673px tall in the measurement, with 80px bottom padding. + +### Whitespace +- Very little decoration; section spacing comes from title blocks and 16px to 32px gaps. +- The capture shows a short page (rows load lazily), leaving white below; this is a capture artefact, not a layout choice. + +## Elevation & Depth + +Airbnb's elevation tokens are named `--elevation-elevation0` to `-elevation4`: +- Elevation 0: a 1px inset `#DDDDDD` ring (no shadow). +- Elevation 1: a faint 1px ring plus `0px 2px 4px` at 16% black. +- Elevation 2: faint ring + `0px 2px 6px` at 4% black + `0px 4px 8px` at 10% (matches the first measured shadow on the page). +- Elevation 3: faint ring + `0px 8px 24px` at 10% black (matches the second measured shadow on the page). +- Also `--elevation-tertiary-box-shadow: 0 2px 4px rgba(0,0,0,0.18)`. +Material backgrounds for translucent surfaces: extra-thin `rgba(218,218,218,0.40)`, regular `rgba(250,250,250,0.72)`, thick `rgba(240,240,240,0.86)`, extra-thick `rgba(255,255,255,0.925)`. +"Edge effects" tokens add inner highlights to brand buttons (`--edge-effects-brand-*`) for a slightly dimensional Rausch button. + +## Shapes + +Root radius tokens: 4px (`tiny`), 8px (`small`), 12px (`medium`), 16px (`large`), 24px and 28px (`xxlarge`), 32px (`xxxlarge`). +- `{rounded.xs}` 3px, `{rounded.sm}` 4px: small tags. +- `{rounded.md}` 8px: link hover areas and small controls. +- `{rounded.lg}` 12px and `{rounded.xl}` 14px: smaller image tiles and buttons. +- `{rounded.2xl}` 20px: listing cards (`{components.card}`). +- `{rounded.3xl}` 32px and `{rounded.4xl}` 50px: the search container and large panels. +- `{rounded.pill}` 9999px and 50%: round buttons, "Guest favorite" labels, avatar. + +## Components + +### Search +A three-segment pill: Where (Search destinations), When (Add dates), Who (Add guests), with tiny bold labels above grey placeholder text, 1px dividers between segments, and a round Rausch search button at the right with a white magnifier. The bar carries the elevation-2 shadow. + +### Cards +- **card**: `{colors.surface-placeholder}` background (visible while images load), `{colors.ink}` text, `{rounded.2xl}`, no border, 181px tall in the measured sample. In the capture it is a photo with a white pill label "Guest favorite" top-left and a translucent circle with a white-outlined heart top-right. +- Text under the image: title (Home in Amphoe Mueang Chiang Mai) in `{typography.subheading}`, then price and rating in `{colors.ink-secondary}`. + +### Links and row headers +- **link**: `{colors.ink}`, `{typography.heading}`, `{rounded.md}`, 48px high in the measurement, used for the row title block with an adjacent circular arrow. + +### Navigation +- **nav**: 80px header, padding 0px 32px. +- **nav-link**: `{colors.primary}` as measured on the first link (the logo link); the central tabs use dark text. Tabs pair a small 3D icon (globe, house, balloon, bell) with a 14px label. +- Right cluster: "Become a host" text link, an avatar button with a user icon, and a menu button (both grey circles). + +### Inputs +- **text-input**: `{colors.ink}`, `{typography.subheading}`, 18px text height inside the search segments; focus lines use `{colors.info}`. + +### Footer +- **footer**: `{colors.surface-muted}`, `{colors.ink}`, padding 0px 0px 80px; starting with a Support column (Help Center, Get help with a safety issue). + +### Signature components +- 3D animated tab icons (2025 redesign). +- "Guest favorite" pill. +- Heart wishlist button on media. +- Horizontal listing rows with circular arrow affordance. + +## Design System Architecture + +Airbnb does not publish a public design system site that was found in this research; community sources describe the legacy Design Language System but are not cited. See `SOURCES.json`. What the shipped site proves: +- Token naming in the root (400 custom properties): `--palette-*` colour roles (`bg-`, `text-`, `border-`, `icon-`, `logo-`, `status-`) over raw scales (`grey*`, `rausch*`, `beige*`, `blue*`, `green*`, `red*`, `orange*`, `magenta*`, `purple*`), `--corner-radius-*`, `--elevation-*`, `--edge-effects-*`, `--material-backgrounds-*`, `--spacing-micro*`/`--spacing-macro*`, `--typography-*` (for example `--typography-body-text_14_18-font-size`) and `--motion-springs-*` (spring mass, damping, stiffness). +- 2025 app redesign by Airbnb's in-house team, with new 3D iconography: https://www.itsnicethat.com/articles/airbnb-app-redesign-140525. +- Bélo logo by DesignStudio (July 2014): https://www.brandworkz.com/airbnb-rebrand-belo/. +- Trademark and Rausch policy: https://www.airbnb.com/help/article/3233. +- The root also carries `-inverse` palette roles and a beige scale (`--palette-beige*`), so alternate themes are supported by the token layer. + +## Do's and Don'ts + +### Do +- Keep the page white with `{colors.ink}` text and grey metadata. +- Let photography fill cards edge to edge with a 20px radius. +- Use Rausch only for the search action and the logo. +- Use sentence case, short place-based titles and a grey one-line subtitle. +- Use dividers `{colors.divider}` and the elevation tokens instead of borders on cards. +- Use circular controls (arrow, heart, avatar) at 32px to 40px. +- Keep body at 14px/20px, titles at 20px/24px 600. + +### Don't +- Don't use Rausch for large fills, headings or decorative shapes. +- Don't add more than three font weights per screen. +- Don't use thick borders or heavy shadows on cards. +- Don't mix in other typefaces; the system is one family. +- Don't copy Airbnb's logo, Bélo or Rausch for your own brand. +- Don't centre-align listing text; it is left aligned under the image. + +## Responsive Behavior + +### Breakpoints +Measurements exist at 1280px and 390px. No official breakpoint list was found. + +### Mobile +- Row titles drop from 20px to 18px (`{typography.display-mobile}`), line height stays 24px. +- Other roles were not measured on mobile. + +### Touch targets +- The search button and avatar are circular controls; individual sizes were not isolated in the measurement. + +### Collapsing +- The central tab group and the three-part search are desktop forms; their mobile collapse was not captured. + +### Images +- Cards use cover-cropped photos with a fixed aspect and a 20px radius; the placeholder `{colors.surface-placeholder}` shows during load. + +## Voice and Microcopy + +- Place-led row titles: "Available next month in Chiang Mai", "Popular homes in Opakchong". +- Subtitles describe the place: "Temple city in northern Thailand", "Pak Chong district with mountain views". +- Search labels: "Where / Search destinations", "When / Add dates", "Who / Add guests". +- Listing line: "Home in Amphoe Mueang Chiang Mai", "฿12,282 for 2 nights · [U+2605] 4.92". +- The brand itself is described by its VP of Design as "Fun, alive, and simple" (itsnicethat.com). + +## Iteration Guide + +1. White canvas, `{colors.ink}` text, grey metadata. +2. Build rows: 20px title, grey subtitle, square cards with 20px radius and a pill label. +3. Use a pill search with a single Rausch round button. +4. Use elevation tokens for the search bar and popovers; nothing else casts a shadow. +5. Use one typeface at 14px, 20px and a few other sizes with weights 400, 500, 600. +6. For new tokens, map to the site's own `--palette-*` names and cite them in `SOURCES.json`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/airbus/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/airbus/DESIGN.md new file mode 100644 index 0000000..5a1333b --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/airbus/DESIGN.md @@ -0,0 +1,158 @@ +--- +version: alpha +name: Airbus +category: "Airlines" +description: "Airbus (airbus.com): navy #071a3d hero and #00205b headlines on white, Inter regular 48 to 52px headings, 700 weight 16px buttons with 3px radius, soft navy 0.15 shadows, awx- CSS variable system." +colors: + canvas: "#ffffff" + ink: "#070b11" + primary: "#ffffff" + on-primary: "#00205b" + surface-2: "#071a3d" + surface-3: "#010d24" + ink-secondary: "#e5eaf2" + ink-5: "#505d74" + ink-6: "#a2acbd" + hairline: "#ffffff40" +typography: + display: + fontFamily: InterVariable, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif + fontSize: 48px + fontWeight: 400 + lineHeight: 52.8px + display-mobile: + fontFamily: InterVariable, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif + fontSize: 36px + fontWeight: 400 + lineHeight: 43.2px + heading: + fontFamily: InterVariable, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif + fontSize: 52px + fontWeight: 400 + lineHeight: 62.4px + subheading: + fontFamily: InterVariable, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif + fontSize: 20px + fontWeight: 400 + lineHeight: 28px + button: + fontFamily: InterVariable, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif + fontSize: 16px + fontWeight: 700 + lineHeight: 48px + nav: + fontFamily: InterVariable, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + xs: 3px + sm: 16px + pill: 9999px +spacing: + s1: 1.6px + s2: 2px + s3: 4px + s4: 5px + s5: 7px + s6: 10px + s7: 12px + s8: 14px + s9: 16px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.canvas}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 0px 20px + height: 48px + button-secondary: + backgroundColor: "{colors.canvas}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 9.6px 14.4px + height: 45px + borderColor: "{colors.on-primary}" + link: + textColor: "{colors.ink}" + typography: "{typography.subheading}" + nav: + textColor: "{colors.canvas}" + padding: 0px 20px + nav-link: + textColor: "{colors.on-primary}" + typography: "{typography.nav}" + card: + backgroundColor: "{colors.surface-2}" + textColor: "{colors.on-primary}" + rounded: "{rounded.xs}" + footer: + textColor: "{colors.ink-5}" + padding: 0px 0px 24px +--- + +# Airbus + +## Overview +Airbus (airbus.com/en, titled "Pioneering sustainable aerospace | Airbus") presents itself in a confident, mission-driven corporate voice about safety, sustainability and people. The measured page is 6,718px tall at 1280px. It opens on a full-bleed dark hero in navy (`{colors.surface-2}` #071a3d) carrying the headline "Pioneering sustainable aerospace for a safe and united world" in 48px regular type over an image of a glowing engine on a platform, a circular "scroll down" button at the bottom and a small "Pause" control for the hero. A thin top bar holds the Menu button with a hamburger icon, the white AIRBUS wordmark and, at right, Careers, Investors, Suppliers, Newsroom and a Search control. + +Below the hero the page switches to white: "AIRBUS STORIES" (an uppercase eyebrow) above "Our purpose in action" in navy 52px type with a short navy underline bar, a carousel of story cards with photographs (helicopter rescue, flood relief), small navy pill tags ("Web Story", "Helicopters") and dates with reading time ("29 September 2026 — 3 min read"); then "OUR MISSIONS / Discover what we achieve on a global scale" over four full-height photograph columns with white captions and plus icons; then a navy "JOIN US / Launch your career at Airbus" band with a white "Find out more" button; further sections are "Airbus Faces", "Our latest stories", the half-year financial results and "Let's stay in touch". Imagery is documentary photography of aircraft, helicopters, satellites and people at work, with a blue cast that agrees with the palette. + +## Colors +Measured by painted area: white #ffffff (15,437), navy #071a3d (8,268), deep navy #010d24 (5,048), #011333 (2,770), pale blue-gray #f2f5f9 (2,666) and #c1c7d3 (673). Text by characters: #e5eaf2 (3,113, light text on navy), #070b11 (524, `{colors.ink}`), #00205b (322, `{colors.on-primary}`, the navy used for headlines and button labels), #ffffff (270), #505d74 (164, `{colors.ink-5}`), #a2acbd (38, `{colors.ink-6}`). +- `{colors.canvas}` #ffffff; `{colors.primary}` #ffffff, the fill of the measured primary button ("Find out more", "Discover more"), with `{colors.on-primary}` #00205b as its label. +- `{colors.surface-2}` #071a3d, `{colors.surface-3}` #010d24 for dark bands and cards. +- `{colors.ink-secondary}` #e5eaf2 for text on dark; `{colors.hairline}` #ffffff40 for borders on dark. +The shipped CSS publishes the named scale behind these: `--awx-color-primary-blue-10` #e5eaf2, `-30` #6f9bed, `-40` #457de5, `-80` #002466, `-90` #00205b, `-100` #001b4d, `-110` #071a3d, `-120` #011333; `--awx-color-link` rgb(0,32,91), `--awx-color-link-active` rgb(6,59,158); status colors success rgb(132,189,0), warning rgb(225,224,0); highlights pink #da1884, violet #a51890, blue #00aec7 and red #e4002b; and shadow tint `--awx-color-dominant-shadow: rgba(7,26,61,0.15)`. + +## Typography +The measured stack is `InterVariable, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif` with Inter loaded at 400, 600 and the variable face up to 700. The Airbus Brand Centre (https://brand.airbus.com, opened) states that Neue Helvetica LT will no longer be used and is replaced by the Google font Inter, which matches the loaded font. +- `display` 48px / 400 / 52.8px: the hero h1; `display-mobile` 36px / 400 / 43.2px on the 390px pass. +- `heading` 52px / 400 / 62.4px: section headings ("Our purpose in action"). +- `subheading` 20px / 400 / 28px; `nav` 16px / 400 / 24px; `button` 16px / 700 / 48px. +Measured size usage by characters: 16px (1,956), 20px (932), 14px (531), 18px (313), 24px (239), 52px (165), 12px (120), 22px (80), 32px (64), 48px (60). The body element is 16px / 500 / 24px in #003840. + +## Layout +Page width 1280px, a left-aligned heading column of about a third of the width beside a carousel on the right, then full-bleed photograph strips. Spacing variables published: `--awx-sp-v0-5` 6px, `-v0-75` 9px, `-v1-25` 15px, `-v1-5` 18px, `-v2-25` 27px, `-v2-5` 30px, `-v3` 36px, `-v5` 60px, `-v8` 96px, and horizontal `-h1-25` 20px, `-h3` 48px, `-h4` 64px. Measured spacing tokens: 1.6, 2, 4, 5, 7, 10, 12, 14, 16 and 20px. + +## Elevation & Depth +Soft, navy-tinted, wide shadows: `rgba(7, 26, 61, 0.15) 0px 0px 48px -3.2px` (18 elements), `... 0px 0px 42px -2.8px` (10) and `... 0px 0px 36px -2.4px` (10), plus `rgba(0, 0, 0, 0.05) 0px 1px 3px -5px, rgba(0, 0, 0, 0.1) 0px 6px 24px -5px`. They lift cards from white and dark backgrounds with a diffuse glow rather than a visible edge. + +## Shapes +`--awx-border-radius: 3px` is the base: 3px on 125 elements (`{rounded.xs}`, buttons and cards). 16px on 20 elements (`{rounded.sm}`), 50% on 13 (the round carousel and scroll buttons), plus 4px bottom corners and a 3px left-side cap. Pill tags such as "Web Story" use fully rounded ends. + +## Components +- **button-primary**: white fill, #00205b label, Inter 700 16px, radius 3px, padding 0px 20px, height 48px. +- **button-secondary**: white fill with #00205b border, padding 9.6px 14.4px, height 45px. +- **round buttons** ("scroll down", 48px, 50%): #071a3d with a 25% white border; hover fills rgb(0, 45, 128). The "Pause" control is 24px high, radius 3px, same hover. +- **nav / nav-link**: white wordmark bar and #00205b links on the white state; padding 0px 20px. +- **card**: #071a3d fill, radius 3px, light text. +- **link**: #070b11 text at 20px. +- **footer**: text #505d74, padding 0px 0px 24px. + +### Motion controls and microcopy +The hero exposes its own controls as visible buttons: a labelled "Pause" button (24px high, with a pause glyph) and a circular "scroll down" button, so the autoplaying hero can be stopped by the visitor. Story cards pair a navy pill tag with a headline, a date and a reading-time estimate on one line separated by an em dash. Section eyebrows ("AIRBUS STORIES", "OUR MISSIONS", "JOIN US") are small uppercase labels set above each large heading, and each heading is followed by a short navy bar, a repeated signature of the layout. Carousel navigation uses two outlined circular arrow buttons. + +## Design System Architecture +Airbus runs a branded web system with the `--awx-` prefix (colors, button tokens, spacing, easing `--awx-ease-in-out: cubic-bezier(0.5,0.075,0.115,0.95)`, font weights 500 and 700), shipped in the page CSS. Button tokens are named (`--awx-button-color`, `-hover`, `-border`, `-disabled`, `primary-color-*`). The Brand Centre at https://brand.airbus.com (opened) hosts the brand guidelines, templates and an asset library with Typography, Colours and logo sections; downloads are restricted to Airbus employees, and the page lists no color values, so the awx variables are the only color source used here. The footer also links the Media Centre at mediacentre.airbus.com (listed on the home page; not opened). + +## Do's and Don'ts +- Do use navy #071a3d and #00205b with white, and #e5eaf2 for text on dark. +- Do use Inter, regular for headings and 700 for buttons. +- Do keep corners at 3px for buttons and cards; use circles only for icon controls. +- Do use wide, low-opacity navy shadows (0.15). +- Don't use pure black text; the ink is #070b11. +- Don't introduce highlight colors (pink, violet, red) as interface chrome; they are published variables but are not measured on the home page chrome. + +## Responsive Behavior +Measured at 390px: h1 36px / 400 / 43.2px (from 48px); the "Discover more" button is white with #00205b text, Inter 700 16px. Menu behavior, column counts and breakpoints were not measured. + +## Iteration Guide +1. Dark hero #071a3d, white sections, #00205b headings. +2. Inter 400 for headings (48 to 52px), 700 16px for buttons. +3. 3px radius, 48px high buttons, round 48px icon buttons. +4. Photography with a blue cast, pill tags in navy. +5. Re-measure with `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=airbus --force --no-motion` and run `node web/scripts/verify-designs.mjs --slug=airbus`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/airtable/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/airtable/DESIGN.md new file mode 100644 index 0000000..c952ff7 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/airtable/DESIGN.md @@ -0,0 +1,343 @@ +--- +version: alpha +name: Airtable +category: "Design & Creative Tools" +description: >- + Airtable's marketing site is a calm, enterprise-ready product page: white canvas, near-black #161616 buttons with 4px corners, navy ink #181d26, a single link blue, ATSeasonSans at 550 weight (52px hero, 48px section titles), and large product screenshots set on a photographic sky. +colors: + canvas: "#ffffff" + ink: "#2e2f32" + primary: "#161616" + brand-blue: "#2572ff" + focus-blue: "#0768f8" + border-keyline: "#e0dcdb" + error: "#dc043b" + success-border: "#39bf45" + surface-brand-subtle: "#f1f5ff" + on-primary: "#ffffff" + surface-forest: "#03330b" + surface-subtle: "#f8f6f6" + ink-card: "#1d1f25" + ink-body: "#333840" + ink-navy: "#181d26" + border-hairline: "#1d1f251a" + link: "#254fad" + primary-hover: "#040e20b0" + ink-nav: "#333333" +typography: + display: + fontFamily: ATSeasonSans, -apple-system, "system-ui", sans-serif + fontSize: 52px + fontWeight: 550 + lineHeight: 57.2px + display-mobile: + fontFamily: ATSeasonSans, -apple-system, "system-ui", sans-serif + fontSize: 26.52px + fontWeight: 550 + lineHeight: 29.172px + heading: + fontFamily: ATSeasonSans, -apple-system, "system-ui", sans-serif + fontSize: 48px + fontWeight: 550 + lineHeight: 55.2px + body: + fontFamily: ATSeasonSans, -apple-system, "system-ui", sans-serif + fontSize: 14px + fontWeight: 550 + lineHeight: 18.9px + button: + fontFamily: ATSeasonSans, -apple-system, "system-ui", sans-serif + fontSize: 16px + fontWeight: 650 + lineHeight: 21.6px + nav: + fontFamily: ATSeasonSans, Haas, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 14px + fontWeight: 650 + lineHeight: 18.2px + letterSpacing: 0.14px + body-dominant: + fontFamily: SF Pro Text + fontSize: 10px + fontWeight: 550 + button-secondary: + fontFamily: ATSeasonSans, Haas, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 14px + fontWeight: 550 + lineHeight: 18.9px + letterSpacing: 0.28px +rounded: + xs: 2px + sm: 3px + md: 4px + lg: 5px + xl: 6px + 2xl: 8px + 3xl: 10px + 4xl: 14px + pill: 9999px +spacing: + s1: 2px + s2: 3px + s3: 4px + s4: 5px + s5: 6px + s6: 8px + s7: 9px + s8: 10px + s9: 12px + s10: 14px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 12px 24px + height: 46px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-secondary: + backgroundColor: "{colors.ink-navy}" + textColor: "{colors.canvas}" + typography: "{typography.button-secondary}" + rounded: "{rounded.md}" + padding: 8px 16px + height: 37px + borderColor: "{colors.ink-navy}" + link: + textColor: "{colors.link}" + typography: "{typography.nav}" + rounded: "{rounded.3xl}" + nav: + textColor: "{colors.ink-nav}" + nav-link: + textColor: "{colors.link}" + typography: "{typography.nav}" + rounded: "{rounded.3xl}" + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-card}" + rounded: "{rounded.2xl}" + borderColor: "{colors.border-hairline}" + boxShadow: rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px + transform: matrix(1, 0, 0, 1, 0, 0) + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-nav}" +--- + +## Overview + +Airtable's homepage presents itself as a serious workplace product that happens to be friendly. A thin announcement bar ("Bring your Airtable data into Claude. Try it now") sits above a white header with the cube logo, five navigation items (Platform, Solutions, Resources, Enterprise, Pricing) and three actions: Book Demo (outlined), Sign up for free (dark, filled) and Log in. The hero is a centred two-line headline, "Teams, workflows, agents — one space", a one-sentence promise, and two buttons: a dark "Start building for free" and an outlined "Book a demo". + +The next band is a large product window, a purple-sidebar "Resource Allocation" calendar, set on a blue photographic sky and framed by a segmented pill control (Operations, Project Management, Marketing, Sales, Build anything). A teal tagline, "The system of record for companies building what's next", and a strip of customer logos (Schaeffler, Cisco, Intuit) follow, then a left-aligned section ("Builder speed becomes business momentum") with three tabs and a dark demo panel showing an AI-generated app form. + +Key characteristics: +- A mostly white page with `{colors.primary}` (#161616) for primary actions and headings, and a navy-ish ink (`{colors.ink-navy}`) for secondary actions. +- One typeface family (ATSeasonSans, a variable font) at unusual intermediate weights: 550 for text and headings, 650 for buttons and nav. +- Small radii (4px buttons, 8px cards) for a sober, tool-like feel. +- Product UI as hero imagery: real interface screenshots in white windows with soft layered shadows. +- Hairline grid lines (1px, 10% navy) dividing sections and tab headers. +- A published theme token layer (`--theme_*`, `--color-*`, `--spacing-*`, `--type-*`) including a brand palette of vivid hues. + +## Colors + +All values are measured on the homepage; semantic names in parentheses are Airtable's own custom properties. + +### Core +- **Primary** (`{colors.primary}`): `#161616`, primary button fill and heading colour. +- **On-primary** (`{colors.on-primary}`): white text on dark buttons. +- **Canvas** (`{colors.canvas}`; `--color-surface-primary`): white. +- **Ink navy** (`{colors.ink-navy}`; `--color-text-primary`, `--color-border-primary`, `--color-surface-inverse-primary`): `#181d26`, secondary dark button fill, outline colour and primary text token. +- **Ink** (`{colors.ink}`): `#2e2f32`, the most-read grey-black for paragraphs. +- **Ink card** (`{colors.ink-card}`): `#1d1f25`, text inside product mock cards. +- **Ink body** (`{colors.ink-body}`; `--theme_text`): `#333840`. +- **Ink nav** (`{colors.ink-nav}`): `#333333`, header and footer link text as measured. + +### Links and focus +- **Link** (`{colors.link}`; `--theme_button-background-primary-focus`, `--theme_info-text`): `#254fad`, the "Try it now" link. +- **Focus blue** (`{colors.focus-blue}`; `--color-border-focus`, `--color-text-link-primary`): `#0768f8`. +- **Brand blue** (`{colors.brand-blue}`; `--color-brand-blue`, `--color-surface-brand-bold-2`): `#2572ff`. + +### Surfaces and lines +- **Surface subtle** (`{colors.surface-subtle}`; `--color-surface-secondary`): `#f8f6f6`, warm off-white bands. +- **Surface brand subtle** (`{colors.surface-brand-subtle}`; `--color-surface-brand-subtle-1`): `#f1f5ff`, the pale blue announcement bar tint. +- **Surface forest** (`{colors.surface-forest}`): `#03330b`, a deep green background area measured on the page; where it is used was not isolated. +- **Border hairline** (`{colors.border-hairline}`): `#1d1f251a`, the 1px grid and card borders. +- **Border keyline** (`{colors.border-keyline}`; `--color-border-keyline`): `#e0dcdb`. +- **Primary hover** (`{colors.primary-hover}`; `--theme_button-text-secondary-loading`, `--color-surface-dark-2`): `#040e20b0`, a translucent navy; the site's own theme darkens buttons with a 25% black overlay (see theme tokens). + +### Status +- **Error** (`{colors.error}`; `--color-border-error`): `#dc043b`. +- **Success border** (`{colors.success-border}`; `--theme_success-border`): `#39bf45`. +- The root also defines warning text (`#ffba05`) and a brand palette: red `#e33a3d`, vermilion `#f85c0e`, orange `#ff9113`, yellow `#ffcd05`, chartreuse `#d3e509`, green `#74cf24`, teal `#4fd7c1`, cyan `#00b1ec`, indigo `#775cff`, purple `#ac59ff`, pink `#ea4ecb`, warm gray `#a39e9e`. These appear inside product mockups, not UI chrome. + +### Usage rules +- Chrome is monochrome: white, black and grey; colour belongs to product screenshots and imagery. +- Blue is for links, focus rings and info states. +- A "spotlight" gradient button style exists in the theme (pink `#ff00a8` to purple `#7c37ef`) but was not observed on the page. + +## Typography + +### Family +- **ATSeasonSans** (variable, weights 100 to 900 loaded, exposed as `--type-family-at-season-sans: AT Season Sans VF`) for headings, body, nav and buttons. +- **Haas** (400, 700) and **Haas Groot Disp** (500) load as secondary families: Haas is the fallback in nav and footer stacks, Haas Groot Disp appears in the footer. +- **SF Pro Text / SF Pro Display** appear inside product screenshots (mock UI text), and **Source Sans 3** is also loaded. + +### Hierarchy + +| Token | Size | Weight | Line | Tracking | Use | +|---|---|---|---|---|---| +| `{typography.display}` | 52px | 550 | 57.2px | normal | Hero h1 | +| `{typography.display-mobile}` | 26.52px | 550 | 29.172px | normal | Hero at 390px | +| `{typography.heading}` | 48px | 550 | 55.2px | normal | Section titles | +| `{typography.body}` | 14px | 550 | 18.9px | normal | Small copy | +| `{typography.button}` | 16px | 650 | 21.6px | normal | Primary buttons | +| `{typography.button-secondary}` | 14px | 550 | 18.9px | 0.28px | Header buttons | +| `{typography.nav}` | 14px | 650 | 18.2px | 0.14px | Header navigation and links | +| `{typography.body-dominant}` | 10px | 550 | none | none | Text inside product mock UI (SF Pro Text) | + +Other measured sizes: 10.5px, 12px, 12.5px, 13px, 18px and 20px. The theme scale: `--type-size-4xs` 12px, `-3xs` 14px, `-2xs` 16px, `-xs` 18px, `-sm` 20px, `-sm-md` 24px, `-md` 32px, `-ml` 40px, `-lg` 48px, `-xl` 64px, `-2xl` 80px, `-3xl` 96px, `-4xl` 120px; weights `--type-weight-regular: 500`, `--type-weight-strong: 600`. + +### Principles +- Weight is used finely (550, 650) rather than the usual 400/700 pair, giving a slightly heavy, confident texture. +- Headlines are sentence case, short and rhythmic ("Builder speed becomes business momentum"). +- Letter-spacing is normal on display type and slightly positive on small UI labels (0.14px to 0.28px). +- Tab labels switch between dark (active) and light grey (inactive) at the same size. + +### Font substitutes +ATSeasonSans is a licensed variable font. Substitutes: Inter or Geist with `font-weight: 550` on variable builds, or 500/600 on static families. Keep the 52px/57.2px hero ratio. + +## Layout + +### Spacing +Extracted usage scale: `{spacing.s1}` 2px, `{spacing.s2}` 3px, `{spacing.s3}` 4px, `{spacing.s4}` 5px, `{spacing.s5}` 6px, `{spacing.s6}` 8px, `{spacing.s7}` 9px, `{spacing.s8}` 10px, `{spacing.s9}` 12px, `{spacing.s10}` 14px. The published scale: `--spacing-xs` 4px, `-sm` 8px, `-sm-md` 12px, `-md` 16px, `-lg` 24px, `-xl` 32px, `-2xl` 40px, `-3xl` 48px, `-4xl` 64px, `-5xl` 96px, `-6xl` 128px and `--spacing-section-inset: 163px`. + +### Grid and container +- Hero is centred in a narrow column; the product screenshot is wider and centred. +- Below, sections are left-aligned with a margin of about 30px and divided by 1px lines forming a table-like grid (three equal cells for logos, three equal tabs). +- The footer is a top bar (logo, five links, social icons) and then five link columns: Platform, Solutions, Resources, Learn, Company. + +### Whitespace +- Large vertical gaps around the hero; the tagline band is a short strip with vertical dividers. +- Content sits on white with no background texture except the sky behind the product window. + +## Elevation & Depth + +Published shadow tokens: `--shadow-low` (`0px 0px 1px` + `0px 0px 2px` + `0px 1px 4px`, navy at low alpha), `--shadow-medium` (adds `0px 2px 16px`) and `--shadow-high` (`0px 4px 8px` and `0px 18px 32px`). Measured on the page: +- Cards: `rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px` (`{components.card}`). +- Product window: a large layered shadow with `rgba(22, 22, 22, 0.22) 0px 18px 44px 0px`, and a modal-scale shadow `rgba(22, 22, 22, 0.3) 0px 30px 70px 0px`. +- Focus: `rgb(22, 110, 225) 0px 0px 0px 1px` with a soft blue glow. +Theme buttons add a thin inset ring and tiny blue-tinted shadow for the primary blue style. The primary dark button on the homepage is flat. + +## Shapes + +- `{rounded.xs}` 2px, `{rounded.sm}` 3px: tiny tags and inner mock-UI elements. +- `{rounded.md}` 4px: all marketing buttons (`{components.button-primary}`, `{components.button-secondary}`). +- `{rounded.lg}` 5px, `{rounded.xl}` 6px: mock UI controls. +- `{rounded.2xl}` 8px: cards (`{components.card}`). +- `{rounded.3xl}` 10px: link and nav-link hover areas. +- `{rounded.4xl}` 14px: product window and larger containers (the top corners are 4px 4px 0 0 on some panels). +- `{rounded.pill}` 9999px: the segmented control of use-case tabs and avatars. +Published radius tokens: `--radius-sm` 4px, `-md` 12px, `-lg` 16px, `-xl` 32px, `-full` 9999px. + +## Components + +### Buttons +- **button-primary** (Start building for free, Try the template for free): `{colors.primary}` fill, `{colors.canvas}` text, `{typography.button}`, `{rounded.md}`, padding 12px 24px, height 46px. Hover uses `{colors.primary-hover}`. +- **button-secondary** (Sign up for free): `{colors.ink-navy}` fill and border, white text, `{typography.button-secondary}`, `{rounded.md}`, padding 8px 16px, height 37px. +- Outlined button (Book Demo, Book a demo): transparent, 1px `{colors.ink-navy}` border, navy text. +- The CTAs sometimes end with an arrow glyph ("Start building for free →"). + +### Cards +- **card**: white `{colors.canvas}`, text `{colors.ink-card}`, `{rounded.2xl}`, 1px `{colors.border-hairline}` border, the two-layer soft shadow above. These are mock UI cards inside product screenshots (for example a goal card with "Achieve 99% Uptime", Q2, owner and progress). +- Section cells are borderless table cells divided by 1px lines. + +### Navigation +- **nav**: announcement bar (pale blue, centred text with a link and close icon), then a header with cube logo, Platform/Solutions/Resources with chevrons, Enterprise, Pricing, and right-aligned actions; text colour `{colors.ink-nav}`. +- **nav-link** and **link**: `{typography.nav}` in `{colors.link}` for inline links, `{rounded.3xl}`. + +### Tabs and segmented control +- Use-case control: pill track with translucent dark background, the active item a white pill. +- Section tabs: three equal cells; the active tab has dark text and a 1px dark underline, the inactive ones are light grey and larger. + +### Footer +- **footer**: white, `{colors.ink-nav}`, five link columns, social icons in grey. + +### Signature components +- Product window with a coloured sidebar and calendar, set over a sky photo. +- Tagline band in teal with vertical dividers. +- Customer logo strip with three equal cells. +- Dark AI demo panel with a blue-focus textarea. + +## Design System Architecture + +Airtable's newsroom page (https://www.airtable.com/newsroom) lists brand assets and official logos and a press contact, but no public design-system documentation or token package was found; see `SOURCES.json`. Observable facts from the shipped CSS: +- Tailwind-style variables (`--tw-*`, `--spacing`, `--bk-spacing: .25rem`) sit alongside a semantic layer: `--color-surface-*`, `--color-text-*`, `--color-border-*`, `--color-icon-*`, each with inverse counterparts, plus `--color-brand-*` hue names. +- A component theme layer with `--theme_*` names (`--theme_button-background-primary`, `--theme_button-shadow-secondary-hover`, `--theme_anchor-link-primary-hover`, `--theme_info-border`, `--theme_success-text`, `--theme_spotlight-background-*`). Each interactive state (active, disabled, focus, hover, loading) has its own token. +- A named gradient "spotlight" family for AI features (radial pastel orange-pink-lilac-blue backgrounds, and a strong multi-hue linear gradient). +- Type scale tokens `--type-size-*` and `--type-weight-*`; spacing tokens `--spacing-*`; shadow tokens `--shadow-low|medium|high`; radius tokens `--radius-*`. +- API documentation shows Airtable's REST API (https://airtable.com/developers/web/api/introduction) but that is a developer product, not a UI kit. + +## Do's and Don'ts + +### Do +- Use white and `{colors.primary}` for chrome; let product screenshots carry colour. +- Use 4px-radius buttons, 46px for the hero action and 37px for header actions. +- Set type in ATSeasonSans 550 for text and 650 for buttons and nav. +- Use 1px hairlines to build table-like grids. +- Pair every hero with a real product window. +- Keep copy plain and verb-led ("Start building for free"). +- Use the blue only for links, focus and info. + +### Don't +- Don't use the brand hues (red, orange, teal and so on) in UI chrome. +- Don't round buttons into pills; pills are for the segmented control. +- Don't add heavy drop shadows to buttons. +- Don't use 400 or 700 as the default weights; the system sits at 550 and 650. +- Don't use stock photography; the one photo is a sky behind the product. +- Don't center long paragraphs outside the hero. + +## Responsive Behavior + +### Breakpoints +Measurements exist at 1280px and 390px. No official breakpoint list was found. + +### Mobile +- Hero h1 drops from 52px/57.2px to 26.52px/29.172px (`{typography.display-mobile}`). +- Other roles were not measured on mobile. + +### Touch targets +- Primary buttons are 46px tall; header buttons 37px. + +### Collapsing +- The header's five items and three actions are a desktop layout; its mobile collapse was not measured. + +### Images +- The product window scales with the container and the sky photo bleeds to the viewport edges. + +## Voice and Microcopy + +- Direct, product-led: "Describe the app you need in plain words, or drop in a spreadsheet you already have." +- Parallel phrases for tabs: "From a sentence to a system", "Automate the busywork", "Run on shared data". +- Hero promise: "Other tools let you build with agents. Airtable lets you build with your whole team (agents included)." +- Calls to action: "Start building for free", "Book a demo", "Try the template for free". +- Announcement: "Bring your Airtable data into Claude." + +## Imagery and Art Direction + +- Product-first: real UI screenshots in white windows, not illustrations. +- The hero window sits on a cloudy blue sky photo, giving the page its only photographic note. +- Mock UI uses a rich purple sidebar, small avatars and pastel status chips (a mint "Compassionate leave" tag). +- Customer logos appear as black wordmarks in equal cells. +- The AI demo panel is a dark UI with large white labels and a blue focus outline. + +## Iteration Guide + +1. White canvas, `{colors.primary}` headings, a hairline grid for sections. +2. Hero: two-line centred headline, one sentence, a dark and an outlined button. +3. Follow with a product window on a calm background. +4. Use ATSeasonSans (or a substitute) at weights 550 and 650. +5. Keep corners at 4px for buttons and 8px for cards. +6. Add tokens only from the site's own `--theme_*`, `--color-*` and measured values, and cite them. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/airtel/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/airtel/DESIGN.md new file mode 100644 index 0000000..db6aef1 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/airtel/DESIGN.md @@ -0,0 +1,140 @@ +--- +version: alpha +name: Airtel +category: "Telecom" +description: "Airtel (airtel.in), Indian telecom storefront: black #000000 buttons with #f6f6f6 labels and 8px radius, Tondo and TondoBold type, white and #f7f7fa bands, 16px cards with #e8e8eb borders, 32px wizard pills." +colors: + canvas: "#ffffff" + ink: "#292c31" + primary: "#000000" + on-primary: "#f6f6f6" + surface-2: "#f7f7fa" + surface-3: "#f4f5ff" + ink-2: "#696b6f" + ink-3: "#3e4146" + ink-6: "#075ee8" + hairline: "#e8e8eb" +typography: + display: + fontFamily: Tondo, sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 26px + letterSpacing: "-0.225px" + display-mobile: + fontFamily: Tondo, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 20px + letterSpacing: "-0.07px" + heading: + fontFamily: TondoBold, sans-serif + fontSize: 12px + fontWeight: 700 + lineHeight: 14px +rounded: + xs: 8px + sm: 14px + md: 15px + lg: 16px + xl: 32px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 6px + s4: 8px + s5: 10px + s6: 12px + s7: 13px + s8: 14px + s9: 16px + s10: 18px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.heading}" + rounded: "{rounded.xs}" + padding: 14px 18px + height: 40px + button-primary-hover: + backgroundColor: "{colors.ink-3}" + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.heading}" + rounded: "{rounded.xs}" + padding: 14px 18px + height: 40px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-2}" + rounded: "{rounded.lg}" + borderColor: "{colors.hairline}" +--- + +# Airtel + +## Overview +Airtel (airtel.in) is an Indian telecom brand; the page title is "Airtel: Wi-Fi, Postpaid, Prepaid, DTH, Bank & Business". The measured home page is 3,939px tall at 1280px and works as a consumer storefront. The very top is a utility strip with three audience tabs (INDIVIDUAL, the active one underlined in red; BUSINESS; INVESTOR) and an "Explore Airtel" menu. Under it, a white navigation bar carries the red swoosh Airtel logo and menus for Wi-Fi, Postpaid, Prepaid, DTH, Airtel Black, Bank, Finance, Help, plus Coverage Map, Service Quality and Account. A hero carousel ("2/11" with circular arrow buttons) shows a slide "Big Data, Bigger Entertainment / Prime, JioHotstar, 19 OTTs & 30GB" with a black "RECHARGE AT ₹200" button, against a red wave and a phone photograph. + +Lower sections: "Buy a new connection" (a row of nine round-icon shortcuts, a promo strip "Faster speeds. Just for you." with an UPGRADE NOW outline button), "Recharge or pay bills" (pill tabs Prepaid, Postpaid, DTH, Wi-Fi, Airtel Black, a mobile-number input and a wide black RECHARGE button), a peach promo strip for free data coupons, "Recommended for you" (three white cards with photographs, a small uppercase category, BUY NOW black button and LEARN MORE blue link), and a dark "Find the best Wi-Fi plan for you" wizard with step cards and black or lavender pill choices. A green floating chat button sits at the right edge; it is third-party chrome and is not documented as a token. Photography is lifestyle people with phones and laptops, often against red. + +The measured h1 role was mis-detected: the extractor picked a promo line ("That's the Postpaid advantage", 18px) as the largest hero text, so `display` below is that line's style, not a page headline. The visible section titles ("Buy a new connection", "Recharge or pay bills", "Recommended for you") are bold, centered, larger type; their exact size was not recorded as a token. An attempt to read the page with the fetch tool returned only the page title, so copy quoted here comes from the capture. + +## Colors +- `{colors.canvas}` #ffffff for most area (7,998 units), `{colors.surface-2}` #f7f7fa (2,098) for alternating bands, `{colors.surface-3}` #f4f5ff (449), plus #e3e5ff (81) and #fbfbff (62) tints for lavender chips. +- `{colors.primary}` #000000: the fill of every measured button (UPGRADE, RECHARGE, GET STARTED, the selected pills), with `{colors.on-primary}` #f6f6f6 as label. +- `{colors.primary-hover}` is not a token; the measured hover for black buttons is the fill #3e4146 (`{colors.ink-3}`) plus a 1px black ring `rgb(0, 0, 0) 0px 0px 0px 1px`. +- Ink: `{colors.ink}` #292c31 (2,358 characters), `{colors.ink-2}` #696b6f (505, secondary text), `{colors.ink-3}` #3e4146 (325), white-ish #f6f6f6 (238), black (132), and `{colors.ink-6}` #075ee8 (79 characters, the blue of LEARN MORE links). +- Red text #ff0000 appears on 28 characters; the logo and hero wave are red in the capture, although the red fill itself was not recorded as a token. +- `{colors.hairline}` #e8e8eb is the card border (8 measured). +- The shipped CSS exposed no root variables. + +## Typography +Two Airtel faces: **Tondo** (400) for text and **TondoBold** (700) for headings and buttons. Sizes by characters: 14px (1,307), 12px (876), 18px (658), 32px (446), 16px (216), 20px (129), 10px (37). Weights: 400 (2,507), 700 (1,162). Tracking is negative on larger sizes and positive on small caps: 14px / -0.07px, 18px / -0.225px, 32px / -0.4px, 16px / -0.16px, 20px / -0.3px, 12px / +0.6px (uppercase buttons), 12px / 0.24px and 10px / 0.1px. +- `display` Tondo 18px / 400 / 26px / -0.225px (the promo line detected as h1). +- `display-mobile` Tondo 14px / 400 / 20px / -0.07px. +- `heading` TondoBold 12px / 700 / 14px: the h2 "Quick Access" and button labels. The body element is TondoBold 12px, uppercase, tracking 0.24px, color #000000. + +### Voice and microcopy +Calls to action are short and transactional: "RECHARGE AT ₹200", "UPGRADE NOW", "BUY NOW", "LEARN MORE", "GET STARTED", "KNOW MORE", "GET APP". Prices use the rupee sign inline with the offer ("Enjoy unlimited wi-fi at ₹999", "Rs. 799 per month"). Cards open with an uppercase category label (FIBER, POSTPAID ADVANTAGE, PREPAID) and then a one-sentence benefit. The wizard asks plain questions ("How many devices are you looking to connect to your wi-fi?") and answers with a large number and a price ("100 Mbps, Rs. 799 per month"). The tone is direct and benefit-led, written for quick scanning on a dense page. + +## Layout +A centered column of about 1,100 to 1,200px with generous section padding (76px recorded on 11 elements) and full-bleed hero and dark sections. Gaps: 16px (31 uses), 4px, 24px, 40px, 41px, 64px, 36px. Padding: 12px (79), 18px (37, the button horizontal padding), 20px, 8px, 14px. Cards sit three across with 16px gaps; shortcut icons sit nine across in the first row. + +## Elevation & Depth +Two shadows measured: `rgba(1, 49, 101, 0.1) 6px 20px 50px 0px` (3 elements, large diffuse blue-tinted shadow on feature cards) and `rgba(0, 0, 0, 0.1) 0px 4px 10px 0px` (1). Most cards are flat with a #e8e8eb hairline instead. + +## Shapes +Radii by count: 100% (22, circle icons and arrow buttons), 8px (20, `{rounded.xs}`, buttons), 16px (12, `{rounded.lg}`, cards), 32px (12, `{rounded.xl}`, selected wizard pills), 15px top corners (4, card images), 14px (2), 50% (1). + +## Components +- **button-primary**: #000000 fill, #f6f6f6 text, TondoBold 12px uppercase with 0.6px tracking, radius 8px, padding 14px 18px, height 40px (36px for GET STARTED). Hover fills #3e4146 with a black 1px ring. +- **wizard pill**: black fill, 32px radius, 44px high ("1-5", "General Browsing", "Gaming"). +- **outline button** (UPGRADE NOW): transparent with a dark border, radius pill. +- **card**: white, radius 16px, #e8e8eb border, text #696b6f. +- **link** (LEARN MORE): #075ee8 uppercase. +- **text input**: white with a visible outline, mobile-number field. + +## Design System Architecture +No public design system or brand guideline was found on the page, and the fetch of the home page returned only its title, so no further page was opened. The CSS exposes no root variables; the de-facto system is Tondo/TondoBold, black actions, a gray text ramp (#292c31, #3e4146, #696b6f) and a 32/16/8px radius ladder. Sources opened: https://www.airtel.in/ (title only via fetch; full page via extractor). + +## Do's and Don'ts +- Do use black buttons with #f6f6f6 labels, 8px radius, uppercase 12px bold. +- Do use Tondo and TondoBold only. +- Do keep section backgrounds alternating white and #f7f7fa. +- Do use blue #075ee8 only for secondary text links. +- Don't treat the chat floating button or cookie elements as brand UI. +- Don't use red as a fill for buttons; the measured buttons are black. + +## Responsive Behavior +Measured at 390px: the promo line is 14px / 400 / 20px / -0.07px (from 18px), and the button "KNOW MORE" keeps #000000 fill, #f6f6f6 text, TondoBold 12px, tracking 0.6px, radius 8px. Navigation collapse and column counts were not measured. + +## Iteration Guide +Keep to the measured ladder: sizes 10, 12, 14, 16, 18, 20 and 32px only, weights 400 and 700 only, and gaps and paddings from the recorded set (4, 8, 12, 16, 18, 20, 24px). Verify any new component against the live page before adding it. +1. White and #f7f7fa bands, #292c31 text, black buttons. +2. Tondo 400 for text, TondoBold 700 for labels, 12px uppercase buttons. +3. 8px buttons, 16px cards, 32px pills, circles for icons. +4. Re-measure with `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=airtel --force --no-motion` and run `node web/scripts/verify-designs.mjs --slug=airtel`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ais/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ais/DESIGN.md new file mode 100644 index 0000000..8786b80 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ais/DESIGN.md @@ -0,0 +1,412 @@ +--- +version: alpha +name: AIS +category: "Thai Brands" +description: "AIS (Advanced Info Service) consumer site ais.th: white #ffffff canvas under a two-tier muse-green header (#1e3d35 top bar, #25584f nav), kelly green #73c23a as the brand accent (nav hover, active carousel dots, --cms-btn-default), DB Heavent at large sizes (62px/64px h1 in #262626, 40px h3, 24px/28px body in #7b7b7b), 16px-radius white icon tiles on a #f5f5f5 band, 8px-radius imagery and soft rgba(27, 28, 25, 0.15) shadows." + +colors: + primary: "#73c23a" + primary-hover: "#4f9e28" + primary-50: "#eef8e8" + primary-100: "#d6edc5" + primary-200: "#bae19f" + primary-300: "#9ed478" + primary-400: "#88cb59" + primary-600: "#64b232" + primary-800: "#3a8a1f" + primary-900: "#08680a" + secondary: "#1e3d35" + secondary-800: "#25584f" + secondary-700: "#29685d" + secondary-600: "#2d786c" + secondary-50: "#e0efee" + on-primary: "#ffffff" + canvas: "#ffffff" + surface: "#f5f5f5" + ink: "#262626" + ink-muted: "#7b7b7b" + ink-secondary: "#333333" + ink-bold-grey: "#555555" + ink-medium-grey: "#9d9d9d" + olive: "#7d7548" + light-grey: "#e9e9e9" + border: "#d9d9d9" + tile-border: "#1b1c1912" + serenade-50: "#fdfaf3" + serenade-gold: "#6c3d02" + alert-red: "#ff4242" + +typography: + h1: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 62px + fontWeight: 400 + lineHeight: 64px + h1-mobile: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 40px + fontWeight: 400 + lineHeight: 40px + h2: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 56px + fontWeight: 400 + lineHeight: 56px + h3: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 40px + fontWeight: 400 + lineHeight: 40px + h4: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 32px + fontWeight: 400 + lineHeight: 32px + h5: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 28px + fontWeight: 400 + lineHeight: 28px + body1: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 28px + body2: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 24px + caption-bold: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 20px + fontWeight: 700 + lineHeight: 20px + sub-caption: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 16px + keywords: + fontFamily: "\"DB Heavent\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 16px + +rounded: + sm: 8px + md: 10px + lg: 16px + xl: 30px + indicator: 48px + pill: 9999px + +spacing: + xxs: 2px + xs: 4px + sm: 8px + md: 12px + lg: 16px + xl: 24px + xxl: 40px + section: 70px + huge: 80px + +components: + topbar: + backgroundColor: "{colors.secondary}" + textColor: "{colors.on-primary}" + typography: "{typography.caption-bold}" + padding: 14px 70px + height: 52px + nav: + backgroundColor: "{colors.secondary-800}" + textColor: "{colors.on-primary}" + typography: "{typography.body1}" + height: 72px + nav-link-hover: + textColor: "{colors.primary}" + quick-menu-tile: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + rounded: "{rounded.lg}" + border: "1px solid #1b1c1912" + shadow: rgba(27, 28, 25, 0.15) 0px 4px 21.33px 0px + width: 66px + height: 66px + quick-menu-label: + textColor: "{colors.ink-secondary}" + typography: "{typography.body2}" + quick-menu-band: + backgroundColor: "{colors.surface}" + height: 204px + carousel-dot-active: + backgroundColor: "{colors.primary}" + rounded: "{rounded.indicator}" + width: 24px + height: 8px + carousel-dot: + backgroundColor: "{colors.light-grey}" + rounded: "{rounded.md}" + width: 8px + height: 8px + carousel-control: + backgroundColor: "{colors.surface}" + rounded: "{rounded.pill}" + width: 40px + height: 40px + card-text: + textColor: "{colors.ink-muted}" + typography: "{typography.body1}" +--- + +## Overview + +AIS (Advanced Info Service) is Thailand's mobile and broadband operator; its official [About Us](https://www.ais.th/en/about-us) page positions it as "AIS THE COGNITIVE TECH-CO" with the brand proposition "Empowering The Excellent Experience". The English consumer homepage (`ais.th/en/consumers`) is a promotional storefront built from a CMS component library. + +The page opens with a two-tier header in deep "muse" greens: a slim `{colors.secondary}` (`#1e3d35`) top bar with CONSUMERS / BUSINESS / ABOUT US tabs on the left and Switch to AIS, myAIS, Login and an EN/TH language selector on the right; below it a `{colors.secondary-800}` (`#25584f`) navigation bar with the AIS logo (a kelly-green swoosh over white "AIS" letters) and Online Store, Package, Fibre, Promotion, Entertainment, Lifestyle, Privileges, Help & Support, search and cart. Nav labels are white and turn kelly green `{colors.primary}` (`#73c23a`) on hover. + +The hero is a full-width campaign carousel (in the capture: illustrated Asian Games mascots with a "Watch More Asian Games Live on AIS PLAY" offer panel), with round grey arrow buttons and a green pill indicator. A light-grey `{colors.surface}` band follows with eight white rounded icon tiles (Buy Phone, Buy On-top Package, Promotion, Buy Tablet, Lucky Number, Prepaid SIM, Switch to Postpaid, Switch to AIS). Then a centred campaign banner, and product sections — "Smart Phone", "SIM Card" — where a big heading and short description sit on the left and a carousel of white product cards overlaps a textured olive or grey photographic panel on the right. Further down, `h1` section titles such as "On Top Package", "Network", "Fibre Broadband", "Privileges" and "Entertainment" introduce image cards with white 40px titles. + +The overall feel is a large-type Thai telco: everything is set big (body copy at 24px), green is the brand signal, deep green frames the page, and photography and campaign art carry most of the colour. + +**Key Characteristics:** +- Kelly green `#73c23a` as brand accent; deep muse greens `#1e3d35` / `#25584f` for the header. +- One family, DB Heavent, at large sizes: 62px section titles, 24px body. +- White canvas with a `#f5f5f5` utility band for quick links. +- 16px-radius white icon tiles with a soft diffuse shadow; 8px-radius imagery. +- Pill indicators (24×8px green active, 8×8px grey inactive). +- Product carousels overlapping textured photographic panels. + +### Imagery & Art Direction +- **Hero**: bright, illustrated campaign art (mascots, sports icons, Japanese landmarks in the capture) with a dark offer panel showing prices in large italic green/white numerals and a QR code. +- **Campaign banner**: a green "WIN BIG!" rewards banner with cars, phones and gold, 8px corners. +- **Product sections**: phone and SIM-pack cut-outs on white cards that overlap a textured olive or concrete-grey photographic panel. +- **Package cards**: lifestyle photography (people on calls, aircraft, app icons) with white titles. +- **Icons**: green line icons inside white tiles; a floating green chatbot mascot ("ASK AUNJAI") sits at the right edge. + +### Page Rhythm (from the capture) +1. Top bar (muse green) and nav bar (lighter muse green). +2. Hero carousel with arrows and a green indicator. +3. Grey quick-menu band with eight icon tiles. +4. Centred campaign banner. +5. "Smart Phone" — title left, product carousel right over an olive panel. +6. "SIM Card" — same pattern over a grey panel. +7. "On Top Package" and further `h1` sections (Network, Fibre Broadband, Privileges, Entertainment) with image cards. + +### Voice & Microcopy +Benefit-led and plain: "Phones and accessories with great deals, right here", "Postpaid plan with Premium numbers, Lucky numbers, or Prepaid plan", "Phone only from ฿52,900", "Switch to AIS". Thai-language campaign art appears even on the English page. + +## Colors + +> **Source page:** `https://www.ais.th/en/consumers` (extraction + probes in SOURCES.json). The site's own CSS variables (`--cms-*`) are given in brackets. + +### Brand +- **Kelly Green** (`{colors.primary}` — `#73c23a`) [`--cms-color-primary`, `--cms-color-primary500`, `--cms-btn-default`, `--cms-border-primary`]: brand accent, nav hover, active indicators, quick-menu icon colour. +- **Kelly Green Hover** (`{colors.primary-hover}` — `#4f9e28`) [`--cms-btn-default-hover`, `--cms-color-primary700`]. +- **Primary scale**: `{colors.primary-50}` `#eef8e8` · `{colors.primary-100}` `#d6edc5` · `{colors.primary-200}` `#bae19f` · `{colors.primary-300}` `#9ed478` · `{colors.primary-400}` `#88cb59` · `{colors.primary-600}` `#64b232` · `{colors.primary-800}` `#3a8a1f` · `{colors.primary-900}` `#08680a` (all `--cms-color-primaryNNN`). +- **Muse Green** (`{colors.secondary}` — `#1e3d35`) [`--cms-color-secondary`, `--cms-color-museGreen`]: top bar. +- **Light Muse Green** (`{colors.secondary-800}` — `#25584f`) [`--cms-color-secondary800`, `--cms-color-lightMuseGreen`]: main nav bar. +- **Secondary scale**: `{colors.secondary-700}` `#29685d` · `{colors.secondary-600}` `#2d786c` · `{colors.secondary-50}` `#e0efee` (lightsky). +- **On Primary** (`{colors.on-primary}` — `#ffffff`). + +### Surface +- **Canvas** (`{colors.canvas}` — `#ffffff`) [`--cms-bg-color-white`]. +- **Surface** (`{colors.surface}` — `#f5f5f5`) [`--cms-bg-color-lightestGrey`]: quick-menu band, carousel arrows. +- **Serenade** (`{colors.serenade-50}` — `#fdfaf3`) and **Serenade Gold** (`{colors.serenade-gold}` — `#6c3d02`): declared premium palette. + +### Text +- **Ink** (`{colors.ink}` — `#262626`) [`--cms-color-defaultText`, `--cms-color-darkestGrey`]: body element colour and section titles. +- **Ink Muted** (`{colors.ink-muted}` — `#7b7b7b`) [`--cms-color-dark-grey`]: most-read text colour — descriptions and card text. +- **Ink Secondary** (`{colors.ink-secondary}` — `#333333`): quick-menu labels. +- **Bold Grey** (`{colors.ink-bold-grey}` — `#555555`) [`--cms-color-bold-grey`]. +- **Medium Grey** (`{colors.ink-medium-grey}` — `#9d9d9d`) [`--cms-color-mediumGrey`]. +- **Olive** (`{colors.olive}` — `#7d7548`): measured child colour inside a section title; section titles in the capture show an olive textured fill. + +### Lines & Misc +- **Border** (`{colors.border}` — `#d9d9d9`) [`--cms-color-border-bottom`, `--cms-color-grey`]. +- **Light Grey** (`{colors.light-grey}` — `#e9e9e9`) [`--cms-color-lightGrey`]: inactive indicator. +- **Tile Border** (`{colors.tile-border}` — `#1b1c1912`): icon tile hairline. +- **Alert Red** (`{colors.alert-red}` — `#ff4242`): small measured background (cart badge in the capture). + +### Semantic +No semantic success/error tokens are declared in the `--cms-*` set; the Bootstrap defaults present in the CSS (`--bs-success`, `--bs-danger` …) are framework variables, not AIS brand tokens, and are not used here. + +## Typography + +### Font Family +All measured text renders in **DB Heavent** (loaded in normal, 500/600 and 700/bold faces), declared by `--cms-font-family` with a system fallback stack (`-apple-system`, `BlinkMacSystemFont`, `Segoe UI`, `Roboto` …). No official source found states its foundry or licence. + +### Hierarchy (the site's own `--cms-font-*` scale) + +| Token | Size | Weight | Line Height | CMS variable | Use | +|---|---|---|---|---|---| +| `{typography.h1}` | 62px | 400 | 64px | `--cms-font-h1-size` | Section titles ("On Top Package") | +| `{typography.h1-mobile}` | 40px | 400 | 40px | — | h1 at 390px | +| `{typography.h2}` | 56px | 400 | 56px | `--cms-font-h2-size` | Declared | +| `{typography.h3}` | 40px | 400 | 40px | `--cms-font-h3-size` | White titles on image cards | +| `{typography.h4}` | 32px | 400 | 32px | `--cms-font-h4-size` | Declared, 32px measured on page | +| `{typography.h5}` | 28px | 400 | 28px | `--cms-font-h5-size` | Declared, 28px measured on page | +| `{typography.body1}` | 24px | 400 | 28px | `--cms-font-body1-size` | Body, card text, nav links | +| `{typography.body2}` | 20px | 400 | 24px | `--cms-font-body2-size` | Quick-menu labels | +| `{typography.caption-bold}` | 20px | 700 | 20px | `--cms-font-caption-size` | Top-bar tabs, language select | +| `{typography.sub-caption}` | 14px | 400 | 16px | `--cms-font-sub-caption-size` | Declared | +| `{typography.keywords}` | 12px | 400 | 16px | `--cms-font-keywords-size` | Declared | + +Weights in the CMS: `--cms-font-weight-regular: 400`, `--cms-font-weight-medium: 500`, `--cms-font-weight-bold: 700`. No letter-spacing other than `normal` was measured. + +### Principles +- Sizes are large across the board: the body element itself is 24px/28px. +- Titles stay regular (400); bold is used for small caps-like tabs (20px/700). +- Body copy is mid-grey `#7b7b7b`; titles are near-black `#262626`. + +### Note on Font Substitutes +DB Heavent is served by ais.th only. When it is unavailable the site's own stack falls back to system UI fonts; keep the CMS sizes but expect wider set width. + +## Layout + +### Spacing System +Measured paddings: 12px, 4px, 16px, 24px, 8px, 40px, 5px, 2px, 70px, 80px; gaps 16px, 8px, 40px, 24px, 80px. +- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 40px · `{spacing.section}` 70px · `{spacing.huge}` 80px. +- Top bar padding 14px 70px; nav items 24px 0px 20px; content containers 40px padding. + +### Grid & Container +- `--cms-max-content-width-desktop: 1280px`; section titles 1130–1140px wide. +- Quick menu: 8 tiles in an 800px grid (`quick-menu-grid`), centred. +- Product sections: text column left (~25%), carousel of three 232px cards right, overlapping a photographic panel. +- Package cards: three columns (`col-md-4 col-lg-4`, Bootstrap grid classes). + +### Whitespace Philosophy +Large vertical spacing between sections (80px gaps measured) and big type give the page a poster-like rhythm; each section is one idea with one carousel. + +## Elevation & Depth + +| Level | Treatment | Use | +|---|---|---| +| 0 | Flat | Bands, headers | +| 1 | `rgba(27, 28, 25, 0.15) 0px 4px 21.33px 0px` | Quick-menu tiles (most frequent shadow) | +| 2 | `rgba(0, 0, 0, 0.1) 0px 10px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px` | Floating element (measured once) | + +Depth also comes from cards overlapping textured photo panels in the product sections. + +## Shapes + +### Border Radius Scale + +| Token | Value | Use | +|---|---|---| +| `{rounded.sm}` | 8px | Images and banners (most frequent) | +| `{rounded.md}` | 10px | Inactive indicator dot | +| `{rounded.lg}` | 16px | Quick-menu tiles | +| `{rounded.xl}` | 30px | Measured on page | +| `{rounded.indicator}` | 48px | Active indicator pill | +| `{rounded.pill}` | 9999px | Circular carousel arrows (50%) | + +Product cards in the capture are white with rounded corners; their exact radius was not isolated in measurement. + +## Components + +### Navigation +**`topbar`** — `{colors.secondary}` bar, 52px tall, padding 14px 70px; tabs in white `{typography.caption-bold}`; the active tab (CONSUMERS) is bold white. +**`nav`** — `{colors.secondary-800}` bar, 72px tall: logo, white `{typography.body1}` links, search and cart icons. +**`nav-link-hover`** — text and border colour become `{colors.primary}` `#73c23a` (measured hover on every nav item). + +### Quick Menu +**`quick-menu-band`** — full-width `{colors.surface}` band, 204px. +**`quick-menu-tile`** — 66×66px white tile, 16px radius, 1px `#1b1c1912` hairline, Level 1 shadow, green line icon. +**`quick-menu-label`** — `{typography.body2}` in `#333333` under each tile. + +### Carousels +**`carousel-dot-active`** — 24×8px `{colors.primary}` pill (48px radius). **`carousel-dot`** — 8×8px `{colors.light-grey}`. +**`carousel-control`** — 40×40px `{colors.surface}` circle with a thin grey chevron. + +### Cards +**`card-text`** — product card copy ("iPhone 18 Pro Max", "Phone only from ฿52,900") in `{typography.body1}` `{colors.ink-muted}`; in the capture the product name is darker and bolder than the price line. +Image cards under "On Top Package" carry white `{typography.h3}` titles (Internet, Call, Entertainment). + +### Buttons +The homepage shows no filled button (the extractor found no CTA candidates). The CMS declares `--cms-btn-default: #73c23a` and `--cms-btn-default-hover: #4f9e28`; shape and padding were not measured, so no button component is declared. + +### States (measured) +| Element | Default | Hover | +|---|---|---| +| Top-bar tab (CONSUMERS, BUSINESS, ABOUT US) | white text, white border colour | `#73c23a` text and border | +| Nav link (Online Store … Help & Support) | white | `#73c23a` | +| Carousel indicator | `#e9e9e9` 8×8px | — (active: `#73c23a` 24×8px) | +| CMS button token | `--cms-btn-default` `#73c23a` | `--cms-btn-default-hover` `#4f9e28` | + +### Section Header Pattern +- Product sections: a large dark title (with a textured olive fill in the capture) plus a 24px grey description, left column. +- Package sections: centred `{typography.h1}` title above a three-column card row. + +## Design System Architecture + +AIS publishes **no public design system** or brand-guideline values; searches are recorded in SOURCES.json, and the official [About Us](https://www.ais.th/en/about-us) page covers brand positioning only. The site itself exposes a well-structured de-facto token layer, described here as measured: + +- **Token architecture**: CSS custom properties prefixed `--cms-` (the site's CMS component library, clientlibs served from `/etc.clientlibs/ais/`). Primitive colour ramps use numeric steps 50–900: `--cms-color-primary50 … --cms-color-primary900` (kelly green, `--cms-color-primary500: #73c23a`) and `--cms-color-secondary50 … --cms-color-secondary900` (muse green, `--cms-color-secondary900: #1e3d35`). Named aliases sit beside them (`--cms-color-kellyGreen`, `--cms-color-museGreen`, `--cms-color-lightMuseGreen`, `--cms-color-serenadeGold`). Semantic/component tokens: `--cms-color-defaultText: #262626`, `--cms-btn-default`, `--cms-btn-default-hover`, `--cms-border-primary`, `--cms-color-back-button`, `--cms-bg-color-back-button`. Some names exist in both kebab and camel case (`--cms-color-dark-grey` / `--cms-color-darkGray`). +- **Typography tokens**: `--cms-font-h1-size: 62px` … `--cms-font-h6-size: 24px`, `--cms-font-body1-size: 24px`, `--cms-font-body2-size: 20px`, `--cms-font-caption-size: 20px`, `--cms-font-sub-caption-size: 14px`, `--cms-font-keywords-size: 12px`, each paired with a `-line-height` token; weights regular/medium/bold. +- **Theming**: background modifier classes such as `cms-bg-color-lightestGrey` and `cms-default-comp-color-white` set section and component colour; gradients are tokenised (`--cms-bg-gradient-lightsky`, `--cms-color-privilege-gradient: linear-gradient(90deg,#8e30e1 20.85%,#e6007e 78.13%)`). No dark mode observed. +- **Layout**: `--cms-max-content-width-desktop: 1280px`; Bootstrap grid and utility classes (`col-9 col-md-4 col-lg-4`) with Bootstrap's own `--bs-*` variables present underneath. +- **Component model (observable)**: container (`cms-ais-container-v2`, `cms-fixedwidth-container`), navigation (`cmp-navigation`, `cmp-tabs__tablist`), quick menu (`quick-menu`, `quick-menu-grid grid4`, `quick-menu-item`, `quick-menu-icon`), card (`cms-card-component`, `cms-card-component-text`, `card-link-content`), rich text (`textrte`), carousel with Bootstrap controls. +- **Icons**: Font Awesome 6 Free/Brands faces are loaded alongside SVG icons. +- **Accessibility**: no published AIS accessibility standard found; carousel controls carry text labels ("Previous", "Next"). +- **Delivery**: no npm package, Figma kit or public docs. + +## Do's and Don'ts + +### Do +- Use `#73c23a` for brand accents, active states and hover; `#4f9e28` for its hover. +- Frame pages with the `#1e3d35` top bar and `#25584f` nav. +- Set type in DB Heavent at the CMS scale (62 / 40 / 24 / 20px). +- Use 16px-radius white icon tiles with the soft Level 1 shadow for shortcuts. +- Use green pill indicators for carousels. + +### Don't +- Don't shrink body text below 20–24px in DB Heavent. +- Don't use the Bootstrap blue `#0d6efd` (framework default) as an AIS colour. +- Don't bold large titles — they are 400. +- Don't use black page backgrounds; the canvas is white with green framing. +- Don't invent button geometry — measure an AIS button first. +- Don't put green text on the muse-green bars except as the hover state. +- Don't use hard, dark shadows; the measured shadow is a soft 21.33px blur at 15% opacity. +- Don't mix in a second typeface for headings. + +## Responsive Behavior + +### Breakpoints + +| Name | Width | Key Changes | +|---|---|---| +| Desktop | 1280px measured | Two-tier header, 62px h1, 3-up carousels | +| Mobile | 390px measured | h1 62px → 40px (line-height 40px); body stays 24px (line-height 22px measured) | + +### Touch Targets +- Quick-menu tiles 66×66px; carousel arrows 40×40px; indicators 8px tall (small). + +### Collapsing Strategy +- Title sizes step down from the h1 token to 40px on mobile. +- Carousels remain swipeable. + +### Mobile Notes +- The mobile `h1` ("On Top Package") is 40px/400/40px, 374px wide. +- Body paragraphs keep 24px but tighten line-height to 22px. +- No mobile navigation element was captured by the extractor, so the mobile header is not specified. + +### Image Behavior +Campaign banners are full-width images; images carry 8px corners inside sections. + +## Iteration Guide + +1. Start with `{colors.canvas}`, `{colors.ink}` and `{typography.body1}`. +2. Add `topbar` + `nav` in muse greens. +3. Section titles: `{typography.h1}` centred or left, `#262626`. +4. Shortcuts: `quick-menu-tile` on `quick-menu-band`. +5. Carousels: `carousel-dot-active` / `carousel-dot` / `carousel-control`. +6. Name new colours on the `--cms-color-primaryNNN` / `secondaryNNN` ramps. +7. Before adding buttons, inputs or footers, measure them on ais.th. +8. Keep every value on the `--cms-*` scale; if a size is missing, use the nearest declared CMS token rather than a new one. + +### Quick Reference +- Canvas `#ffffff` · Ink `#262626` · Muted `#7b7b7b` · Accent `#73c23a` · Header `#1e3d35` / `#25584f`. +- Type: DB Heavent 62/64 · 40/40 · 24/28 · 20/24. +- Radii: 8px images · 16px tiles · pill indicators. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/akaru-2/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/akaru-2/DESIGN.md new file mode 100644 index 0000000..01b4a4f --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/akaru-2/DESIGN.md @@ -0,0 +1,142 @@ +--- +version: alpha +name: Akaru +category: "Retail & E-commerce" +description: "Akaru (akaru.fr), creative web agency in Lyon: beige #f1efeb canvas with #0e0e0e ink, Alliance Neue 85.33px section titles and Alliance Platt 8.89px labels, rotating blue, pink, green and terracotta panels, pill and circle controls." +colors: + canvas: "#f1efeb" + ink: "#0e0e0e" + primary: "#0e0e0e" + surface-2: "#bfccd8" + ink-2: "#ffffff" +typography: + display: + fontFamily: "\"Alliance Neue\", sans-serif" + fontSize: 17.7777px + fontWeight: 700 + textTransform: uppercase + display-mobile: + fontFamily: "\"Alliance Neue\", sans-serif" + fontSize: 33.28px + fontWeight: 700 + heading: + fontFamily: "\"Alliance Neue\", sans-serif" + fontSize: 85.3328px + fontWeight: 400 + subheading: + fontFamily: "\"Alliance Neue\", sans-serif" + fontSize: 28.4443px + fontWeight: 500 + body: + fontFamily: "\"Alliance Neue\", sans-serif" + fontSize: 15.9999px + fontWeight: 400 + nav: + fontFamily: "\"Alliance Neue\", sans-serif" + fontSize: 14.2221px + fontWeight: 400 + link: + fontFamily: "\"Alliance Neue\", sans-serif" + fontSize: 14.2221px + fontWeight: 500 + body-dominant: + fontFamily: Alliance Platt + fontSize: 8.88883px + fontWeight: 600 +rounded: + xs: 26.67px + sm: 88.89px + pill: 9999px +spacing: + s1: 1.78px + s2: 3.56px + s3: 4.44px + s4: 5.33px + s5: 6.22px + s6: 8.89px + s7: 12.44px + s8: 16.89px + s9: 17.78px + s10: 24.89px +components: + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + nav: + backgroundColor: "{colors.ink}" + textColor: "{colors.ink-2}" + padding: 26.6665px 22.2221px 0px 26.6665px + nav-link: + textColor: "{colors.ink-2}" + typography: "{typography.nav}" + footer: + textColor: "{colors.ink}" +--- + +# Akaru + +## Overview +Akaru (akaru.fr, titled "Agence web lyon : création de site internet et design graphique", page language fr-fr) is a creative web agency in Lyon offering website creation and graphic design. Per the home page it presents "savoir-faire de précision" with "amour du détail qui tue", lists services (Stratégie & Conseil, Direction Artistique, Site e-commerce, Site Vitrine, Expérience Digitale), shows projects (Archidomo, Orlinski, Pikko, UBAC, Sanctuary, Entreautre, Moon Studio, Maison Yokō, Avoriaz) and reports 35 Awwwards and 19 FWA distinctions. The copy voice is playful and confident, with short lines and self-aware humour ("on dit non au déjà fait", "On vous met au défi de nous mettre au défi"). The page measured 22,422px tall at 1280px, so the home page is a very long scroll. + +The capture shows a warm beige canvas (`{colors.canvas}` #f1efeb) with a stacked project reel: a dark green panel with the logo (a condensed blocky wordmark), the project title "Orlinski Editions" in white at the left edge with a circle-arrow button at right, then full-bleed project photographs stacked directly on top of each other without gaps (sneakers on rock; a person facing a wall of screens). A black pill "MENU" button with an orange dot is fixed at the top right. In the capture the stacked reel occupies only the left portion of the width and the rest is the beige canvas; the extracted nav links are Projets, Expertises, Agence and Contact. The h1 role detected by the extractor is an "AWWWARDS" badge label (17.7777px, uppercase, white), not the page title; the mobile pass recorded the real h1 "Akaru, agence web creative à lyon" at 33.28px / 700. + +## Colors +Painted area: beige #f1efeb (8,280), blue-gray #bfccd8 (6,826), black #0e0e0e (6,600), pink #b692a1 (1,706), sage green #798e7b (1,160), terracotta #e49366 (1,024). Text: #0e0e0e (1,222 characters) and white (484). +- `{colors.canvas}` #f1efeb, `{colors.ink}` #0e0e0e, `{colors.primary}` #0e0e0e, `{colors.surface-2}` #bfccd8, `{colors.ink-2}` #ffffff. +- The shipped CSS names the full palette: `--beige` #f1efeb, `--blue` #bfccd8, `--black` #0e0e0e, `--dark-grey` #1a1a1a, `--mid-grey` #262626, `--grey` #666d73, `--light-grey` #f7f7f7, `--green` #798e7b, `--pink` #b692a1, `--terra` #e49366, `--purple` and `--highlight` #7345ff, `--white` #fff, `--primary` #fff and `--secondary` #0e0e0e. The purple #7345ff is published as highlight but was not measured in painted area. Colored panels (blue, pink, green, terracotta) change per project. + +## Typography +Two families: **Alliance Neue** (400, 500 and 700 measured) for headings and text, and **Alliance Platt** (600) for the tiny dominant labels (8.88883px, weight 600, 682 characters). +- `heading` 85.3328px / 400: section titles such as "Projets" (86 characters). +- `subheading` 28.4443px / 500. +- `body` 15.9999px / 400. +- `nav` 14.2221px / 400 and `link` 14.2221px / 500; the body element is 14.2221px / 500. +- `display` 17.7777px / 700 uppercase: the badge label detected as h1. +- `display-mobile` 33.28px / 700: the real h1 on the 390px pass. +- `body-dominant` Alliance Platt 8.88883px / 600. +Measured sizes by characters: 8.88883px (682), 10.6666px (374), 15.9999px (321), 28.4443px (99), 85.3328px (86), 47.9997px (75), 14.2221px (30), 17.7777px (22), 42.6664px (9), 56.8885px (8). Weights: 600 (808), 400 (623), 500 (199), 700 (76). The system leans on one huge size (85.3px) and many tiny labels. + +## Layout +Measured sizes are fractional pixel values (85.3328px, 47.9997px, 15.9999px); the arithmetic 85.3328 = 6.667 × 12.8 is noted but the sizing method in the CSS was not read. The scroll runs 22,422px. Spacing tokens: 1.78, 3.56, 4.44, 5.33, 6.22, 8.89, 12.44, 16.89, 17.78 and 24.89px; gaps include 115.555px (10 uses) between large blocks. The nav padding is 26.6665px 22.2221px 0px 26.6665px. Project panels are stacked full-bleed with their title overlaid at the top left. + +### Voice and microcopy +Copy is French, short and playful. Navigation labels are one word (Projets, Expertises, Agence, Contact, plus a pricing heading, Nos prix). Project entries are a client name with a type, for example "Orlinski Editions". The agency signs its claims with counts rather than adjectives (35 Awwwards, 19 FWA, Site of the Month and Site of the Day for Akaru V4) and closes with a challenge to the visitor. Since the page is 22,422px tall and the extractor found only two text colors (black and white), the page relies on imagery and colored panels, not typographic color, to separate sections. + +### Measured paddings and gaps +Spacing is recorded in small fractional steps (1.78, 3.56, 4.44, 5.33, 6.22, 8.89, 12.44, 16.89, 17.78 and 24.89px), and the recurring gap values are 4.44442px (8 uses), 8.88883px (8), 12.4444px (4), 17.7777px (4), 6.22218px (4) and 1.77777px (2), with one oversized gap of 115.555px used ten times between big blocks. In practice this means tight clusters of tiny labels inside sections, separated by very large empty intervals. + +## Elevation & Depth +No drop shadows. The only shadow measured is an inset 0.888883px ring in black, `rgb(14, 14, 14) 0px 0px 0px 0.888883px inset` (7 elements), which draws hairline outlines on pills and chips. Depth in the capture comes from stacking full-bleed images and colored panels. + +## Shapes +Radii: 26.6665px (10 elements, `{rounded.xs}`), 88.8883px (8, `{rounded.sm}`) and 100% (4, circles such as the arrow button). The MENU button is a fully rounded black pill. + +## Components +- **nav** (MENU button): black #0e0e0e fill, white text, padding 26.6665px 22.2221px 0px 26.6665px, pill shape with an orange dot. +- **nav-link**: white 14.2221px links on the dark menu surface. +- **link**: black 14.2221px / 500. +- **circle arrow button**: 100% radius, outlined by the inset 0.888883px ring, with a northeast arrow. +- **footer**: black text on the canvas. +No hover states were recorded (empty hover list) and no standard button was detected. + +## Design System Architecture +Akaru does not link a public brand guideline or design system from its home page. The system is the named-color CSS variable list above (`--beige`, `--blue`, `--black`, `--green`, `--pink`, `--terra`, `--purple`) plus the two Alliance families, with `--sbw: 0px` as the only layout variable. Sources opened: https://www.akaru.fr/ (page text; shipped CSS via extractor). + +## Do's and Don'ts +- Do build on #f1efeb with #0e0e0e text and rotate project panels through blue, pink, green and terracotta. +- Do pair one huge Alliance Neue size (85.3328px) with tiny Alliance Platt labels (8.88883px, 600). +- Do use pill and circle controls with the thin inset ring. +- Do stack full-bleed images edge to edge. +- Don't add drop shadows. +- Don't use the purple #7345ff as a surface; it is a published highlight only. + +## Responsive Behavior +Measured at 390px: the h1 "Akaru, agence web creative à lyon" is Alliance Neue 33.28px / 700, white. No mobile call to action was detected, and layout, breakpoints and menu behavior on mobile were not measured. + +## Iteration Guide +The tiny label size deserves emphasis: 8.88883px and 10.6666px together account for 1,056 measured characters, more than the 650 characters of all other measured sizes combined, so small annotation text is the dominant texture of the page, with the 85.3328px titles as the only loud element. +Keep to the measured facts when extending the system: two text colors only (#0e0e0e and #ffffff), six painted colors (beige, blue-gray, black, pink, sage and terracotta), two type families, three radii (26.6665px, 88.8883px, 100%) and one inset ring shadow. Anything beyond that, including hover behavior, needs a new measurement first. +1. Beige canvas, black ink, one colored panel per project from the named palette. +2. Alliance Neue 85.3328px for section titles, 15.9999px body, Alliance Platt 8.88883px labels. +3. Black pill MENU button; outlined circle arrows. +4. Re-measure with `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=akaru-2 --force --no-motion` and run `node web/scripts/verify-designs.mjs --slug=akaru-2`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/akqa/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/akqa/DESIGN.md new file mode 100644 index 0000000..a3a59db --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/akqa/DESIGN.md @@ -0,0 +1,181 @@ +--- +version: alpha +name: AKQA +category: "Agencies & Studios" +description: "AKQA (akqa.com), frontier design and AI agency: black on white with seasonMix 97.36px uppercase display, seasonSerif 44px statements, gradient-clipped link text, translucent pill controls, one 0.05 shadow, Tailwind token system." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#000000" + on-primary: "#000000" + surface-3: "#191919" + ink-2: "#555555" + ink-3: "#e9e9e9" + ink-5: "#adadad" + ink-6: "#d9d9d9" + hairline: "#00000029" + button-secondary-bg: "#ffffff0a" +typography: + display: + fontFamily: seasonSans, "seasonSans Fallback", sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + display-mobile: + fontFamily: seasonSerif, "seasonSerif Fallback", serif + fontSize: 16px + fontWeight: 400 + lineHeight: 18px + heading: + fontFamily: seasonMix, "seasonMix Fallback", serif + fontSize: 97.3563px + fontWeight: 400 + lineHeight: 84.9655px + letterSpacing: "-3px" + textTransform: uppercase + subheading: + fontFamily: seasonSerif, "seasonSerif Fallback", serif + fontSize: 28px + fontWeight: 400 + lineHeight: 34px + body: + fontFamily: seasonSerif, "seasonSerif Fallback", serif + fontSize: 44px + fontWeight: 400 + lineHeight: 48px + button: + fontFamily: seasonSerif, "seasonSerif Fallback", serif + fontSize: 44px + fontWeight: 420 + lineHeight: 48px + nav: + fontFamily: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 13px + fontWeight: 400 + lineHeight: 19.5px + letterSpacing: "-0.325px" + input: + fontFamily: seasonSans, "seasonSans Fallback", sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px +rounded: + xs: 1px + sm: 8px + md: 100px + none: 0px + pill: 9999px +spacing: + s1: 4px + s2: 6px + s3: 8px + s4: 12px + s5: 14px + s6: 16px + s7: 24px + s8: 32px + s9: 40px + s10: 48px +components: + button-primary: + backgroundColor: "{colors.ink}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 4px 0px + height: 62px + button-secondary: + backgroundColor: "{colors.button-secondary-bg}" + textColor: "{colors.ink-5}" + typography: "{typography.nav}" + rounded: "{rounded.pill}" + padding: 6px 14px + height: 34px + link: + textColor: "{colors.ink}" + typography: "{typography.subheading}" + rounded: "{rounded.none}" + nav: + textColor: "{colors.ink-5}" + rounded: "{rounded.none}" + padding: 16px + nav-link: + backgroundColor: "{colors.button-secondary-bg}" + textColor: "{colors.ink-5}" + typography: "{typography.nav}" + rounded: "{rounded.pill}" + padding: 6px 14px + text-input: + textColor: "{colors.ink-3}" + typography: "{typography.input}" + rounded: "{rounded.none}" + height: 24px + footer: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + rounded: "{rounded.none}" +--- + +# AKQA + +## Overview +AKQA (akqa.com, titled "AKQA | Frontier Agency for Design, Innovation and AI") calls itself "THE FRONTIER AGENCY", working "at the edge of imagination and technology". The measured page is 7,379px tall at 1280px and is almost entirely black on white. The hero is two lines of enormous uppercase light type, "IMAGINE WHAT'S NEXT" and "MAKE WHAT MATTERS", which wrap a full-width cinematic video frame (a car on a presentation stage in front of an audience) with a dark, rounded floating pill reading "Show me all Nike projects" and a menu glyph. Below, case studies appear as short sentences in a serif face with a muted gray client name and a down-right arrow ("A world first. A new category of writing instrument. Introducing Digital Paper for Montblanc ↘", "A renewed app to challenge corporate giants. UPS ↘"), each placed beside or above a single image, staggered left and right on a loose two-column grid. The first element in the page text is an "Ask AKQA" input with a "No suggestions available" state. + +Imagery is editorial photography and video stills with one illustrated piece (a green planet with a snake inside a circular text ring on pale cream). The copy is bold, aspirational and punchy, with frontier metaphors and short fragments ("We unite the 'What if' with the 'How to'."). Other headings on the page: "THE FRONTIER AGENCY", "Latest & Greatest", "At the frontier of gaming", "What's your next frontier?". Navigation entries listed are Work, News, Perspectives, AKQA Companies and Sustainability. Clients named: Montblanc, UPS, Nestlé (Goodnes), Lexus, Google, Bethesda Softworks, Netflix, Proximus and Nike. + +## Colors +The visible palette is monochrome. Painted area: white #ffffff (7,564), black #000000 (1,108), #00000047 (1,092, a translucent black layer), #191919 (789), #e9e9e9 (492), #555555 (29), #000000eb (18), #ffffff0a (12), #00000029 (3). Text: #000000 (1,029 characters), #555555 (206, muted client names), #e9e9e9 (85), #ffffff (35), #adadad (30), #d9d9d9 (25). +- `{colors.canvas}` #ffffff, `{colors.ink}` #000000, `{colors.primary}` #000000; `{colors.surface-3}` #191919 for dark blocks, `{colors.ink-2}` #555555, `{colors.ink-3}` #e9e9e9, `{colors.ink-5}` #adadad, `{colors.ink-6}` #d9d9d9, `{colors.hairline}` #00000029, `{colors.button-secondary-bg}` #ffffff0a (the translucent pill fill). +- The measured primary call to action is a text link ("Learn more ↘", 44px) whose text is clipped to a horizontal gradient (`background-clip: text`) running transparent, copper rgb(201, 144, 103), cream rgb(216, 219, 181), teal rgb(118, 183, 179), navy rgba(33, 59, 107, 0.85), transparent; that is why `{colors.on-primary}` equals black in the tokens. +- The shipped CSS publishes a 400-variable token set with many more colors that are not used by the visible chrome: primary brand 1 is the gray ramp (`primary-brand-1-100` #fff through `-900` #000, `-800` #191919, `-600` #797979), primary brand 2 is a green ramp (`-500` #17dc62, `-700` #08a041, `-900` #174221), secondary brand 1 is pink-magenta (`-500` #ca249c), secondary brand 2 is blue (`-500` #1370f1, `-900` #132c59), plus supporting ramps for blue, purple, turquoise, red, orange, yellow, green and pink, and functional fills for error, warning and success. Brand elevation tints are `#132c5917`, `#132c590d` and `#132c591a`. + +## Typography +A three-face custom family: **seasonMix** (display, headings), **seasonSerif** (body and statements) and **seasonSans** (small UI), each with a metric-matched fallback, plus the system sans stack for navigation. Published font roles: `--font-h1` seasonMix; `--font-h2-alt` and `--font-h3-alt` seasonSans; `--font-paragraph-lg` seasonSerif. +- `heading` seasonMix 97.3563px / 400 / 84.9655px, letter-spacing -3px, uppercase: the hero lines (a 110px size is also measured on 25 characters). +- `body` seasonSerif 44px / 400 / 48px, and `button` the same at weight 420: the case-study sentences and links. +- `subheading` seasonSerif 28px / 400 / 34px. +- `display` seasonSans 14px / 400 / 21px: the "Show me all Nike projects" pill text, in #d9d9d9. +- `display-mobile` seasonSerif 16px / 400 / 18px, as measured on the 390px pass. +- `input` seasonSans 16px / 400 / 24px. +- `nav` system sans 13px / 400 / 19.5px, letter-spacing -0.325px. +Sizes by characters: 20px (388), 44px (362), 28px (299), 14px (132), 16px (116), 97.3563px (58), 13px (30), 110px (25). Weight is 400 for nearly all text (1,399 characters), 420 for 11. + +## Layout +The shipped tokens define a flexible spacing scale (`--spacing-flex-sm` 8px, `-base` 16px, `-md` 32px, `-4xl` 128px). Measured gaps: 8px (20), 32px (8), 4px (8), 16px (6), 48px (3), 80px (2), 40px (2). Pages are single-column with edge-to-edge hero lines and a staggered two-column editorial grid; images vary in width and are offset left and right, leaving large white areas between items. + +## Elevation & Depth +One shadow: `rgba(0, 0, 0, 0.05) 0px 8px 40px 0px`, a very diffuse lift. A translucent black layer (#00000047) and a darker #000000eb layer are measured as backgrounds. Brand elevation colors are published as navy-tinted transparencies (#132c5903 to #132c591a) for use as shadow tints. + +## Shapes +Radii are 3.35544e+07px (8 elements, a fully rounded pill, `{rounded.pill}`), 8px (5, `{rounded.sm}`), 1px (2, `{rounded.xs}`) and 100px (1, `{rounded.md}`). The published radius tokens include `--radius-sm` 8px, `--radius-md` 32px, `--radius-lg` 48px, `--radius-flex-xl` 64px, `--radius-flex-4xl` 128px, `--components-button-radius-tr` 128px, input and accordion 32px, tabs 8px. + +## Components +- **button-primary**: the gradient-clipped text link, 44px seasonSerif weight 420, no radius, padding 4px 0px, height 62px. +- **button-secondary / nav-link**: translucent white fill #ffffff0a with #adadad text, 13px system sans, pill radius, padding 6px 14px, height 34px. +- **floating pill** ("Show me all Nike projects"): dark translucent fill, 14px seasonSans #d9d9d9 text, rounded ends, with a menu icon. +- **text-input** ("Ask AKQA"): seasonSans 16px, #e9e9e9 text, height 24px, no radius. +- **link**: black seasonSerif 28px with the arrow glyph. +- **footer**: black fill, white text. +No hover states were recorded. + +## Design System Architecture +No public design system or brand guideline is linked from the home page. The shipped CSS is a Tailwind-based token system: variables like `--tw-inset-shadow-alpha`, `--blur-lg: 128px`, and semantic groups `--color-fill-*` (primary, secondary, functional, grey-neutral, components such as `--color-fill-components-navigation-default: #ffffffa3` and `--color-fill-components-tag-opacity: #00000014`), `--color-*-brand-*` ramps, `--components-*` radius tokens, `--layout-radius-level-0-*` 64px, `--spacing-flex-*`, and typography tokens (`--font-h1`, `--font-weight-h5` 400, `--leading-code` 24px). Sources opened: https://www.akqa.com/ (page text and shipped CSS). + +## Do's and Don'ts +- Do keep the interface black and white and let photography and video carry color. +- Do set display lines in seasonMix uppercase with -3px tracking. +- Do write case studies as one serif sentence plus a gray client name and a ↘ arrow. +- Do use fully rounded translucent pills for floating controls. +- Don't introduce brand-ramp colors (pink, green, blue) into chrome; they are published but not measured on visible elements. +- Don't add heavy shadows; the one measured shadow is 0.05 alpha. + +## Responsive Behavior +Measured at 390px: the first statement is seasonSerif 16px / 400 / 18px (against 44px on desktop), and the "Learn more ↘" link keeps the gradient-clipped text treatment. Layout, breakpoints and navigation on mobile were not measured. + +## Iteration Guide +When extending the page, remember what the measurement shows: type hierarchy is made almost entirely by size and case, since weight is 400 on nearly every character; color hierarchy is made by black against #555555 for secondary text; and spatial hierarchy is made by large white gaps (up to 80px measured between items) rather than rules or borders. Keep each case study to one sentence, one client name in gray and one image. +1. White canvas, black ink, #555555 for client names. +2. Hero lines seasonMix 97.3563px uppercase, -3px tracking; statements seasonSerif 44px. +3. One diffuse shadow only; pills for floating controls. +4. Pull any further color from the published `--color-*` ramps after measuring the live page. +5. Re-measure with `node web/scripts/extract-tokens.mjs --batch=web/data/batches/phase2.json --only=akqa --force --no-motion` and run `node web/scripts/verify-designs.mjs --slug=akqa`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aksorn-edu/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aksorn-edu/DESIGN.md new file mode 100644 index 0000000..08a716c --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aksorn-edu/DESIGN.md @@ -0,0 +1,151 @@ +--- +version: alpha +name: Aksorn Education +category: "Thai Brands" +description: "Aksorn Education (บริษัท อักษร เอ็ดดูเคชั่น จำกัด มหาชน), Thai learning-materials publisher: Aksorn typeface, deep red #af1015 navigation band, white and #ebebeb surfaces, 8px cards with soft 1px shadow, a gradient login pill at 50px radius and colourful illustrated product banners." +colors: + canvas: "#ffffff" + surface-near-white: "#fefefe" + ink: "#6d6f71" + button-login-bg: "#efefef" + on-primary: "#ffffff" + primary: "#af1015" + surface-gray: "#ebebeb" + ink-dark: "#414042" + ink-gray: "#6c6d6f" + accent-red-pure: "#ff0000" + ink-black: "#000000" + nav-link-text: "#555555" + card-white-50: "#ffffff80" +typography: + display: + fontFamily: Aksorn, Helvetica, Arial, sans-serif + fontSize: 28px + fontWeight: 700 + lineHeight: 39.2px + display-mobile: + fontFamily: Aksorn, Helvetica, Arial, sans-serif + fontSize: 22px + fontWeight: 700 + lineHeight: 33px + subheading: + fontFamily: Aksorn, Helvetica, Arial, sans-serif + fontSize: 25px + fontWeight: 700 + lineHeight: 35px + body: + fontFamily: Aksorn, Helvetica, Arial, sans-serif + fontSize: 14px + fontWeight: 600 + lineHeight: 25.2px + button: + fontFamily: Aksorn, Helvetica, Arial, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 24px + nav: + fontFamily: Aksorn, Helvetica, Arial, sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 30px +rounded: + xs: 1px + sm: 4px + md: 8px + lg: 26px + xl: 30px + 2xl: 50px + none: 0px +spacing: + s1: 1px + s2: 2px + s3: 4px + s4: 5px + s5: 6px + s6: 8px + s7: 10px + s8: 12px + s9: 15px + s10: 16.8px +components: + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-gray}" + rounded: "{rounded.none}" + boxShadow: rgba(0, 0, 0, 0.15) 0px 1px 6px 1px + nav-link: + textColor: "{colors.nav-link-text}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + padding: 10px 15px + card: + backgroundColor: "{colors.card-white-50}" + textColor: "{colors.ink-dark}" + rounded: "{rounded.md}" + boxShadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px + footer: + textColor: "{colors.canvas}" + rounded: "{rounded.none}" +--- + +## Overview + +aksorn.com is the Thai-language site of Aksorn Education Public Company Limited (บริษัท อักษร เอ็ดดูเคชั่น จำกัด (มหาชน)). The page title describes it as a source of worksheets, lesson plans and textbooks for every grade. The navigation covers About us (including "Aksorn Learning Design" and "สื่อฯ สำหรับโลกยุคใหม่", careers, contact, privacy policy), Product lists by curriculum (early childhood, basic education, English Program, vocational), Aksorn On-Learn, a Teacher Academy, seminars and training registration, downloads of teaching media and order forms, and education articles. A language switch (Thai/English), YouTube, Facebook and LINE icons and a "บัญชีอักษร" (Aksorn account) login sit in the top row. + +The capture shows a content-rich, school-facing page. A white utility row holds the red-orange A-star AKSORN logo, a "Best Managed Companies" badge, the account dropdown and social icons; beneath it a deep red navigation band lists five centred links in white (early childhood, primary, secondary, Aksorn On-Learn, and "สินค้าที่สนใจ" favourites) with a hamburger icon at the right. The hero is a full-width carousel of campaign art (at capture time a Thai reading-and-writing teaching kit with a rooster mascot, and an "200 hours of plans" ribbon). Four equal columns with thin dividers show line icons in red-orange for "เกี่ยวกับเรา", "Aksorn On-Learn", "รายการสินค้า" and "บทความการศึกษา". A breadcrumb "หน้า HOME" and a centred gray heading "บอร์ดการศึกษา" (education board) introduce a masonry grid of white cards, each with a tall illustrated promo image carrying an orange "ADS" tag, a bold black title and a gray description; the artwork uses chunky red, pink and yellow Thai display lettering. Four round red shortcut buttons float at the right edge. + +Voice is practical and teacher-oriented: titles name resources ("ดาวน์โหลดโครงสร้างรายวิชาพื้นฐาน", "ใบสั่งซื้อ 2568", "งบเรียนฟรี 200 บาท"). + +## Colors + +The canvas is white (#ffffff), with `surface-near-white` #fefefe and `surface-gray` #ebebeb for panels. Body text is a mid gray `ink` #6d6f71, with `ink-dark` #414042 on card titles, `ink-gray` #6c6d6f in the navigation block, `ink-black` #000000 and pure `accent-red-pure` #ff0000 measured as text colors; nav links on white measure #555555. + +The brand color is a deep crimson `primary` #af1015: the navigation band, and the red of the logo and round shortcut buttons in the capture, with white `on-primary` text. The login button is the only gradient: a measured candidate has a background gradient from orange (rgb 241,116,47) to red (rgb 185,30,35) with a #efefef fallback fill (`button-login-bg`). Translucent white (`card-white-50` #ffffff80) is the measured card background. Banner imagery supplies bright pinks, yellows and greens that are not tokens. The root stylesheet also contains Bootstrap defaults (--primary #007bff, --danger #dc3545), which are framework defaults, not Aksorn colors. + +## Typography + +All roles use the company face `Aksorn` with `Helvetica, Arial, sans-serif` fallbacks. The page loads Aksorn in light (300), regular and bold, and FontAwesome for icons. Measured styles: display 28px at 700 with 39.2px line height; display-mobile 22px at 700 with 33px line height; subheading 25px at 700 with 35px line height; body 14px at weight 600 with 25.2px line height; button 14px at 400 with 24px line height; navigation 18px at 400 with 30px line height. Body text is semibold, which keeps small Thai text readable over varied card backgrounds. Aksorn is a proprietary company font; Sarabun or Prompt (Google Fonts) are open substitutes, not measured here. + +## Layout + +The page uses a Bootstrap 4 grid (root variables declare breakpoints sm 576px, md 768px and lg 992px). Order from top: utility row, red nav band, full-width carousel, four-column icon row separated by hairline dividers, then a four-column masonry-like card grid in which cards have different heights. The measured spacing steps are 1, 2, 4, 5, 6, 8, 10, 12, 15 and 16.8px; nav links use 10px 15px padding. Space between sections is generous, with a centred heading and breadcrumb above the card board. + +## Elevation & Depth + +Depth is subtle but present. The navigation bar carries a soft shadow `rgba(0, 0, 0, 0.15) 0px 1px 6px 1px`, and cards carry `rgba(0, 0, 0, 0.2) 0px 1px 3px 0px`, a thin lift. The login button measured an almost invisible `rgba(0, 0, 0, 0) 0px 0px 1px 0px` shadow. Floating round shortcut buttons overlap the page edge, and the sticky navigation overlays the hero as the page scrolls. + +## Shapes + +Measured radii: 1px, 4px, 8px (cards), 26px, 30px, 50px (the login pill) and 0px. Cards use 8px; the nav band, nav links and footer are square. The login control is a pill; shortcut buttons are circles. The image tiles inherit the card's rounded top corners. + +## Components + +**Navigation**: white utility bar with a soft shadow and gray (#6c6d6f) text; a red band below holds 18px white-on-red links; nav links on white measure #555555 at 18px/400 with 10px 15px padding. + +**Login button**: a 50px-radius pill, 47px tall with 14px type, white text on a gradient fill (see Colors). No flat primary button was detected. + +**Card**: 8px radius, translucent white (#ffffff80) background, #414042 text, 1px-style shadow `rgba(0, 0, 0, 0.2) 0px 1px 3px 0px`, holding a promotional image, title and description. + +**Footer**: white text, square corners; the footer background was not measured. + +**Icon row**: line icons in red-orange with small gray labels, separated by thin vertical rules (qualitative). + +## Design System Architecture + +No public design system, brand guideline or press kit is linked from the pages opened (the homepage links to about-us and career pages). The de-facto system is a Bootstrap 4 theme with a custom navigation and card layer: the root stylesheet exposes Bootstrap's colour variables and breakpoints (576, 768, 992px), the type is the proprietary Aksorn font family, and icons are FontAwesome. Source: https://www.aksorn.com/?lang=th&session=0 (homepage and stylesheet as measured by the extractor). + +## Do's and Don'ts + +Do keep the white page, deep red navigation band and white 8px cards. Do set Thai text in Aksorn with semibold body at 14px and bold headings. Do use illustrated, colourful product banners inside plain white cards and mark promotional tiles with a small ADS label. + +Don't use Bootstrap's default blue as the primary colour. Don't treat the cookie consent banner (excluded after re-extraction), the sticky header mid-hero capture artifact or the floating shortcut buttons as brand components. Don't use heavy shadows; the measured ones are 1 to 6px blurs. + +## Responsive Behavior + +The extraction includes a mobile pass, which produced a 22px display-mobile style versus 28px on desktop. The stylesheet root declares --breakpoint-sm 576px, --breakpoint-md 768px and --breakpoint-lg 992px. Other mobile layout values are not measured. + +## Iteration Guide + +Use only the frontmatter tokens. Start with a white utility row and a red nav band, add a carousel hero, an icon row and white cards with 8px radius and a thin shadow. Headings in Aksorn bold, body 14px semibold. If a flat primary button is required, measure one on the live site first. Re-run the gate after every change. + +Token reference for iteration: colors are canvas #ffffff, surface-near-white #fefefe, ink #6d6f71, button-login-bg #efefef, on-primary #ffffff, primary #af1015, surface-gray #ebebeb, ink-dark #414042, ink-gray #6c6d6f, accent-red-pure #ff0000, ink-black #000000, nav-link-text #555555, card-white-50 #ffffff80. Radii are xs 1px, sm 4px, md 8px, lg 26px, xl 30px, 2xl 50px, none 0px. Spacing steps are s1 1px, s2 2px, s3 4px, s4 5px, s5 6px, s6 8px, s7 10px, s8 12px, s9 15px, s10 16.8px. Every value here is measured on the live site; anything not listed is not measured. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/al-jazeera/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/al-jazeera/DESIGN.md new file mode 100644 index 0000000..76d72a0 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/al-jazeera/DESIGN.md @@ -0,0 +1,182 @@ +--- +version: alpha +name: Al Jazeera +category: "News & Publishing" +description: "Al Jazeera English home page: white canvas, black ink, Roboto 300-900, red #c31833 BREAKING card, orange #fa9000 accent rules, black pill Sign up button with 18px radius, 10px card radius and flat shadows." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#000000" + on-primary: "#ffffff" + surface-card: "#e0e0e0" + surface-muted: "#e5e5e5" + ink-body: "#333333" + ink-muted: "#595959" + breaking-red: "#c31833" + brand-orange: "#fa9000" +typography: + display: + fontFamily: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 32px + fontWeight: 700 + lineHeight: 41.6px + display-mobile: + fontFamily: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 26px + fontWeight: 700 + lineHeight: 33.8px + subheading: + fontFamily: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 20.8px + body: + fontFamily: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 300 + lineHeight: 24px + nav: + fontFamily: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 18px + fontWeight: 500 + lineHeight: 36px + input: + fontFamily: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 20px +rounded: + xs: 8px + sm: 10px + md: 18px + lg: 20px + xl: 22px + 2xl: 50px + 3xl: 100px + pill: 9999px +spacing: + s1: 1px + s2: 3px + s3: 4px + s4: 5px + s5: 6px + s6: 7.5px + s7: 8px + s8: 10px + s9: 11px + s10: 14px +components: + button-primary: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.subheading}" + rounded: "{rounded.md}" + padding: 6px 17px + height: 36px + button-secondary: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.subheading}" + rounded: "{rounded.3xl}" + padding: 1px 6px + height: 44px + link: + textColor: "{colors.canvas}" + typography: "{typography.display}" + nav: + textColor: "{colors.ink}" + padding: 0px 15px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.input}" + rounded: "{rounded.xl}" + padding: 0px 15px + height: 44px + borderColor: "{colors.ink-muted}" + card: + backgroundColor: "{colors.surface-card}" + textColor: "{colors.ink}" + rounded: "{rounded.sm}" + footer: + textColor: "{colors.ink}" + padding: 10px 0px 0px +--- + +# Al Jazeera + +## Overview +The measured page is the English home page at aljazeera.com. It reads as a dense news front page: a white canvas (#ffffff, the largest background area by weight), black headlines, and a red breaking-news card that is the single loud block above the fold. A thin black header carries the orange logo tile, the section links (News, Middle East, Explainer, Sport, Opinion, Video, More), a LIVE control, a search icon and a black pill "Sign up" button. Under the header a trending strip lists topic links. The capture also shows a banner advertisement above the header; it is third-party content and is not documented as brand UI here. + +The page title is "Breaking News, World News and Video from Al Jazeera". Layout is editorial: a large lead story with a photo, a vertical list of live updates, a column of smaller headlines with thumbnails, a horizontal strip of portrait video cards, a "Featured" block and a numbered "Most popular" list. Orange appears as a short vertical rule beside section labels ("Watch latest videos", "Featured", "Opinion", "Must reads"), which is the only place the orange accent is visible in the capture. Photography carries most of the visual weight; interface chrome stays black, white and grey. + +## Colors +The palette is deliberately narrow and comes entirely from measurement. +- **canvas** `#ffffff`: page background, 13033 of the measured background area weight. +- **ink** `#000000`: the most-read text color (7061 characters), used for headlines and nav links. +- **ink-body** `#333333`: running body and standfirst text (5352 characters). +- **ink-muted** `#595959`: timestamps, bylines and secondary text; also the 1px input border and the page's `--main-grey-color` variable. +- **surface-card** `#e0e0e0` and **surface-muted** `#e5e5e5`: neutral card and divider fills; a `#f0f0f0` surface is also measured but not tokenised. +- **breaking-red** `#c31833`: the background of the BREAKING card on the lead story, with white text; it is also used for the red "LIVE UPDATES" label text. The page defines a separate `--ticker-color` of `#d71c45`. +- **brand-orange** `#fa9000`: the page's `--primary-color`, `--hyperlink-color` and the one measured border color; it is the logo and section-rule accent. Related root variables are `--primary-light-color` `#e1b77d` and `--secondary-color` `#32a2ef`. +- **primary** `#000000` with **on-primary** `#ffffff`: the Sign up and Subscribe buttons are black with white text. + +The extractor also saw `#0000ee` as a text color; that is the browser default link color and is not a brand color. + +## Typography +One family runs everything: Roboto with the fallback stack "Helvetica Neue", Helvetica, Arial, sans-serif, loaded in weights 300, 400, 500, 700 and 900. The page declares it as `--font-family`. Article bodies use a separate variable, `--font-family-article-body`, set to Georgia, Times, "Times New Roman", serif; that is declared in the CSS but article pages were not measured. + +Measured roles: +- **display** 32px, weight 700, line height 41.6px: the lead headline (white on the red card). On the 390px mobile pass it is 26px / 700 / 33.8px (**display-mobile**). +- **subheading** 16px, weight 400, line height 20.8px: the h3 live-update headlines. +- **body** 16px, weight 300, line height 24px: standfirst paragraphs. +- **nav** 18px, weight 500, line height 36px: navigation links. +- **input** 18px, weight 400, line height 20px. + +The most-used sizes by character count are 16px (8412), 20px (3249), 14px (932), 15px (845) and 18px (272). Weight 300 carries 5591 characters, so a light body weight is part of the voice. No letter-spacing is measured. Section labels in the capture appear in uppercase, and the BREAKING card measures `text-transform: uppercase` at 24px. + +## Layout +The page is measured at 1280px wide with a 13981px scroll height. The header is 60px tall with 15px horizontal padding and a `--sticky-nav-header-offset` of 60px. The grid in the capture is a wide lead column of text and photo beside narrower stacks, then full-width rails. The spacing scale tokens are drawn from measured paddings and gaps: 10px is the dominant padding (50 uses) and the dominant gap (92 uses), followed by 15px (19 uses) and 20px (14 uses). Other measured values are 1px, 3px, 4px, 5px, 6px, 7.5px, 8px, 11px and 14px. + +## Elevation & Depth +The page is almost flat. 21 of the measured box-shadow declarations are `none`, and the shadows that exist are light: `0 2px 4px -4px rgba(0,0,0,.5)`, `0 2px 2px 0 rgba(0,0,0,.16)` and `0 0 4px 1px rgba(0,0,0,.08)`. A heavier Material-style stack (`0 6px 10px rgba(0,0,0,.14), 0 1px 18px rgba(0,0,0,.12), 0 3px 5px -1px rgba(0,0,0,.4)`) appears twice in the CSS. Depth in the capture comes from photographs and the red card overlapping the lead photo, not from shadows. + +## Shapes +Radii are mixed. The card radius is 10px (98 uses), which is the most common value; 20px, 18px, 22px, 50px, 8px and 100px also appear, plus 999px and 50% for pills and avatars. The Sign up button measures 18px (rounded md); the Subscribe button measures 100px (rounded 3xl) and 44px high; the search input measures 22px (rounded xl), 44px high with a 1px `#595959` border. The red lead card measures 10px. + +## Components +- **button-primary**: black fill, white text, 16px / 400, radius 18px, padding 6px 17px, height 36px (the header "Sign up"). +- **button-secondary**: black fill, white text, 16px, pill-like radius 100px, padding 1px 6px, height 44px (the "Subscribe" button). +- **text-input**: white fill, black 18px text, radius 22px, padding 0px 15px, height 44px, 1px `#595959` border. +- **card**: `#e0e0e0` fill with black text and 10px radius. +- **nav / nav-link**: black 18px / 500 links, header padding 0px 15px. Hover on nav links was measured: color stays black and an underline appears. +- **link**: the lead headline link is white 32px / 700 on the red card. +- **footer**: padding 10px 0px 0px. + +Content patterns in the capture: a red BREAKING card on the lead image, "LIVE UPDATES" with relative timestamps ("9m ago"), "Most popular" with large numerals, and portrait video thumbnails with two-line captions. + +## Design System Architecture +No public design system or brand-guideline page was found. The brand, press, about and design paths on aljazeera.com return 404 and the home page links none. The de-facto system is expressed in CSS custom properties on the root: `--primary-color`, `--primary-light-color`, `--secondary-color`, `--hyperlink-color`, `--main-grey-color`, `--ticker-color`, `--font-family`, `--font-family-article-body`, `--leading-base` 1, `--leading-headline` 1.3 and `--leading-multilines` 1.5, and article font size variables of 1.25rem (desktop) and 1.125rem (mobile). The page also uses the Swiper carousel library (`--swiper-theme-color` `#007aff`) and a swiper-icons font; those are third-party and not brand tokens. + +## Do's and Don'ts +- Do keep chrome black, white and grey and let photography carry color. +- Do reserve `#c31833` for breaking news and live labels. +- Do use `#fa9000` for the logo tile and the short section rules only, as seen in the capture. +- Do set headlines in Roboto 700 and body in Roboto 300 or 400. +- Don't add shadows to cards; the measured system is flat. +- Don't use the browser default blue (`#0000ee`) for links. +- Don't treat advertisement slots as brand components. + +## Responsive Behavior +Only a 390px mobile pass was measured. Results: the lead h1 drops from 32px to 26px (line height 33.8px); the body text role is 18px / 400 / 23.4px; a "Subscribe" button with white text on black is the detected call to action. Breakpoints, navigation collapse and column changes were not measured. + +## Iteration Guide +1. Start from the frontmatter tokens; do not introduce new greys. +2. Build the lead story as photo plus a `breaking-red` card with white 32px Roboto 700 text. +3. Use the 10px card radius and 10px padding/gap rhythm for lists. +4. For action buttons use black fill and white text; header buttons 18px radius, 36px high. +5. Mark section starts with a short vertical `brand-orange` rule and an uppercase label. +6. Verify any new value against `web/data/extracted/al-jazeera.json` before adding it. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/alberta/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/alberta/DESIGN.md new file mode 100644 index 0000000..91b6275 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/alberta/DESIGN.md @@ -0,0 +1,195 @@ +--- +version: alpha +name: Government of Alberta +category: "Design Systems" +description: "Government of Alberta (www.alberta.ca) is a civic services portal in Acumin Pro Semi Condensed with a single #006dcc blue for links, search and the Menu tab, #333333 text, a full-bleed photographic hero with white 48px bold headline, #f2f2f2 and #ffffff content bands, and square-edged cards." + +colors: + canvas: "#ffffff" + page-largest: "#f2f2f2" + ink: "#333333" + primary: "#006dcc" + on-primary: "#ffffff" + surface-muted: "#e5e5e5" + ink-body: "#36424a" + blue-link-alt: "#0070c4" + hairline: "#919191" + text-input-text: "#000000" + text-input-border: "#dcdcdc" +typography: + display: + fontFamily: acumin-pro-semi-condensed, sans-serif + fontSize: 48px + fontWeight: 700 + lineHeight: 56px + display-mobile: + fontFamily: acumin-pro-semi-condensed, sans-serif + fontSize: 38px + fontWeight: 700 + lineHeight: 56px + heading: + fontFamily: acumin-pro-semi-condensed, sans-serif + fontSize: 36px + fontWeight: 700 + lineHeight: 44px + subheading: + fontFamily: acumin-pro-semi-condensed, sans-serif + fontSize: 24px + fontWeight: 400 + lineHeight: 32px + body: + fontFamily: acumin-pro-semi-condensed, sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 28px + button: + fontFamily: acumin-pro-semi-condensed, sans-serif + fontSize: 18px + fontWeight: 700 + lineHeight: 18px + input: + fontFamily: acumin-pro-semi-condensed, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 42px +rounded: + xs: 4px + sm: 40px + pill: 9999px +spacing: + s1: 8px + s2: 9px + s3: 12px + s4: 14px + s5: 20px + s6: 23px + s7: 24px + s8: 28px + s9: 32px + s10: 44px +components: + back-to-top: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 12px 16px 16px 44px + height: 50px + borderColor: "{colors.primary}" + button-secondary: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 9px 36px 12px 12px + height: 43px + borderColor: "{colors.primary}" + link: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 9px 36px 12px 12px + borderColor: "{colors.primary}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + nav-link: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.primary}" + typography: "{typography.body}" + padding: 0px 20px 4px + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.text-input-text}" + typography: "{typography.input}" + rounded: "{rounded.xs}" + padding: 12px 12px 14px + height: 42px + borderColor: "{colors.text-input-border}" + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.primary}" +--- + +# Government of Alberta + +## Overview + +The page measured is the homepage of www.alberta.ca, titled "Government of Alberta | Alberta.ca". It is the main entry point to provincial services and information. At the top, a slim white header carries the handwritten-style "Alberta" wordmark with a small teal square on the left, a search field with a blue magnifier button, an account icon and a tall blue "Menu" tab at the far right. Beneath it is a large full-bleed photograph of a logging truck on a forest road, overlaid with a white bold headline ("Tariff-related resources for Alberta businesses"), a one-line white subheading and an outlined "Share your input" button. A thin pale-blue line closes the hero. + +The body then switches to a white band with the heading "Find the Alberta government services and information you need" over a three-column index of services, each prefixed by a black line icon and set as an underlined blue link (About government, Agriculture, Health, Housing, Justice, Tax information and so on). A grey "Initiatives" band follows with image-topped cards: a large landscape card, a red app icon card, and cards with photographs of people, hospitals and weather. The voice is plain, direct English: service names as links, short descriptive sentences on cards, and calls to action like "Share your input" and "Download the app". + +## Colors + +The canvas is #ffffff, white, used for the service index band. The largest measured background area is #f2f2f2, a light grey used for the "Initiatives" band, the footer and the skip link. Text is #333333 at its most frequent, with #36424a for card copy; the measured card copy colour is a slightly blue-leaning dark grey. + +The only saturated brand color is #006dcc, a clear blue. It colours every link and card title, the search button, the "Menu" tab (a measured 90px tall block with white text, which turns #333333 on hover), outlined buttons and nav items. A second, nearly identical blue, #0070c4, appears in a small amount of link text. The hero's headline is #ffffff white because it sits on a photograph. Borders and field outlines use #919191 for strong strokes, #dcdcdc for the search input, and #e5e5e5 appears as a muted surface tone. + +The page's root custom properties (`--color-yellow`, `--color-green`, `--color-purple`, `--color-red` and similar) describe a different palette from what is rendered on this page, so no values were taken from them. + +## Typography + +The family is Acumin Pro Semi Condensed, a webfont loaded in regular (400) and bold (700), with a generic sans-serif fallback. Acumin is a commercial typeface, so if it is not available use a narrow grotesque with similar proportions, such as Arial Narrow or Roboto Condensed, for the whole system, and keep sizes and weights unchanged. + +Measured steps: `display` is the hero h1 at 48px bold on a 56px line (on mobile `display-mobile` is 38px bold on a 56px line). `heading` is 36px bold on a 44px line, used for section titles such as "Initiatives". `subheading` is 24px regular on a 32px line, which styles card titles in blue. `body` is 18px regular on a 28px line. `button` is 18px bold on an 18px line, and `input` is the 16px style of the search field. + +Weight is used sparingly: bold only for page and section headlines and buttons, regular for everything else. The narrow letterforms keep long service names compact. + +## Layout + +The page is 3739px tall at a 1280px viewport. Content aligns to a single left edge: the hero headline, the services heading, the index icons and the first card all start at the same margin. The services index is three equal columns; below, the "Initiatives" cards form a grid with a wide first card and two tall narrow cards in the first row, then three equal cards in the second. + +Spacing steps in the tokens run from 8px to 44px. The primary measured button uses a 44px left padding to make room for an icon, and the outlined link button uses 9px 36px 12px 12px padding with a trailing arrow. Text inputs are 42px high with 12px 12px 14px padding. + +## Elevation & Depth + +Depth is limited. Cards have a thin border and sit flat on the grey band; the measured CSS contains a soft diffuse shadow `0px 3px 13px rgba(51,51,51,.11)` and an inset focus ring `inset 0 0 0 1px #333`. Most elements measure no shadow. + +The main layering device is the photographic hero, with text placed directly on it, and the alternating white and grey bands. Do not add heavy shadows or glassy overlays. + +## Shapes + +The core shape is a square rectangle with a 4px radius. 4px is 4px and is used for the outlined button, the link button, and the text input. 40px is 40px and belongs to the pill-shaped back-to-top control. 9999px is the fully rounded form used for circular icon controls. The "Menu" tab and the search button measure square (the Menu tab is measured at 0px radius). + +Icons are thin black line pictograms set in a uniform square, and the logo is a script wordmark. Cards are rectangles with a thin grey border and an image at the top edge. + +## Components + +**Menu tab.** A 90px high block at the right of the header, #006dcc background with white bold text and a hamburger glyph; on hover it becomes #333333 with the same white text. Square corners. + +**Back-to-top button.** The extractor's primary call to action: #006dcc fill, #ffffff text, 18px bold, 50px high, 40px radius, padding 12px 16px 16px 44px, border in the same blue. Its label is "Back to top", so it is a utility control rather than a main action. + +**Outlined button ("Share your input").** White fill, #006dcc text and border, 18px bold, 43px high, 4px radius, trailing arrow; on hover the text and border turn #333333. + +**Search field.** White, 42px high, 4px radius, with a #dcdcdc border and a joined blue square magnifier button. + +**Service link.** Blue underlined 18px text with a left icon. + +**Initiative card.** Image on top, a 24px blue title, 18px dark body copy, and a thin grey border. + +**Footer.** Grey (#f2f2f2) with blue links. + +## Design System Architecture + +The Government of Alberta publishes the GoA Design System at https://design.alberta.ca, which I opened. It describes itself as a resource for Alberta government digital services that enables teams to build faster using shared components, templates, tokens and examples while maintaining accessibility and brand compliance, with service patterns, design tokens and an experimental dark mode. The page I read does not name a maintainer, a typeface or hex colors, and I opened no other page of it. + +I could not confirm that alberta.ca uses it. The site's markup carries many class names with a `goa-` prefix (for example `goa-background--blue`, `goa-background--grey`, `goa-card`, `goa-aboutlinks`) and an element id of `goa-main-nav`, but a shared prefix is not proof that the design-system library produced them, and the extracted root variables are an unrelated eleven-color `--color-*` set. For that reason no values were taken from the design-system site: all tokens in the frontmatter were measured on the rendered page, and the de-facto system here is a set of `goa-*` utility and component classes with one blue and a grey band palette. + +## Do's and Don'ts + +Do use #006dcc for all interactive text, icons buttons and the Menu tab. Do keep headings bold and body regular in Acumin Pro Semi Condensed. Do pair a hero photograph with white bold text and a single outlined button. Do present services as an index of underlined blue links with line icons. Do use alternating white and grey bands. + +Don't introduce other accent hues; the red, yellow and purple custom properties are not visible in the measured design. Don't use blue for large fills other than the Menu tab and small buttons. Don't round cards or inputs beyond 4px. Don't put text on the photograph without checking its contrast. Don't treat the back-to-top control as the main call to action. + +## Responsive Behavior + +The extraction recorded 1280px and 390px widths. At mobile the hero headline drops from 48px to 38px with an unchanged 56px line height. No breakpoints were measured, so none are stated. The index of service links is three columns on desktop and the Initiatives grid mixes wide and narrow cards, so both are expected to stack; this has not been measured. + +Controls keep generous touch sizes: the Menu tab is 90px high, buttons are 43px to 50px high, and the search input is 42px high. Preserve those heights on small screens. + +## Iteration Guide + +Start from a white canvas and a grey band, Acumin Pro Semi Condensed at 18px body, and one blue, #006dcc. Build a hero with a photograph, a 48px bold white headline and one outlined button. Follow with an icon-led service index in blue underlined links, then a grey band of bordered image cards with 24px blue titles. + +Check each addition against these points: one blue only, 4px corners, bold weight limited to headings and buttons, links underlined, and photography that shows real places and people from the province. Consult the Alberta design system site above before adding new components, and re-measure the live site. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aldi/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aldi/DESIGN.md new file mode 100644 index 0000000..7695109 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aldi/DESIGN.md @@ -0,0 +1,169 @@ +--- +version: alpha +name: Aldi +category: "Retail & E-commerce" +description: "ALDI US storefront: navy #00005f header and buttons, white canvas, custom ALDI SUED VF typeface at 14px/600, 8px button radius, 12px pale blue #bcedfc cards, pill search field and a flat hairline-shadow header." +colors: + canvas: "#ffffff" + ink: "#56595e" + primary: "#00005f" + on-primary: "#ffffff" + surface-card: "#bcedfc" + ink-strong: "#343538" + ink-heading: "#242529" + ink-black: "#000000" + hairline: "#e8e9eb" +typography: + display: + fontFamily: "\"ALDI SUED VF\"" + fontSize: 32px + fontWeight: 700 + lineHeight: 36.8px + heading: + fontFamily: "\"ALDI SUED VF\"" + fontSize: 20px + fontWeight: 600 + lineHeight: 25px + subheading: + fontFamily: "\"ALDI SUED VF\"" + fontSize: 14px + fontWeight: 400 + lineHeight: 20px + button: + fontFamily: "\"ALDI SUED VF\"" + fontSize: 14px + fontWeight: 600 + lineHeight: 20px + nav: + fontFamily: "\"ALDI SUED VF\"" + fontSize: 16px + fontWeight: 400 + lineHeight: 18.4px +rounded: + xs: 2px + sm: 4px + md: 8px + lg: 12px + xl: 20px + 2xl: 24px + 3xl: 27px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 4px + s4: 6px + s5: 8px + s6: 9px + s7: 10px + s8: 12px + s9: 15px + s10: 16px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 0px 16px + height: 40px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 0px 16px + height: 32px + nav: + textColor: "{colors.canvas}" + boxShadow: rgb(232, 233, 235) 0px 1px 0px 0px + text-input: + textColor: "{colors.ink-strong}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 12px 48px 12px 28px + height: 54px + card: + backgroundColor: "{colors.surface-card}" + textColor: "{colors.primary}" + rounded: "{rounded.lg}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-heading}" +--- + +# Aldi + +## Overview +The measured page is aldi.us, which loads the store-front at /store/aldi/storefront (the page title is "ALDI Grocery Stores - Quality Food. Everyday Low Prices."). It is a grocery e-commerce front page: a deep navy header strip (#00005f) with the ALDI logo tile, "Weekly Ads", "Buy It Again", "Find Stores" and a delivery selector, a second white row with a category menu and a pill-shaped search field, a left category rail, and then horizontally scrolling product rails titled "Price Drops", "Best Sellers" and "Fresh Produce". The capture was taken with a "How would you like to shop?" location dialog open and a grey scrim behind it; that dialog and scrim are a transactional popup and are not documented as brand UI or tokens here. The extraction was re-run once with the popup-handling batch and the dialog was still present, so measurements that fall on the scrim (the `#3435383d` background area) are ignored. + +The visual voice is utilitarian and price-led: small red price tags on white, bold navy section headings, promotional banners in navy with bright graphic art, and photography of products on white. Cards that introduce editorial themes (Thanksgiving, Charcuterie, Fall Seasonal Products) use a pale blue fill (#bcedfc) with navy text. + +## Colors +- **canvas** `#ffffff`: the dominant background (6794 area weight). +- **primary** `#00005f`: ALDI navy; the fill of the header strip, the "Give Us Feedback", "Shop Now" and "Add" buttons, and the body-text color on promo cards. The root variable `--ids-color-brand-primary-regular` is `#00005f`, with `--ids-color-brand-primary-dark` `#000092`. +- **on-primary** `#ffffff`: text on navy. +- **ink** `#56595e`: the most-read text color (2759 characters), used for product names; it equals `--ids-color-system-grayscale-60`. +- **ink-strong** `#343538`, **ink-heading** `#242529`, **ink-black** `#000000`: darker greys and black for body, section headings and the h1. +- **surface-card** `#bcedfc`: pale blue card fill. +- **hairline** `#e8e9eb`: the 1px header underline shadow and the measured divider color. +- Other root variables published by the site: feedback alert `#FFA500`, success `#108910` (dark `#0D720D`, extra dark `#0A610A`), brand secondary dark `#003121`, secondary extra dark `#001810`, tertiary dark `#EFE9E1` and tertiary light `#FFFFFF`. A red `#d70000` background area (8 weight) is measured; it is the price tag and "Price Drops" tile red. + +`#0000ee` appears as a measured link color; it is the browser default and is not a brand color, so it is not tokenised. + +## Typography +The typeface is a custom variable font named "ALDI SUED VF", loaded at weight 400 (the variable axis serves heavier weights; 400 is the only declared face in the font list). It is the only family measured (8412 characters). A proprietary face means substitutes are needed off-site; a neutral humanist or grotesque sans at weights 400, 600 and 700 is the closest category, but no substitute is published by the brand. + +Measured roles: +- **display** 32px, weight 700, line height 36.8px: the h1 ("ALDI - Shop"), black. +- **heading** 20px, weight 600, line height 25px: section headings such as "Featured Pages". +- **subheading** 14px, weight 400, line height 20px: product titles. +- **button** 14px, weight 600, line height 20px. +- **nav** 16px, weight 400, line height 18.4px. + +By character count: 14px (5321), 16px (2202), 17px (266), 20px (253), 11px (231), 12px (113), 24px (15), 32px (11). The interface is therefore small-type heavy; most text is 14px. + +## Layout +Measured at 1280px wide. The header block is 160px tall across both rows. Content sits to the right of a left category rail and is laid out as full-width rails of five products with arrow controls at the right edge. Promotional blocks (a navy "Weekly Ad straight to your inbox" strip, a "The Lowest Prices" banner, "ALDI Finds" tiles) span the content width. Card rows of three use 297px by 303px cards. + +Spacing tokens come from measured paddings and gaps; the site's own scale is published in root variables: `--ids-system-space-4` 4px, `--ids-system-space-24` 24px and `--ids-system-space-48` 48px. Button padding is 0px 16px. + +## Elevation & Depth +Mostly flat. The header uses a single hairline shadow `rgb(232, 233, 235) 0px 1px 0px 0px`. The CSS also contains `0px 2px 8px rgba(0, 0, 0, 0.16)`, `0px 2px 10px -3px #999`, `0px 0px 12px 2px #c7c5c7` and `-3px -3px 5px -2px #c7c5c7`; the capture shows a soft shadowed white panel behind the "International Meals" and "Fall Meals" modules. The location dialog is a popup and is not an elevation token. + +## Shapes +Radii published as root variables: 4px (`--ids-system-radius-4`), 8px (`-8`), 12px (`-12`) and 24px (`-24`). Measured usage: 12px (126 uses, cards), 8px (115, buttons), 20px (106), 50% (44, round icon buttons), 15% (40), 4px (32), 24px (25), 999px (3, the search field pill). Buttons are 8px radius; cards 12px; the search input is a full pill (999px mapped to the pill token). + +## Components +- **button-primary**: navy fill, white text, 14px / 600, radius 8px, padding 0px 16px, height 40px ("Give Us Feedback"). +- **button-secondary**: same fill and type, height 32px ("Shop Now"). +- Outlined button ("Sign In / Register"): transparent with a 1px `#242529` border, 8px radius, 40px high, text `#242529`. +- **text-input**: the search field, 14px / 600 text in `#343538`, pill radius, padding 12px 48px 12px 28px, height 54px. +- **card**: `#bcedfc` fill, navy text, 12px radius. +- **nav**: header row with the hairline shadow and white text on navy. +- Product tiles: white, price in a red tag, struck-through old price, discount in bold, "Many in stock" status and a round navy "Add" button overlaid on the product image. + +## Design System Architecture +The site exposes its own token namespace on the root: `--ids-color-brand-*`, `--ids-color-system-grayscale-*`, `--ids-color-system-feedback-*`, `--ids-system-radius-*` and `--ids-system-space-*`. The "ids" prefix is the only naming evidence for a named internal system; no public documentation or brand-guideline link was found on the pages opened (the home page links /about-us only). The storefront is served from /store/aldi/storefront. The grayscale ramp visible in the variables includes 60 `#56595E`, 70 `#343538`, 80 `#242529` and 90 `#191A1C`, matching the measured text colors. + +## Do's and Don'ts +- Do use navy `#00005f` for every primary action and the header. +- Do keep text in the grayscale ramp (`#56595e`, `#343538`, `#242529`, `#191a1c`). +- Do round buttons to 8px, cards to 12px and the search field to a pill. +- Do show prices in red tags next to product photography. +- Don't tokenise the location dialog, its scrim, or any popup. +- Don't use browser-default link blue. +- Don't add heavy shadows; the header relies on a 1px hairline. + +## Responsive Behavior +A 390px mobile pass was measured: the h1 stays 32px / 700 / 36.8px, the body text role drops to 12px / 400 / 18px, and the detected primary button ("Shop Now") is 12px / 600 / 18px, 32px high, still navy with an 8px radius. Navigation collapse and column counts were not measured. + +## Iteration Guide +1. Start with navy `primary` and white canvas; add `surface-card` for editorial tiles only. +2. Use 14px as the working text size and 600 for buttons and headings. +3. Build rails of product tiles with a navy "Add" overlay. +4. Keep the radius ladder 8px / 12px / pill. +5. Check any new value against `web/data/extracted/aldi.json` or the `--ids-*` variables. + +## Imagery and Voice +Product photography is cut out on white and shown at a consistent size within each rail. Editorial modules use full-bleed lifestyle photographs of prepared food (the capture shows tacos, soup and bread) beside a product rail. Microcopy is short and promotional: "Prices you can count on. Every single day.", "Weekly Ad straight to your inbox. Save time. Save money." and "Tonight's dinner just went global." Status labels are factual ("Many in stock", "Low fat", "Vegan", "Multigrain"). Percent-off labels are bold navy text, for example "42% off". diff --git a/skills/scd-uiux/data/vendor/design-systems/library/alethia/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/alethia/DESIGN.md new file mode 100644 index 0000000..d65da2b --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/alethia/DESIGN.md @@ -0,0 +1,161 @@ +--- +version: alpha +name: Alethia +category: "Product & SaaS" +description: "Alethia home page: dark forest green #0f1f10 canvas, pale lime #c6f19d call-to-action with 8px radius, Geist headlines at 72px with -3.6px tracking, Geist Mono uppercase labels, cream and indigo bands." +colors: + canvas: "#0f1f10" + ink: "#ffffff" + primary: "#c6f19d" + on-primary: "#0f1f10" + surface-cream: "#f5f4f2" + surface-indigo: "#200f85" + ink-lime-soft: "#d5eebc" + ink-offwhite: "#f3f3f3" + on-primary-hover: "#0e1f0f" +typography: + display: + fontFamily: "\"Geist Medium\", \"Geist Medium Placeholder\", sans-serif" + fontSize: 72px + fontWeight: 500 + lineHeight: 68.4px + letterSpacing: "-3.6px" + display-mobile: + fontFamily: "\"Geist Medium\", \"Geist Medium Placeholder\", sans-serif" + fontSize: 32px + fontWeight: 500 + lineHeight: 30.4px + letterSpacing: "-1.6px" + heading: + fontFamily: "\"Geist SemiBold\", \"Geist SemiBold Placeholder\", sans-serif" + fontSize: 64px + fontWeight: 600 + lineHeight: 60.8px + letterSpacing: "-3.2px" + subheading: + fontFamily: "\"Geist Mono\", monospace" + fontSize: 14px + fontWeight: 500 + lineHeight: 12.6px + textTransform: uppercase + body: + fontFamily: Geist, "Geist Placeholder", sans-serif + fontSize: 44px + fontWeight: 500 + lineHeight: 41.8px + letterSpacing: "-2.2px" + button: + fontFamily: "\"Geist Mono\", monospace" + fontSize: 15px + fontWeight: 600 + lineHeight: 13.5px + textTransform: uppercase +rounded: + xs: 3px + sm: 4px + md: 5px + lg: 6px + xl: 8px + 2xl: 12px + 3xl: 14px + 4xl: 16px + pill: 9999px +spacing: + s1: 4px + s2: 6px + s3: 7px + s4: 8px + s5: 10px + s6: 11px + s7: 12px + s8: 16px + s9: 18px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.xl}" + padding: 16px + height: 58px + button-primary-hover: + textColor: "{colors.on-primary-hover}" + card: + backgroundColor: "{colors.ink}" + textColor: "{colors.ink}" + padding: 20px +--- + +# Alethia + +## Overview +Alethia presents "end-to-end environmental intelligence powered by science, blockchain, and transparent data you can trust" (the site's own meta description). The measured page is the home page at alethia.earth, built in Framer (root variables are Framer tokens and `--framer-will-change-override`). The identity is a very dark forest green canvas (#0f1f10) with a single pale lime accent (#c6f19d) used for the call to action, large tight-tracked Geist headlines in white or warm off-white, and uppercase Geist Mono labels. + +Content structure, taken from the page text: a hero ("Where Ecosystem Science and Enterprise Strategy Meet" with a "Let's Talk" button and "Scroll to discover"), a carbon-flux data readout ("-8.3 CO₂e", "Verified Removal", "Verified Emission"), a numbered list of five capabilities (01 Gold-Standard Observation Systems, 02 World-Class Atmospheric Monitoring (aMRV), 03 Integrated Algorithmic Processing, 04 Blockchain-Secured Traceability, 05 Built for Scale and Complexity), a vision section, "From Data Chaos to Science-Backed, Actionable Insights", and a media and press area. + +Note on the capture: the stored screenshot shows only a near-black loading state with a small hexagon mark at the top and a flat dark green field below, so imagery and art direction could not be read from it. Everything here comes from the DOM measurement and page text. + +## Colors +- **canvas** `#0f1f10`: dark forest green; the largest background (7167 area weight) and the text color on light surfaces. +- **ink** `#ffffff`: white text on dark (957 characters). +- **primary** `#c6f19d`: pale lime, the fill of the "LET'S TALK" button; it is the site's `--token-29b0dbc5...` variable and also appears as text (100 characters). +- **on-primary** `#0f1f10` and **on-primary-hover** `#0e1f0f`: text on the lime button, with the measured hover value. +- **surface-cream** `#f5f4f2`: warm off-white; a full-width light section (6605 area weight) and the hero heading color. +- **surface-indigo** `#200f85`: a deep indigo section background (4096 area weight). +- **ink-lime-soft** `#d5eebc`: pale green text (278 characters). +- **ink-offwhite** `#f3f3f3`: a light text color. +Other measured but untokenised backgrounds: `#000000`, `#828282`, `#0f0f0f` (also a root variable), `#cc8343` and `#e8ab41`; `#e0e0e0` is a root variable. + +## Typography +Two families: Geist (in static Regular 400, Medium 500 and SemiBold 600 cuts, each with a Framer placeholder fallback) and Geist Mono (400, 500, 600). Headlines use heavy negative tracking, about -5% of the size. +- **display** Geist Medium 72px / 500 / 68.4px, letter spacing -3.6px (the hero h1); on mobile **display-mobile** 32px / 500 / 30.4px, -1.6px. +- **heading** Geist SemiBold 64px / 600 / 60.8px, -3.2px ("From Data Chaos to Science-Backed..."). +- **body** Geist 44px / 500 / 41.8px, -2.2px; the lead paragraph is set at a very large size. +- **subheading** Geist Mono 14px / 500 / 12.6px, uppercase ("OUR VISION"). +- **button** Geist Mono 15px / 600 / 13.5px, uppercase. +By character count, 24px (665), 14px (428), 32px (331), 40px (308) and 64px (216) lead. Line heights are about 0.95 of the font size throughout. + +## Layout +The page is a stack of full-width bands that alternate dark green, cream and indigo. The hero h1 box measures 731px wide by 205px high and the lead paragraph 634px by 251px, so text blocks are held to a narrow measure on a wide canvas. The spacing tokens come from measured paddings and gaps: 4, 6, 7, 8, 10, 11, 12, 16, 18 and 20px. Button padding is 16px; card padding is 20px. + +## Elevation & Depth +Depth is minimal. One shadow stack is measured: `rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px`, a soft drop plus a faint white ring. Layers are separated mainly by background-band changes. + +## Shapes +Radii measured: 3px (14 uses), 24px (13), 99px (8), 12px (5), 5px, 8px and 6px, 999px and 100% (circular), and 36px. The primary button uses 8px (rounded xl); the media card measures 24px (a value above the token ladder's 16px top step, so it is recorded here rather than as a token). + +## Components +- **button-primary**: lime `#c6f19d` fill, `#0f1f10` text, Geist Mono 15px / 600 uppercase, radius 8px, padding 16px, height 58px ("LET'S TALK"). Hover text color `#0e1f0f` was measured. +- **card**: a 395px by 678px media and press card with 20px padding, 24px radius, a Geist Mono 14px uppercase category and date line ("MEDIA & PRESS APR 2025"). +- Numbered capability rows ("01." through "05.") with a short title and description. +No navigation link styles were captured by the extractor; the header text reads "Solutions", "our tech", "Company", "Resources" and "Let's Talk". + +## Design System Architecture +No public design system or brand guidelines were found; the home page links to none and no brand, press or design link was present in its markup. The de-facto system is a Framer project: colors live in six `--token-*` variables (`#0f1f10`, `#c6f19d`, `#f5f4f2`, `#fff`, `#0f0f0f`, `#e0e0e0`) and type is set per text style using Geist cuts named Medium, SemiBold and Regular. + +## Do's and Don'ts +- Do keep the canvas `#0f1f10` and use lime `#c6f19d` only for the primary action. +- Do set headlines in Geist with negative tracking and lines at about 0.95. +- Do use Geist Mono uppercase for labels and buttons. +- Do alternate dark, cream and indigo bands. +- Don't add extra accent hues beyond the measured set. +- Don't use heavy shadows. +- Don't copy the capture's loading state as a design. + +## Responsive Behavior +A 390px mobile pass was measured: the h1 is 32px / 500 / 30.4px with -1.6px tracking in white, the lead paragraph is 36px / 500 / 34.2px, and the "LET'S TALK" button is unchanged (166px by 58px, 8px radius). Navigation behavior and breakpoints were not measured. + +## Iteration Guide +1. Start from canvas `#0f1f10`, ink `#ffffff`, primary `#c6f19d`. +2. Use cream and indigo bands for rhythm. +3. Keep Geist headlines at about -5% tracking; use Geist Mono caps for labels. +4. One lime button per view. +5. Verify new values against `web/data/extracted/alethia.json`. + +## Content and Voice +The microcopy is scientific and confident, with short claims followed by one explanatory sentence. The hero line "Know your impact—precisely." is followed by "End-to-end environmental intelligence powered by science, blockchain, and transparent data you can trust." Capability titles name methods rather than benefits: "Gold-Standard Observation Systems" is described as "Sensor towers, flux methods, & satellites track full carbon flux"; "World-Class Atmospheric Monitoring (aMRV)" refers to "the same methods used in the WMO's Annual State of the Global Climate Report"; "Blockchain-Secured Traceability" promises that "Every metric is verifiable, audit-ready, and tamper-proof". The closing capability reads "From a single farm to global operations, Alethia adapts to your data infrastructure and ecosystem environment." + +A live-looking data block shows signed carbon values (-8.3 CO₂e, Verified Removal -1.2, CO₂ -2.01, 0.57, Verified Emission 1.87), which establishes numerals with subscript units as a recurring graphic device. Section labels such as "our vision" and "real-time, blockchain-backed carbon intelligence" are set in the mono face. A news-style card cites "CO₂ emissions Reach Record High in 2024". The only action label on the page is "Let's Talk", repeated in the header and hero. Lowercase appears in some navigation items ("our tech") while buttons are uppercase through text transform, so label case is controlled by style rather than by the copy. + +The numbered list pairs a two-digit index with a bold title and a one-sentence description, so the page teaches its method in sequence, from observation through processing to verification. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/alflow-ocr/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/alflow-ocr/DESIGN.md new file mode 100644 index 0000000..ca17190 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/alflow-ocr/DESIGN.md @@ -0,0 +1,177 @@ +--- +version: alpha +name: Alflow OCR +category: "Thai Brands" +description: "Alflow OCR Thai home page: deep teal #013c46 buttons and dark band, white canvas, Inter with Noto Sans Thai at 48.8px/700, 32px-radius buttons, 24px glass cards and bright teal #31cfcc accent." +colors: + canvas: "#013c46" + page-body: "#ffffff" + ink: "#ffffffcc" + primary: "#013c46" + on-primary: "#ffffff" + surface-slate: "#0f172a" + ink-secondary: "#4a5859" + ink-on-dark-muted: "#ffffffb2" + ink-cool-grey: "#cad5e2" + hairline: "#ffffff1a" + ink-nav: "#111111" + accent-teal: "#31cfcc" + accent-mint: "#86f9b3" +typography: + display: + fontFamily: Inter, "Inter Fallback", "Noto Sans Thai", "Noto Sans Thai Fallback", system-ui, sans-serif + fontSize: 48.8px + fontWeight: 700 + lineHeight: 58.56px + letterSpacing: "-0.976px" + heading: + fontFamily: Inter, "Inter Fallback", "Noto Sans Thai", "Noto Sans Thai Fallback", system-ui, sans-serif + fontSize: 39.04px + fontWeight: 700 + lineHeight: 46.848px + letterSpacing: "-0.7808px" + subheading: + fontFamily: Inter, "Inter Fallback", "Noto Sans Thai", "Noto Sans Thai Fallback", system-ui, sans-serif + fontSize: 31.2px + fontWeight: 700 + lineHeight: 37.44px + letterSpacing: "-0.624px" + body: + fontFamily: Inter, "Inter Fallback", "Noto Sans Thai", "Noto Sans Thai Fallback", system-ui, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 22.75px + button: + fontFamily: Inter, "Inter Fallback", "Noto Sans Thai", "Noto Sans Thai Fallback", system-ui, sans-serif + fontSize: 18px + fontWeight: 600 + lineHeight: 28px + nav: + fontFamily: Inter, "Inter Fallback", "Noto Sans Thai", "Noto Sans Thai Fallback", system-ui, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 25.6px +rounded: + xs: 4px + sm: 6px + md: 10px + lg: 16px + xl: 24px + 2xl: 32px + 3xl: 40px + 4xl: 48px + none: 0px + pill: 9999px +spacing: + s1: 4px + s2: 6px + s3: 8px + s4: 10px + s5: 12px + s6: 16px + s7: 20px + s8: 24px + s9: 32px + s10: 40px +components: + button-primary: + backgroundColor: "{colors.canvas}" + textColor: "{colors.page-body}" + typography: "{typography.button}" + rounded: "{rounded.2xl}" + padding: 16px 32px + height: 60px + link: + backgroundColor: "{colors.page-body}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.none}" + nav: + textColor: "{colors.canvas}" + rounded: "{rounded.none}" + padding: 20px 0px + nav-link: + textColor: "{colors.ink-nav}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + card: + backgroundColor: "{colors.hairline}" + textColor: "{colors.ink-nav}" + rounded: "{rounded.pill}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.none}" +--- + +# Alflow OCR + +## Overview +The measured page is the Thai-language home page of Alflow OCR at alflow.co (document language `th`; page title "Alflow OCR - AI-Powered Document Transformation"). It is a product landing page for an AI document-reading service, written in Thai with English product terms. The look is a clean teal system: a near-white hero with a soft mint gradient, a deep teal (#013c46) section with a curved top edge, and rounded white cards with a pastel icon tile. The logotype "alflow" is set in lowercase teal with a bright teal "a". + +Page structure from the capture: a header with the logo, links (หน้าแรก, ผลิตภัณฑ์, ราคา, นักพัฒนา, ติดต่อเรา), "เข้าสู่ระบบ" and a dark "ทดลองใช้ฟรี" pill button; a hero with a pill badge ("AI OCR อัจฉริยะ เพื่อธุรกิจยุคใหม่"), the h1 "เสกทุกเอกสารให้พร้อมใช้ เลิกเสียเวลาทำเป็นวันๆ ด้วย OCR ที่ดีที่สุด เพียง 999 บาท", three check-marked benefits, two buttons and a product mock card showing extracted fields with "98.5%" and "1.2 วินาที" chips; a dark trust section with ISO 27001 and ISO 29110 cards; a "Who is it for?" section with three cards; and a "Custom Templates" section. Part of the h1 is colored in a lighter teal for emphasis. + +## Colors +- **canvas** and **primary** `#013c46`: deep teal; the fill of the hero button, the dark section and the h1 text color. +- **page-body** `#ffffff` and **on-primary**: white; the largest background (4397 area weight) and button text. +- **ink** `#ffffffcc`: translucent white text on the dark section; **ink-on-dark-muted** `#ffffffb2` for paragraphs there (373 characters). +- **ink-secondary** `#4a5859`: secondary text on white (822 characters), the site's `--color-text-secondary`. +- **ink-nav** `#111111`: navigation link color. +- **ink-cool-grey** `#cad5e2`: light blue-grey text. +- **surface-slate** `#0f172a`: dark slate background (921 area weight). +- **hairline** `#ffffff1a`: 10% white; used for glass card fills and 1px borders on the dark section. +- **accent-teal** `#31cfcc` and **accent-mint** `#86f9b3`: bright teal and mint, measured as text colors (121 and 80 characters); the teal also appears in `0 0 20px #31cfcc4d` and `0 0 40px #31cfcc80` glow shadows. +Other measured values include `#f8fafb` (a pale section background), `#e5e7eb` and `#f5f5f5` borders. + +## Typography +The font stack is Inter, "Inter Fallback", "Noto Sans Thai", "Noto Sans Thai Fallback", system-ui, sans-serif. Inter loads as a variable font (100 to 900) and Noto Sans Thai at weights 400, 500 and 700, so Thai glyphs come from Noto Sans Thai. The page also declares `--font-mono` as "JetBrains Mono", "Fira Code", monospace. +- **display** 48.8px, weight 700, line height 58.56px, letter spacing -0.976px (h1). +- **heading** 39.04px / 700 / 46.848px, -0.7808px (the trust-section h2). +- **subheading** 31.2px / 700 / 37.44px, -0.624px ("ISO 27001"). +- **body** 14px / 400 / 22.75px. +- **button** 18px / 600 / 28px. +- **nav** 16px / 400 / 25.6px. +Sizes by character count: 14px (991), 20px (816), 16px (673), 18px (378), 39.04px (264), 31.2px (180). Root variables include `--text-h2` 2.44rem, `--text-h4` 1.56rem and `--text-h6` 1rem, which match the measured scale. + +## Layout +Measured at 1280px wide. The header is 86px tall with 20px vertical padding. The hero h1 box is 584px wide, leaving room for the product mock-up on the right. Sections alternate light and dark, with a curved boundary between the hero and the dark band. Spacing tokens (4, 6, 8, 10, 12, 16, 20, 24, 32, 40px) come from measured paddings and gaps. The site uses Tailwind: root variables such as `--container-md` 28rem and `--tw-*` appear. + +## Elevation & Depth +Layers are soft and diffuse. The hero secondary buttons carry `rgba(0,0,0,0.1) 0px 16px 48px` and `rgba(0,0,0,0.08) 0px 8px 32px`; the ISO glass cards carry `rgba(0,0,0,0.25) 0px 25px 50px -12px`. `--shadow-md` is `0 4px 12px #0000000f`. Teal glows (`0 0 20px #31cfcc4d`, `0 0 40px #31cfcc80`) are measured as well. Translucent white fills (`#ffffff1a`, `#ffffff4d`, `#ffffff0d`) give frosted-glass panels. + +## Shapes +Rounded to the extreme: 9999px (41 uses) for pills and circles, 32px (35) for buttons, 24px (31) for cards, then 4px, 16px, 40px, 10px and 48px. The two CTA buttons in the capture are 32px radius; the extractor's primary candidate (an anchor) measured 0px radius, but the button element with the same label measured 32px, which is what the capture shows. + +## Components +- **button-primary**: teal `#013c46` fill, white text, 18px / 600, radius 32px (rounded 2xl), padding 16px 32px, height 60px, label "ทดลองใช้เลย" with an arrow. +- Outlined button: white fill, teal text, 1px `#f5f5f5` border, radius 32px, 16px 32px padding, label "ติดต่อเรา". +- **card**: translucent glass `#ffffff1a`, 24px radius, 1px `#ffffff80` border for the ISO cards (304px by 423px). +- **nav**: 20px vertical padding, teal text on the active item with an underline, `#111111` links at 16px. +- Badges: pill chips with a small icon ("AI OCR อัจฉริยะ", "ความน่าเชื่อถือและมาตรฐานสากล", "Custom Templates", "WHO IS IT FOR?"). + +## Design System Architecture +No public design system or brand guideline was found: /about, /brand and /press return 404 and the home page links none. The de-facto system is a Tailwind v4 build with custom properties (`--color-text-secondary`, `--text-h2`, `--font-body`, `--font-mono`, `--shadow-md`) plus Tailwind palette variables such as amber-400, orange-600, slate-900 and green-100 (utility palette, not brand tokens). + +## Do's and Don'ts +- Do use `#013c46` for primary actions and dark sections. +- Do use pill or 32px radii on buttons and 24px on cards. +- Do highlight part of a headline in bright teal. +- Do pair Thai headlines with Inter and Noto Sans Thai at weight 700. +- Don't use sharp-cornered buttons. +- Don't use heavy dark shadows on light cards. +- Don't treat the Tailwind utility palette as brand colors. + +## Responsive Behavior +A 390px mobile pass was measured: the h1 stays 48.8px / 700 / 58.56px (box 342px wide by 351px high), body text stays 14px / 400 / 22.75px, and the primary link is unchanged at 191px by 62px. Navigation changes and breakpoints were not measured. + +## Iteration Guide +1. Use teal `#013c46` and white; add `accent-teal` for emphasis words. +2. Round buttons to 32px, cards to 24px. +3. Keep headings at 700 with slight negative tracking. +4. Use glass fills (`hairline`) only on the dark section. +5. Verify new values against `web/data/extracted/alflow-ocr.json`. + +## Imagery and Voice +There is no photography in the captured area. Imagery is interface illustration: a browser-style mock card with a teal title bar and three dots, rows of extracted fields (company name, tax-id style number, amount "฿ 125,000.00", a Thai Buddhist-era date "15 พ.ย. 2567") and floating white chips that give "98.5%" accuracy and "1.2 วินาที" processing time. The trust section shows two certification badges inside frosted cards, each with a small green "รับรองมาตรฐาน" chip, the standard name set large in white bold, and a one-line Thai description. Pastel rounded-square icon tiles (mint, pale green, grey-blue) top each audience card. + +Voice is direct and benefit-led in Thai, with a price anchor in the headline ("เพียง 999 บาท"). Benefits are short checklist lines (reduce repeated typing and raise data accuracy; work faster and save team effort; connect extracted data to existing systems). The trust heading promises data security "ด้วยมาตรฐาน ISO 27001 29110", with the standard numbers set in italic bright teal. The audience section asks "Alflow OCR ตอบโจทย์ใครบ้าง?" and answers with three card types: businesses burdened by document volume, accounting, sales, legal, customer-service and HR teams, and organisations starting digital transformation. English is used for product terms and small uppercase labels such as "WHO IS IT FOR?" and "Drag to Select". diff --git a/skills/scd-uiux/data/vendor/design-systems/library/algolia/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/algolia/DESIGN.md new file mode 100644 index 0000000..34c8436 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/algolia/DESIGN.md @@ -0,0 +1,283 @@ +--- +version: alpha +name: Algolia +category: "Developer Tools & IDEs" +description: "Algolia's marketing site: Sora bold display at 70px with -4px tracking over deep navy #000033 and #06133d bands, Inter for navigation and UI, a #003dff blue Get started action and white-outlined Fix your search button at 56px tall with 8px radius, light #f6f6f6 content bands with #23263b headings and #2563eb card titles." +colors: + canvas: "#f6f6f6" + page-largest: "#000033" + ink: "#374151" + primary: "#003dff" + on-primary: "#ffffff" + surface-navy-deep: "#06133d" + ink-on-dark: "#ffffffe6" + ink-heading: "#23263b" + accent-blue: "#2563eb" + ink-link: "#484c7a" + hairline: "#0f11284d" + search-button-border: "#000000" + nav-accent: "#457aff" + focus-ring: "#bfdbfe" +typography: + display: + fontFamily: Sora, sans-serif + fontSize: 70px + fontWeight: 700 + lineHeight: 73.5px + letterSpacing: "-4px" + display-mobile: + fontFamily: Sora, sans-serif + fontSize: 40px + fontWeight: 700 + lineHeight: 42px + letterSpacing: "-4px" + heading: + fontFamily: Sora, sans-serif + fontSize: 42px + fontWeight: 700 + lineHeight: 55.008px + letterSpacing: "-0.42px" + body: + fontFamily: Sora, sans-serif + fontSize: 20px + fontWeight: 400 + lineHeight: 31px + button-search: + fontFamily: Inter, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + nav: + fontFamily: Inter, sans-serif + fontSize: 14px + fontWeight: 600 + lineHeight: 20px + link: + fontFamily: Inter, sans-serif + fontSize: 18px + fontWeight: 700 + lineHeight: 29.25px + button-outline: + fontFamily: Sora, sans-serif + fontSize: 16px + fontWeight: 600 + lineHeight: 24px + letterSpacing: 0.32px +rounded: + xs: 2px + sm: 2.5px + md: 3px + lg: 5px + xl: 6px + 2xl: 8px + 3xl: 10px + 4xl: 16px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 6px + s4: 6.4px + s5: 7.2px + s6: 8px + s7: 10px + s8: 12px + s9: 14px + s10: 16px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + rounded: "{rounded.2xl}" + height: 56px + button-outline: + textColor: "{colors.on-primary}" + typography: "{typography.button-outline}" + rounded: "{rounded.2xl}" + padding: 0px 24px + height: 56px + borderColor: "{colors.on-primary}" + boxShadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 61, 255, 0.12) 0px 0px 6px 2px + button-search: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.on-primary}" + typography: "{typography.button-search}" + rounded: "{rounded.xl}" + padding: 8px 16px + height: 42px + borderColor: "{colors.search-button-border}" + link: + textColor: "{colors.ink-link}" + typography: "{typography.link}" + nav: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.nav-accent}" + nav-link: + textColor: "{colors.nav-accent}" + typography: "{typography.nav}" + card: + backgroundColor: "{colors.on-primary}" + rounded: "{rounded.2xl}" + padding: 24px + boxShadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(199, 210, 254) 0px 10px 15px -3px, rgb(199, 210, 254) 0px 4px 6px -4px + transform: matrix(1, 0, 0, 1, 0, -32) + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.on-primary}" +--- + +# Algolia + +## Overview + +algolia.com presents Algolia as "The AI search and retrieval platform" (page title). The home page alternates dark navy +bands and light grey bands down a 4,843px desktop scroll. It opens with a gradient news strip ("Algolia acquires +Velou…"), a navy utility bar ("Join us: Gartner IT Symposium/Xpo™ 2026" on the left; Company, Partners, Support, Login +and a language picker on the right), and the main navigation: the Algolia wordmark, Products, Solutions, Pricing, +Developers, Resources, a rounded search field, a white-outlined **Fix your search** button and a blue **Get started** +button. + +The hero is set on #000033 navy: "Agentic. Generative. Search>_" in huge white Sora bold with a cyan terminal-prompt +glyph, a short subline ("Built to optimize outcomes for every goal you set"), and on the right a composite of a +glowing code panel ("Agentic EXPERIENCES", a `curl` request and JSON), a pill-shaped "AI agent shopping assistant" +search chip with a blue microphone button, and a photo of a smiling developer at a laptop. + +Following bands: "Powering AI retrieval across use cases" on light grey with an accordion of capabilities; an +"ANALYST RECOGNITION" band on #06133d with a hypnotic concentric-ring visual carrying Forrester, IDC, Gartner and +Paradigm B2B marks; "Solutions that fulfill your business goals" with a photo and five white cards whose titles are blue; +"See customer success in action" with an eight-tile grid of customer photos and white logos (Club Med, DocMorris, +Huckberry, fern, Shoe Carnival, DonorsChoose, Arc'teryx and one more); a closing "Harness the power of goal driven AI +search with Algolia" band on a dark blue gradient; and a navy footer. The voice is enterprise-confident and +AI-forward: short noun-stacked headlines, outcome-driven sublines. + +The capture also shows a cookie-consent dialog and an "Ask us" chat bubble. Both are third-party overlays and are not +documented as brand UI here. + +## Colors + +- **Navy** — `page-largest` #000033 is the largest painted area: hero, navigation, the closing CTA band and the + footer. `surface-navy-deep` #06133d is the second-largest area (the analyst-recognition band). +- **Light bands** — `canvas` #f6f6f6 is the body background and the light content bands; #ffffff fills cards. +- **Brand blue** — `primary` #003dff. Measured as the Get started button's hover fill (rgb(0, 61, 255)), as the hover + text color of every primary nav item (Products, Solutions, Developers, Resources), and as a border color. The + outline button carries a soft glow of the same blue at 12% opacity. +- **Accent blue** — `accent-blue` #2563eb is a frequent text color (card titles such as "Quickly surface the right + content" and inline blue headings). +- **Ink** — `ink` #374151 is the most-read readable text on light bands; `ink-heading` #23263b sets section headings + ("Powering AI retrieval across use cases"); `ink-link` #484c7a is the bold "Learn more" link color. +- **On dark** — white #ffffff for headlines and buttons on navy; `ink-on-dark` #ffffffe6 (90% white) for hero and + band body copy. +- **Utility bar accent** — `nav-accent` #457aff colors "Join us:" in the utility bar. +- **Hairline** — `hairline` #0f11284d (navy at 30% alpha) separates accordion rows and list items. +- **Focus** — `focus-ring` #bfdbfe is the 2px focus outline (offset 2px) measured on the "AI mode" button. + +## Typography + +Two families are self-hosted from `/modules/algolia-base-template/css/fonts/`: + +- **Sora** (300, 400, 600, 700) — every headline and most body copy. Display: **70px / 73.5px, weight 700, + letter-spacing -4px** (the hero). Section headings: **42px / 55.008px, 700, -0.42px**; other measured heading sizes + include 52px, 48px and 46px. Body: **20px / 31px, 400** in the hero and band paragraphs. Outline button: **16px / + 24px, 600, +0.32px**. +- **Inter** (400, 500, 600, 700) — navigation and UI. Nav and utility links: **14px / 20px, 600**. Bold inline links: + **18px / 29.25px, 700**. The search panel's button: **16px / 24px, 400**. The body element default is Inter 16px/26px + weight 500. + +Sora carries 4,162 measured characters against Inter's 1,867. Cabin and Montserrat are also loaded but do not appear in +the visible-text frequency measurement. Headlines are sentence case with tight negative +tracking; the only uppercase label is the small eyebrow "ANALYST RECOGNITION". + +## Layout + +At 1280px the page is a sequence of full-width bands (measured y / height): media header 0/120, navy hero 120/631, +light use-case band 751/941, navy-deep analyst band 1692/701, a three-column solutions band 2393/633, light customer +band 3026/334, a media strip 3360/462, light band 3822/212, closing CTA band 4034/470 and navy footer 4504/339. The +header shows 9 visible links. Content is left-aligned in the hero and analyst bands and centred for section titles. +Cards in the solutions row sit five across over a photograph; the customer grid is four tiles per row. The measured +spacing scale runs 2, 4, 6, 6.4, 7.2, 8, 10, 12, 14 and 16px; cards use 24px padding. + +## Elevation & Depth + +- **Lifted card** — the highlighted solution card uses a periwinkle shadow (`rgb(199, 210, 254) 0px 10px 15px -3px`, + `rgb(199, 210, 254) 0px 4px 6px -4px`) and is translated up 32px (`matrix(1, 0, 0, 1, 0, -32)`) relative to its row. +- **Outline button glow** — `rgba(0, 61, 255, 0.12) 0px 0px 6px 2px`. +- **Panels** — a large soft navy shadow (`rgba(15, 17, 40, 0.18) 0px 24px 48px -12px`) appears once. +- Depth on dark bands comes from glows, gradients and the concentric-ring artwork rather than from shadows. + +## Shapes + +The most frequent radius is **8px** (buttons and cards), followed by **10px**, **6px** (the search panel button) and +**3px**. **16px** and **9999px** occur on a few elements (the search field and chips are pill-shaped in the capture), +and **2px**, **2.5px** and **5px** appear on small details. Avatars and icon buttons use 50% / 100%. Corners are +moderate: nothing on the page is square, and nothing large is fully rounded except pill controls. + +## Components + +- **Get started (primary)** — white text, 8px radius, 56px tall in the header. At rest its fill is painted by a + background image (the measured background-color is transparent; the capture shows a blue gradient); on hover the + fill becomes solid #003dff. +- **Fix your search (outline)** — transparent with a 2px white border, Sora 16px/600 white text with +0.32px tracking, + 8px radius, 56px tall, 0 24px padding, and the 12% blue glow. +- **Search panel button** — "Show more results": #000033 fill, 1px black border, Inter 16px/400, 6px radius, 42px + tall, 8px 16px padding. It belongs to the site-search panel, not the page's main call to action. +- **Navigation** — navy bar, white Inter links that turn #003dff on hover; utility bar with #457aff "Join us:". +- **Accordion list** — capability rows separated by navy hairlines; the open row shows a blue title, a description and + a "Learn more" link, inside a white card. +- **Solution cards** — white, 8px radius, 24px padding, blue Sora titles and grey body text; the active card lifts + 32px with a periwinkle shadow. +- **Customer tiles** — full-bleed photographs with white customer logos. +- **Footer** — navy, white Inter 14px links (Careers, Contact Us, About Algolia, Anti-Modern Slavery Statement), social + icons and a newsletter prompt. + +## Design System Architecture + +Algolia's about page links "Brand guidelines" to https://algolia.frontify.com/ (a Frontify portal titled "Algolia +Style Guide"; its contents did not render without an interactive session, so no values are taken from it) and a logo +pack at https://www.algolia.com/algolia-logo-pack.zip. The public GitHub org (https://github.com/algolia) publishes +the InstantSearch and Autocomplete UI libraries but no repository for the marketing site's design tokens. + +The shipped page shows the working system: fonts live under `algolia-base-template`, and `:root` carries the +Autocomplete library's `--aa-*` variables (`--aa-primary-color-rgb: 62,52,211`, `--aa-search-input-height: 44px`, +`--aa-panel-shadow`, `--aa-font-weight-*`) for the site search, plus `--esw*` variables from the chat widget. The +marketing palette itself (navy #000033, #06133d, blue #003dff, #2563eb, greys #374151 / #6b7280 / #111827) is not +exposed as named variables in `:root`. + +## Do's and Don'ts + +**Do** +- Set headlines in Sora bold with tight negative tracking; keep Inter for navigation and small UI. +- Alternate navy (#000033 / #06133d) and light grey (#f6f6f6) bands to pace the page. +- Use #003dff for the main action and hover states; pair it with a white-outlined secondary button on dark bands. +- Show the product as code, search chips and AI assistant UI alongside real people. +- Use 8px radii for buttons and cards. + +**Don't** +- Don't document the cookie dialog or the "Ask us" chat bubble as brand components. +- Don't use the search panel's navy "Show more results" button as the page CTA style. +- Don't set long body copy in Inter at the 70px display scale, and don't uppercase headlines. +- Don't put heavy black shadows on cards; elevation is a pale periwinkle shadow or a blue glow. + +## Responsive Behavior + +Measured at 390px: + +- Display heading: Sora **40px / 42px**, 700, -4px tracking (from 70px). Section heading: **34px / 44px**, -0.34px. + Body: **16px / 25.6px** (from 20px / 31px). +- The header is 80px tall, navy, with a `rgba(0, 0, 0, 0.1) 0px 1px 20px 0px` shadow; 1 header link was visible and + no menu toggle was detected by the extractor. +- Bands keep their order: navy hero 0/667 (content 16–374), light use-case band 667/1278 (32–358), navy-deep band + 1945/1033, solutions band on #eeeeee 2978/372, customer band on #eeeeee 3583/1291, closing CTA 5492/432 and footer + 5924/429. Each band recorded 1 content column. +- The search panel button keeps its 42px height and 6px radius. + +Card-row behaviour beyond the single recorded column was not measured. + +## Iteration Guide + +1. Start with a #000033 navy hero; set the headline in Sora 700 at 70px/73.5px with -4px tracking in white. +2. Add the header: wordmark, Inter 14px nav links that hover to #003dff, a pill search field, an outlined white button + and a blue Get started button, both 56px tall with 8px radius. +3. Follow with a #f6f6f6 band, a #23263b Sora 42px heading, and white 8px cards with 24px padding and blue titles. +4. Insert a #06133d band for proof points (analyst marks, metrics) with white Sora headings at 52px. +5. Use photography of people and product UI composites; keep glows and gradients to dark bands. +6. On mobile, scale display to 40px/42px, headings to 34px/44px and body to 16px/25.6px. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/alibaba/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/alibaba/DESIGN.md new file mode 100644 index 0000000..98036db --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/alibaba/DESIGN.md @@ -0,0 +1,185 @@ +--- +version: alpha +name: Alibaba.com +category: "Design Systems" +description: "Alibaba.com is a dense B2B marketplace set in Alibaba_B2B_Sans: white canvas, #222222 ink, Alibaba orange (#ff6600) pill buttons at 36px tall, promo tiles in #fff3ea tints, product cards with 8px radius and bold price lines, and its own --pc-* and --color-* token layer exposed as CSS variables on the page." + +colors: + canvas: "#ffffff" + ink: "#222222" + surface-dim: "#f4f4f4" + surface: "#f8f8f8" + ink-strong: "#000000" + ink-helper: "#767676" + support-green: "#22891f" + promo-red: "#ff4014" + ink-secondary: "#666666" + hairline: "#dddddd" + primary: "#ff6600" + accent-secondary: "#fa6400" + accent-primary: "#d64000" + on-primary: "#ffffff" + overlay: "#000000b3" +typography: + display: + fontFamily: Alibaba_B2B_Sans, Inter, "SF Pro Text", Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei" + fontSize: 28px + fontWeight: 700 + lineHeight: 38px + subheading: + fontFamily: Alibaba_B2B_Sans, Inter, "SF Pro Text", Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei" + fontSize: 20px + fontWeight: 700 + lineHeight: 26px + link: + fontFamily: Alibaba_B2B_Sans, Inter, "SF Pro Text", Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei" + fontSize: 16px + fontWeight: 600 + lineHeight: 24px + input: + fontFamily: Alibaba_B2B_Sans, Inter, "SF Pro Text", Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei" + fontSize: 16px + fontWeight: 400 + lineHeight: 22px + body: + fontFamily: Alibaba_B2B_Sans, Inter, "SF Pro Text", Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei" + fontSize: 14px + fontWeight: 400 + lineHeight: 18px + button: + fontFamily: Alibaba_B2B_Sans, Inter, "SF Pro Text", Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei" + fontSize: 14px + fontWeight: 600 +rounded: + xs: 2px + sm: 8px + md: 12px + lg: 16px + xl: 18px + 2xl: 20px + 3xl: 100px + 4xl: 108px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 4px + s4: 6px + s5: 8px + s6: 10px + s7: 12px + s8: 16px + s9: 19px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 0px 24px + height: 36px + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + nav: + textColor: "{colors.ink}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.display}" + padding: 0px 3px 0px 0px + text-input: + textColor: "{colors.ink}" + typography: "{typography.input}" + height: 22px + product-card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.sm}" +--- + +## Overview + +Alibaba.com is a business-to-business marketplace, and its homepage is built for scanning rather than for atmosphere. A white header carries the wordmark, a delivery-country selector, cart, account and a "Create account" button in Alibaba orange; beneath it a row of large tabs (AI Mode, Products, Manufacturers, Worldwide) leads into a search box with an image-search affordance and an orange Search button. Below that sit a category list on the left, a promotional carousel on the right, and then a long, dense grid of product cards. In the captured screenshot a promotional modal ("Negotiate effortlessly with AI", with a white "Try for free" pill) dims the top of the page under a black overlay; this file describes the underlying page and treats the modal as a promo pattern, not as the canvas. + +The voice is transactional and numeric: "MOQ: 10 pieces", "THB 34.29", "412 sold", "Verified · 1 yr · CN", "FREE shipping", "10% off". Product photography is supplier-supplied, on white or lightly coloured backgrounds, with no art direction beyond a consistent square crop. Colour is reserved for commercial signals: orange for actions, promotion red for discounts, green and blue for trust badges. + +**Key Characteristics:** +- Alibaba orange (`{colors.primary}`) as the single action colour, in pill buttons. +- A dense five-column product grid with bold price lines and small grey metadata. +- Tinted promotional tiles (peach, lilac, plum) set against an otherwise neutral page. +- Trust badges ("Verified", "Guaranteed", "Easy Return") as small coloured labels on cards. +- A proprietary typeface, Alibaba_B2B_Sans, with system fallbacks and Chinese-language fallbacks. + +## Colors + +The neutrals form a layered grey scale: `{colors.canvas}` white for cards and the header, `{colors.surface}` and `{colors.surface-dim}` for page bands and the category panel, `{colors.hairline}` for dividers and outlines. Text steps from `{colors.ink-strong}` (pure black, used in headings on some blocks) and `{colors.ink}` (the default read colour) down through `{colors.ink-secondary}` to `{colors.ink-helper}`, the grey of helper text and metadata. + +Orange is the brand colour. The "Create account" button measured `{colors.primary}` with `{colors.on-primary}` text (a probe of the live page, recorded in SOURCES.json). The page also exposes `--color-accent-secondary` (`{colors.accent-secondary}`) and `--color-accent-primary` (`{colors.accent-primary}`, a deeper red-orange used behind a Sign in button), so the orange family has at least three measured steps. `{colors.promo-red}` is the red-orange for discounts and free-shipping labels, and `{colors.support-green}` is the green used on guarantee text. `{colors.overlay}` is the black scrim at 70% opacity behind modals (also published as `--color-add-on-overlay`). + +The root variables also name semantic groups for business badges (local, guaranteed, customize, ranking, buyer-AI) and support states (error, warning, success, notice), each with a container tint; they confirm that colour is organised by commercial meaning. + +## Typography + +One family is loaded, Alibaba_B2B_Sans, in weights 400, 500, 600 and 700; the declared stack continues with Inter, SF Pro Text, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC and Microsoft YaHei. Because the primary face is proprietary, use Inter as the substitute. + +- **Display (`{typography.display}`)**: 28px, weight 700, line-height 38px; the large tabs and block headings. +- **Subheading (`{typography.subheading}`)**: 20px, weight 700, line-height 26px. +- **Link (`{typography.link}`)**: 16px, weight 600, line-height 24px. +- **Input (`{typography.input}`)**: 16px, weight 400, line-height 22px. +- **Body (`{typography.body}`)**: 14px, weight 400, line-height 18px, the default size for card text (the site declares `--pc-body-font-size` as 14px). +- **Button (`{typography.button}`)**: 14px, weight 600. + +The root variables define a full scale: display sizes 28px–36px (large 36px with 48px line height), heading sizes 16px–24px, body 14px and caption 12px with 16px line-height. Tracking is 0 throughout. Compactness is the point: 14px body with 18px leading lets a card show title, price, MOQ and supplier in about a hundred pixels. + +## Layout + +A fixed content width of 1440px (the `--floorWrapperWidth` variable) holds floors, the sections the page is built from: header, search, category and carousel block, promotional pair, then the product grid. The grid has five columns at desktop width, each card showing a square image, a two-line title, optional badges, a price, MOQ and sold count, and a supplier line. Section headings are centred with thin rules ("Recommended for your business"). Spacing follows the site's `--pc-spacing-*` scale: 2px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px and 48px; the generated spacing tokens (`{spacing.s5}` 8px, `{spacing.s8}` 16px, `{spacing.s10}` 20px) are the subset measured on the page. + +## Elevation & Depth + +Depth is light. The most frequent measured shadow is `rgba(0, 0, 0, 0.12) 0px 2px 6px 2px`, the most frequently measured (66 uses), with softer layered shadows for larger panels (`rgba(0, 0, 0, 0.05) 0px 4px 20px`). Hover and press states are expressed as black overlays at 8% and 12% opacity (`--color-add-on-hover`, `--color-add-on-press`). One element also carries a white inset glow shadow. Most separation, however, comes from `{colors.surface-dim}` bands and `{colors.hairline}` outlines. + +## Shapes + +The radius scale is `{rounded.xs}` 2px, `{rounded.sm}` 8px, `{rounded.md}` 12px, `{rounded.lg}` 16px, `{rounded.xl}` 18px, `{rounded.2xl}` 20px, `{rounded.3xl}` 100px, `{rounded.4xl}` 108px and `{rounded.pill}`. The root variables use the names `--pc-radius-*` for desktop and `--app-radius-*` for the mobile app. Product cards and images use 8px; the search container 18px; buttons and badges are fully round pills. + +## Components + +**button-primary** — the "Create account" pill: `{colors.primary}` fill, `{colors.on-primary}` text, `{typography.button}`, `{rounded.pill}`, padding 0px 24px, height 36px. A "Sign in" button uses the deeper `{colors.accent-primary}` with 40px height and 16px side padding. + +**product-card** — white, `{rounded.sm}`, text in `{colors.ink}`; price in bold, metadata in `{colors.ink-helper}`, badges in `{colors.promo-red}` or `{colors.support-green}`. + +**text-input** — the search field, text `{colors.ink}`, `{typography.input}`, inside an 18px-radius container with a red-orange outline and an orange Search button. + +**nav-link** — the large tabs in `{typography.display}`, `{colors.ink}`, the active tab coloured orange in the capture. **link** — 16px, weight 600. + +**Promo tiles** — "First order deal" in plum and "Alibaba Guaranteed" in brown-maroon, each holding three white product cards. + +## Design System Architecture + +No public Alibaba.com design system documentation was found. The site's own pages expose the de-facto system: 132 CSS custom properties on the root (some are Tailwind internals), in four main families. `--color-*` carries semantic colour roles (layer, on-layer, outline, accent, support, business, add-on); `--pc-*` carries desktop type, spacing and radius scales (`--pc-heading-m-font-size`, `--pc-spacing-xl`, `--pc-radius-m`); `--app-radius-*` carries the app radius scale; and `--rc-*` carries tokens for a third-party component. The naming follows a Material-like pattern, with a "container" and "on-container" pair for each tint and an "inverse" mirror for dark surfaces. + +The `dsUrl` supplied for this brand, [ant.design](https://ant.design), is not Alibaba.com's design system. I opened it and its introduction page ([ant.design/docs/spec/introduce](https://ant.design/docs/spec/introduce)): the introduction attributes the system to Ant Financial's user-experience design team ("Ant User-Experience Design Team builds a design system for enterprise products based on four design values of Natural, Certain, Meaningful, and Growing"). It is a design system for Ant's enterprise products, and I found no statement that Alibaba.com uses it. Alibaba.com's measured fonts, colours and radii do not match it either. It is therefore not used here. Alibaba Group's own corporate page ([alibabagroup.com](https://www.alibabagroup.com/en-US/about-alibaba-brand)) was opened and contains no brand guidelines. + +## Do's and Don'ts + +- Do keep orange for actions only, in pill buttons with 24px side padding. +- Do show price in bold and metadata in `{colors.ink-helper}` at 14px or smaller. +- Do use tint pairs (a pale container with a dark on-container text) for badges and promo tiles. +- Don't add decorative imagery between product rows; the grid is the content. +- Don't use more than one orange shade in a single component. +- Don't use Ant Design tokens or components as if they were Alibaba.com's. +- Don't set body copy above 16px; the density depends on 14px and 18px leading. + +## Responsive Behavior + +The extractor's 390px mobile measurement returned the same desktop values: the "AI Mode" heading stayed at 28px (weight 700, 38px line-height) and the navigation element still measured 960px wide, so the desktop page did not reflow in that measurement. No mobile-specific type scale or column count was captured. The page does declare a separate `--app-radius-*` scale and mobile-oriented variables (such as `--rc-drag-handle-mobile-size`), which hints at an app layer, but its layout is not described here because it was not measured. + +## Iteration Guide + +1. Start with a white canvas and a `{colors.surface-dim}` band; place content in a 1440px floor. +2. Use `{colors.primary}` on one pill per section; use tint containers for secondary promotions. +3. Set card text at `{typography.body}` and prices in bold. +4. Draw radii from the 8px / 12px / 16px steps; keep pills for buttons and badges. +5. Check any new value against the page's own `--color-*` and `--pc-*` variables before adding a token. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aliexpress/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aliexpress/DESIGN.md new file mode 100644 index 0000000..9f34870 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aliexpress/DESIGN.md @@ -0,0 +1,193 @@ +--- +version: alpha +name: AliExpress +category: "Retail & E-commerce" +description: "AliExpress Thai storefront: white canvas, TT Norms Pro 12-14px text, red #f00633 prices and #fd384f brand red, grey #f5f5f5 pill category button with 30px radius, black 40px buttons and 8px panels." +colors: + canvas: "#ffffff" + ink: "#191919" + primary: "#f5f5f5" + on-primary: "#191919" + ink-body: "#666666" + price-red: "#f00633" + ink-heading: "#222222" + ink-slate: "#606472" + ink-grey: "#757575" + hairline: "#0000001a" + brand-red: "#fd384f" + button-black: "#000000" + nav-text: "#3a3e4a" + footer-text: "#333333" +typography: + display: + fontFamily: "\"TT Norms Pro\", \"Open Sans\", Roboto, Arial, Helvetica, sans-serif, SimSun" + fontSize: 32px + fontWeight: 700 + display-mobile: + fontFamily: "\"TT Norms Pro\", \"Open Sans\", Roboto, Arial, Helvetica, sans-serif, SimSun" + fontSize: 24px + fontWeight: 700 + lineHeight: 31px + heading: + fontFamily: "\"TT Norms Pro\", \"Open Sans\", Roboto, Arial, Helvetica, sans-serif, SimSun" + fontSize: 21px + fontWeight: 700 + body: + fontFamily: "\"TT Norms Pro\", \"Open Sans\", Roboto, Arial, Helvetica, sans-serif, SimSun" + fontSize: 12px + fontWeight: 400 + lineHeight: 15.36px + button: + fontFamily: "\"TT Norms Pro\", \"Open Sans\", Roboto, Arial, Helvetica, sans-serif, SimSun" + fontSize: 16px + fontWeight: 600 + lineHeight: 20px + nav: + fontFamily: "\"TT Norms Pro\", \"Open Sans\", Roboto, Arial, Helvetica, sans-serif, SimSun" + fontSize: 14px + fontWeight: 400 + link: + fontFamily: "\"TT Norms Pro\", \"Open Sans\", Roboto, Arial, Helvetica, sans-serif, SimSun" + fontSize: 16px + fontWeight: 700 + lineHeight: 40px + button-secondary: + fontFamily: "\"TT Norms Pro\", \"Open Sans\", Roboto, Arial, Helvetica, sans-serif, SimSun" + fontSize: 16px + fontWeight: 500 +rounded: + xs: 4px + sm: 6px + md: 8px + lg: 15px + xl: 16px + 2xl: 20px + 3xl: 24px + 4xl: 30px +spacing: + s1: 2px + s2: 3px + s3: 4px + s4: 5px + s5: 6px + s6: 8px + s7: 10px + s8: 12px + s9: 16px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.4xl}" + padding: 10px 16px + height: 40px + button-secondary: + backgroundColor: "{colors.button-black}" + textColor: "{colors.canvas}" + typography: "{typography.button-secondary}" + padding: 10px 16px + height: 40px + link: + textColor: "{colors.brand-red}" + typography: "{typography.link}" + padding: 0px 16px + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.nav-text}" + nav-link: + textColor: "{colors.nav-text}" + typography: "{typography.nav}" + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.button-black}" + typography: "{typography.nav}" + padding: 0px 0px 0px 10px + height: 34px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-heading}" + rounded: "{rounded.md}" + padding: 16px + boxShadow: rgba(15, 17, 17, 0.5) 0px 0px 14px 0px + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.footer-text}" +--- + +# AliExpress + +## Overview +The measured page is the Thai storefront of AliExpress, th.aliexpress.com (the site served the Thai localisation at the global address; document language `th`, title "TH.AliExpress | AliExpress ไทย"). It is a very dense marketplace home page on a white canvas: a white 72px header with the AliExpress logo, a search bar with a black round search button, icon links, and a "มากขึ้น" menu; a full-width campaign banner whose color and artwork change with the promotion (blue in one capture, green in another, so the banner color is a campaign asset and not a token); a "free shipping for Choice items" strip; and then "ดีลของวันนี้" (today's deals) with two bordered panels, an "AliExpress Business" dark photo band with count-up statistics (5M+, 20M+, 10, 24H), a category-shopping grid with a pale blue "Viva" panel, and an endless grid of product tiles. + +The capture also shows a browser-notification permission prompt at the top left ("อนุญาตให้เว็บไซต์แจ้งเตือน"). It is a popup, and the extraction was re-run once with the popup-handling batch; it is not documented as brand UI or tokens. The side icon rail at the right edge is a utility control and is likewise excluded. + +## Colors +- **canvas** `#ffffff`: dominant background (13943 area weight); `#0000000a` (2710) is a faint grey wash used on section backgrounds. +- **ink** `#191919`: the most-read text color (8475 characters), also `--color-grey-10`. +- **ink-body** `#666666`: secondary text (8340 characters). +- **ink-heading** `#222222`: section headings. +- **ink-slate** `#606472` and **ink-grey** `#757575` (`--color-grey-6`): captions and meta text. +- **price-red** `#f00633`: prices and discount badges; the strongest accent by character count (4322). +- **brand-red** `#fd384f`: the site's `--color-brand-primary`. Related variables: `--color-brand-bg` `#ffe6e7` and `--color-brand-disable` `#ffb5bb`. The measured `#fff6f7` and `#ffcbcb` backgrounds belong to the same pink family. +- **primary** `#f5f5f5` with **on-primary** `#191919`: the detected primary button, the grey "หมวดหมู่ทั้งหมด" (all categories) pill, is a light grey fill with dark text. +- **button-black** `#000000`: the "ช้อปเลย" (shop now) button and the search button. +- **nav-text** `#3a3e4a` and **footer-text** `#333333`. +- **hairline** `#0000001a`: 1px borders on panels. +Other measured colors: `#adf1fe` pale blue (the Viva panel), `#018941` green text, `#ec0936` red text, `#cccccc`, `#ebebeb` (`--color-grey-2`), `#096` (`--color-success-primary`), and `#3170ee` (`--color-function-2-1`). `#59922b` (a campaign banner background in a later capture) is not tokenised. + +## Typography +The stack is "TT Norms Pro", "Open Sans", Roboto, Arial, Helvetica, sans-serif, SimSun, with TT Norms Pro in 400, 500, 600 and 700 and Open Sans in 400 and 700 loaded. TT Norms Pro covers the Latin text (26535 characters measured); Thai glyphs fall through to the later fonts in the stack. TT Norms Pro is a commercial typeface from Type Type; a substitute is not published by the brand. +- **display** 32px / 700 ("ดีลของวันนี้"). +- **heading** 21px / 700. +- **subheading** 24px / 700 / 31px (panel titles). +- **body** 12px / 400 / 15.36px. +- **button** 16px / 600 / 20px; **button-secondary** 16px / 500. +- **nav** 14px / 400. +- **link** 16px / 700 / 40px. +By character count, 14px (12598) and 12px (8561) dominate, then 16px (4481), 20px (524), 13px (126), 15px (117), 32px (67), 24px (36) and 21px (25). The page is small-type heavy, as is expected of a product grid; this is measured, not assumed. + +## Layout +Measured at 1280px wide. The header is 72px tall. Content panels run in two equal columns ("ดีลซื้อเป็นชุด" and "ซูเปอร์ดีล") each showing three product tiles with price, strikethrough price, discount badge, star rating and sold count. The category section is a feature panel at left and a 2 by 3 grid of image tiles at right. Below, a five-column product grid continues down the page. The page defines a spacing scale: `--s-1` 4px, `--s-2` 8px, `--s-4` 16px, `--s-6` 24px, `--s-8` 32px and `--s-16` 64px; button padding is 10px 16px and the search input has 10px left padding at 34px high. + +## Elevation & Depth +Shadows are soft and used sparingly: `0 2px 8px rgba(0,0,0,.1)`, `0 4px 20px rgba(0,0,0,.15)`, `0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05)`, plus the root `--shadow-2-down` `0px 4px 16px 0px rgba(0,0,0,0.2)` and `--shadow-1-up` `0px -1px 0px 0px rgba(0,0,0,0.1)`. The dropdown panel measured `rgba(15, 17, 17, 0.5) 0px 0px 14px 0px` at 8px radius with 16px padding. Product panels rely on 1px hairline borders instead of shadows. + +## Shapes +Root variables: `--corner-s` 8px, `--corner-m` 16px, and for the mobile set `--m-corner-xs` 2px and `--m-corner-xl` 500px. Measured radii: 24px (8 uses), 4px (5), 20px (3), 15px (2), 8px, 16px, 30px and 6px. The primary pill button is 30px; panels 8px; the badge corners 4px. + +## Components +- **button-primary**: `#f5f5f5` fill, `#191919` text, 16px / 600, radius 30px, padding 10px 16px, 40px high. +- **button-secondary**: black fill, white text, 16px / 500, 0px radius, 40px high, padding 10px 16px. +- **text-input**: white, black 14px text, 34px high, 10px left padding. +- **nav**: white, `#3a3e4a` text at 14px. +- **card**: white, 8px radius, 16px padding. +- Product tile: image, 2-line title, price in red bold, strikethrough list price in grey, star rating and "ขายแล้ว" (sold) count, red percentage badge such as "-51%". + +## Design System Architecture +No public design system or brand-guideline page was found on the opened pages (the Thai home page markup contains no brand, press or design links). The site exposes a large token set as root variables: `--color-brand-*`, `--color-grey-*`, `--color-function-*`, `--color-mask-*`, `--font-size-1` through `-10` (for example `--font-size-5` 24px, `--font-size-10` 60px), `--font-lineheight-*`, `--s-*`, `--corner-*`, `--line-*`, `--icon-*` and paired `--m-*` variants for mobile (`--m-font-size-5` 12px, `--m-s-8` 16px). This paired mobile token set is the de-facto system. + +## Do's and Don'ts +- Do show prices in red bold with a grey strikethrough list price. +- Do keep body text at 12px to 14px on white. +- Do use pale pink or blue panel fills for themed sections. +- Do round the primary pill to 30px. +- Don't use shadows for product tiles; use hairline borders. +- Don't treat campaign banner colors as tokens. +- Don't document the notification prompt or side rail. + +## Responsive Behavior +Not measured. The extractor's mobile pass returned boxes as wide as the desktop page (a 1056px body paragraph), so no usable mobile layout was recorded. The only responsive evidence is the existence of paired `--m-*` root variables, whose use was not measured. + +## Iteration Guide +1. Use white canvas, `#191919` ink, `#f00633` prices. +2. Build tiles with image, title, price row, rating and sold count. +3. Keep corners small (4px to 8px) except for pills (30px). +4. Check new values against `web/data/extracted/aliexpress.json` or the root variables. +5. Treat banners as campaign content. + +## Imagery and Voice +Photography is product-first on white or lifestyle backdrops: fashion models in the category grid, kitchen and tool items on the Business band, small 3-up product rows in each deal panel. Microcopy is transactional Thai with currency symbols (฿), for example "3 ชิ้นในราคาเริ่มต้น US $2.99", "ส่งฟรี สำหรับสินค้า Choice ทุกชิ้น" and "ดูเพิ่มเติม". Badges are short: "Choice", "Verified", percentage discounts. + +Section titles are centered, bold and black, such as "การช้อปตามหมวดหมู่" (shopping by category) and "อื่นๆ อีกมากมายสำหรับรายการโปรดของคุณ" (many more for your favorites), which separate the long page into clearly labeled blocks. The "AliExpress Business" band overlays white text and large figures on a dimmed photograph, the only dark block on the page. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/all-energy-utilities/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/all-energy-utilities/DESIGN.md new file mode 100644 index 0000000..925b65e --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/all-energy-utilities/DESIGN.md @@ -0,0 +1,170 @@ +--- +version: alpha +name: All Energy and Utilities +category: "Thai Brands" +description: "All Energy and Utilities (AE, aeu.co.th), a Thai renewable-energy and utilities group, uses plum #571731 and #4c192b surfaces, rose-gold #b58b76 accents, grey #a1a1a1 body text and Sukhumvit Set and Outfit stacks, with a 75px bold hero heading and 50px pill buttons." +colors: + canvas: "#571731" + page-body: "#ffffff" + page-largest: "#4c192b" + ink: "#a1a1a1" + primary: "#b58b76" + on-primary: "#571731" + card-border: "#b58b765c" +typography: + display: + fontFamily: wfont_55ada2_b8756b8c61604bdbb5d9defc6d35b999, wf_b8756b8c61604bdbb5d9defc6, orig_outfit_light + fontSize: 75.0001px + fontWeight: 700 + lineHeight: 90.0001px + letterSpacing: 3.75px + display-mobile: + fontFamily: wfont_55ada2_b8756b8c61604bdbb5d9defc6d35b999, wf_b8756b8c61604bdbb5d9defc6, orig_outfit_light + fontSize: 40px + fontWeight: 700 + lineHeight: 48px + letterSpacing: 2px + subheading: + fontFamily: wfont_33823c_140a016e5c714fdda622409ff802139f, wf_140a016e5c714fdda622409ff, orig_sukhumvitsetsemibold + fontSize: 35.0001px + fontWeight: 400 + lineHeight: 45.5001px + body: + fontFamily: wfont_9caab7_0c80b68c68a1446cb46153b6652b3423, wf_0c80b68c68a1446cb46153b66, orig_sukhumvitsetthin + fontSize: 16px + fontWeight: 400 + lineHeight: 25.6px + button: + fontFamily: wfont_33823c_f827d96a1c854e67b92050a82804f978, wf_f827d96a1c854e67b92050a82, orig_sukhumvitsetmedium + fontSize: 16px + fontWeight: 400 + lineHeight: 22.4px + button-secondary: + fontFamily: wfont_33823c_f827d96a1c854e67b92050a82804f978, wf_f827d96a1c854e67b92050a82, orig_sukhumvitsetmedium + fontSize: 15px + fontWeight: 400 + lineHeight: 21px +rounded: + xs: 8px + sm: 10px + md: 10px + lg: 20px + xl: 50px + 2xl: 100px + 3xl: 300px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 6px + s4: 7px + s5: 8px + s6: 10px + s7: 11px + s8: 13px + s9: 15px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.xl}" + height: 42px + button-secondary: + textColor: "{colors.page-body}" + typography: "{typography.button-secondary}" + rounded: "{rounded.xl}" + height: 42px + borderColor: "{colors.page-body}" + nav: + textColor: "{colors.primary}" + card: + rounded: "{rounded.sm}" + borderColor: "{colors.card-border}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" +--- + +## Overview + +All Energy and Utilities Public Company Limited (AE, `https://www.aeu.co.th/`, document title "หน้าหลัก | AE") presents itself in Thai as a renewable-energy and utilities group. The home page text says it was registered as a limited company on 18 September 2538 with 30 million baht of capital, converted to a public company on 11 February 2545 and approved for listing on the Stock Exchange of Thailand on 3 April 2545. Its pages list subsidiaries in utilities (water supply and related companies), renewable energy, gas and fuel stations, and other businesses. + +The page is a long dark scroll (5286px tall, 787 visible elements) built from plum bands. The hero is an aerial photograph of forested hills and water under a plum tint, with the English heading "All Energy & Utilities Public Company Limited" at 75px, bold and widely tracked. Below, a plum band introduces "เกี่ยวกับบริษัท" (About the company) with a hairline rule and a "เรียนรู้เพิ่มเติม" (Learn more) arrow link, a "VISION & MISSION" band over a bright photograph of a family walking on a lakeside lawn, and a "ธุรกิจในเครือ" (Group businesses) row of photo cards. Voice is formal Thai with English labels for the vision and mission. + +At capture time a black tribute pop-up with a portrait, the line "สถิตอยู่ในใจตราบนิรันดร์" and a close (X) control covers the hero. A forced re-extraction still contains it (a #000000 area of weight 466 and a #4c192b99 scrim of weight 1024 in the measurement), so those two values are the pop-up and its scrim rather than brand surfaces; the pop-up is not documented as brand UI. + +## Colors + +Measured background area by weight: #4c192b (5120), #571731 (4813), #4c192b99 (1024, scrim), #ffffff (996), #000000 (466, pop-up), #b58b7614 (30), #b58b76 (6). Text colours by characters: grey #a1a1a1 (2462), white (1422), rose-gold #b58b76 (676), plum #571731 (32). + +- **canvas #571731**: the plum body colour; it is also the footer background and the text colour on the contact button. +- **page-largest #4c192b**: the deepest plum, the largest background area (5120). +- **page-body #ffffff**: the white-wash photo band (VISION & MISSION) and white text. +- **ink #a1a1a1**: the most-read text colour, used for long Thai paragraphs on plum. +- **primary #b58b76**: rose-gold accent: the fill of the "ติดต่อเรา" (Contact us) pill, navigation text, section titles, hairline rules and footer text; it also appears as a border colour on 12 elements. +- **on-primary #571731**: text on the rose-gold button. +- **card-border #b58b765c**: a translucent rose-gold border measured on the group-business cards. + +The generator also saw the browser default link blue #0000ee on an empty anchor; it is a user-agent value and is dropped. + +## Typography + +The CSS font stacks are generated names with readable fallbacks, taken verbatim: `wfont_55ada2_b8756b8c…, orig_outfit_light` for the hero heading, `…orig_sukhumvitsetsemibold` for section titles and navigation, `…orig_sukhumvitsetthin` for body text, `…orig_sukhumvitsetmedium` for buttons, and `…orig_sukhumvitsettext` for footer text. The `orig_` names read outfit and sukhumvitset (thin, medium, semibold, text); the `wfont_` families are what the page loads, so the exact font files are not claimed here. + +- Display: 75.0001px, weight 700, line 90.0001px, letter-spacing 3.75px (mobile 40px/48px, 2px spacing). +- Subheading: 35.0001px, weight 400, line 45.5001px, rose-gold (for example "เกี่ยวกับบริษัท"). +- Body: 16px, weight 400, line 25.6px. +- Button: 16px, weight 400, line 22.4px; secondary button text 15px/21px. + +Most-read sizes: 14px (2358 characters), 16px (1322), 20px (444), 15px (102), 17px (87), 12px (55). Weights: 400 (4548 characters) and 700 (44). Because the stacks are loaded site fonts, no substitute is specified; outfit and sukhumvitset are the names that appear in the CSS. + +## Layout + +Desktop viewport 1280px. The header is 116px tall and holds the logo (AE, "all energy & utilities"), the Thai menu (เกี่ยวกับบริษัท, ธุรกิจในเครือ, นักลงทุนสัมพันธ์, การกำกับดูแลกิจการที่ดี, งานจัดซื้อจัดจ้าง, ร่วมงานกับเรา, ติดต่อเรา) and a TH/EN switch. Content runs in full-width bands with a wide left-aligned container: two Thai text columns under the About heading, left-aligned vision and mission copy beside a large photograph, and a row of four group-business cards. Paddings measured: 10px (14), 6px (7), 15px (6), 110px (6), 7px (4), 100px (4), 110.001px (3). The spacing scale is the generated list (2px to 20px). + +## Elevation & Depth + +Only one shadow was measured, `rgba(169, 190, 250, 0) 3px 3px 6px 2px` (two elements), which has zero alpha and is therefore invisible. Depth is produced by tonal steps (#4c192b to #571731), translucent plum scrims over photography and thin rose-gold hairlines. + +## Shapes + +Radii measured: 300px (16 elements), 8px (5), 500px (4), 10px (4), `10px 10px 10px 40px` (4), `10.0001px 10.0001px 10.0001px 39.9997px` (4), 50px (2). The button and outlined link are pills at 50px; the group cards use 10px corners with a larger 40px bottom-left corner; 300px and 500px are fully round shapes. The scale in the frontmatter keeps the generated steps (8, 10, 20, 50, 100, 300px and pill). + +## Components + +- **Contact button:** "ติดต่อเรา", fill #b58b76, text #571731, 50px radius, 142px by 42px, 16px medium Sukhumvit Set. +- **Outlined button:** "เรียนรู้เพิ่มเติม" at 15px/21px, white text and a 1px outline, 50px radius, 42px tall. +- **Section heading with rule:** rose-gold 35px title, a thin horizontal line, and a "เรียนรู้เพิ่มเติม →" link at the right. +- **Group-business cards:** photograph on a plum card, 10px corners, translucent rose-gold border #b58b765c. +- **Header:** 116px, rose-gold 14px Sukhumvit semibold labels. +- **Footer:** plum #571731 with rose-gold text, 11.0001px; copyright line reads "© 2035 by All Energy and Utilities Public Company Limited" as published. +- The "top of page" control and the tribute pop-up are not brand components. + +## Design System Architecture + +No public design system or brand-guidelines page exists on the opened page (https://www.aeu.co.th/), which links only to corporate, investor, governance, procurement and career pages; the research record is therefore "none". The de-facto system is a theme generated by a site builder: root variables are named like `--wst-color-custom-17`, `--wst-color-fill-background-primary: rgb(var(--color_11))`, `--color_55: 181,139,118` (which is the rose-gold #b58b76 as an RGB triplet) and `--font_9`, and font families carry hashed `wfont_` names. Sizes in `--font_9` are written as `calc(14 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1280)`, an expression that divides by 1280. + +## Do's and Don'ts + +- Do build on plum #571731 and #4c192b with rose-gold #b58b76 as the single accent. +- Do keep Thai body copy light and grey #a1a1a1 at 16px/25.6px and headings rose-gold. +- Do use 50px pill buttons, 42px tall, with plum text on rose-gold. +- Do pair dark plum bands with a single bright photographic band. +- Don't use the browser default link blue #0000ee. +- Don't treat the black tribute pop-up or its #4c192b99 scrim as brand surfaces. +- Don't introduce additional accent hues; none were measured. + +## Responsive Behavior + +Mobile was measured at 390px. The hero h1 stays 700 and drops to 40px/48px with 2px letter-spacing in a 268px by 240px block; the body paragraph is 13px/20.8px in the light Sukhumvit family; the Contact pill keeps 16px/22.4px, 42px tall. The header block measures 390px by 99px and its recorded text is empty, so mobile navigation labels were not captured. Mobile size frequencies: 12px (2029 characters), 13px (1318), 18px (402), 14px (150), 20px (78). Column reflow, card layout and menu behaviour at narrow widths were not measured. + +## Iteration Guide + +1. Start from canvas #571731, page-largest #4c192b, ink #a1a1a1, primary #b58b76, on-primary #571731. +2. Hero: 75px bold, 3.75px tracking, white over a plum-tinted photograph. +3. Buttons: 50px radius, 42px tall; filled rose-gold with plum text, or outlined white at 15px. +4. Section header pattern: rose-gold 35px title, hairline, Learn-more arrow. +5. Cards: 10px radius with the 40px bottom-left corner variant and a translucent rose-gold border. +6. Keep the tribute pop-up out of any reproduction; measure new components before adding tokens. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/allbirds/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/allbirds/DESIGN.md new file mode 100644 index 0000000..cb10ef8 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/allbirds/DESIGN.md @@ -0,0 +1,672 @@ +--- +version: alpha +name: Allbirds +category: "Fashion & Apparel" +description: "Allbirds' storefront is a warm oatmeal canvas (#ece9e2) carrying full-bleed lifestyle photography inside 16px-radius tiles, with all copy set in Klim's Geograph at small, quiet sizes (24px/400 hero h1, 14px body, 12px/500 uppercase labels with 0.3px tracking), Self Modern serif for 40px editorial tile headlines and the 30px product name, and Akkurat Mono for tracked uppercase eyebrows. Actions are full pills — a #212121 solid pill and a white pill on imagery, both 33px tall with 8px 16px padding — under a floating white header with a 12px radius and a #212121 footer." + +colors: + primary: "#212121" + on-primary: "#ffffff" + primary-hover: "#575757" + canvas: "#ece9e2" + surface: "#ffffff" + ink: "#000000" + ink-soft: "#212121" + ink-muted: "#575757" + charcoal: "#52525b" + natural-white: "#e0dacf" + natural-white-25: "#f5f4f1" + natural-white-60-50: "#ece9e250" + stroke: "#cdcdcd" + light-charcoal-30: "#57575730" + overlay: "#44444480" + scrim: "#00000080" + modal-ink: "#101828" + midnight: "#03143b" + khaki: "#443828" + red: "#9c0f0f" + green: "#10714e" + footer: "#212121" + +typography: + display-hero: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 32px + letterSpacing: 0.6px + display-hero-mobile: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 32px + letterSpacing: 0.6px + collection-title-mobile: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 24px + serif-editorial: + fontFamily: "\"Self Modern\", ui-serif, serif" + fontSize: 40px + fontWeight: 400 + lineHeight: 60px + serif-editorial-mobile: + fontFamily: "\"Self Modern\", ui-serif, serif" + fontSize: 30px + fontWeight: 400 + serif-product-name: + fontFamily: "\"Self Modern\", ui-serif, serif" + fontSize: 30px + fontWeight: 400 + lineHeight: 36px + serif-product-name-mobile: + fontFamily: "\"Self Modern\", ui-serif, serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 32px + modal-title: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 24px + fontWeight: 500 + lineHeight: 24px + body-lg: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 28px + body-md: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + body-sm: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + body-mobile: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 18px + product-title: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 14px + fontWeight: 500 + lineHeight: 20px + letterSpacing: 0.7px + button: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 12px + fontWeight: 500 + lineHeight: 15px + letterSpacing: 0.3px + button-modal: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + letterSpacing: 0.8px + nav-link: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 12px + fontWeight: 500 + lineHeight: 16px + letterSpacing: 0.6px + heading-label: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 12px + fontWeight: 500 + lineHeight: 16px + caption: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 16px + breadcrumb: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 16px + letterSpacing: 0.3px + badge: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 12px + fontWeight: 500 + lineHeight: 12px + letterSpacing: 0.6px + micro-mobile: + fontFamily: "Geograph, system-ui, sans-serif" + fontSize: 10px + fontWeight: 400 + mono-eyebrow: + fontFamily: "\"Akkurat Mono\", ui-monospace, monospace" + fontSize: 12px + fontWeight: 500 + lineHeight: 20px + letterSpacing: 1.2px + mono-label: + fontFamily: "\"Akkurat Mono\", ui-monospace, monospace" + fontSize: 12px + fontWeight: 400 + lineHeight: 16px + letterSpacing: 0.6px + mono-footer: + fontFamily: "\"Akkurat Mono\", ui-monospace, monospace" + fontSize: 12px + fontWeight: 400 + lineHeight: 16px + letterSpacing: 1.2px + mono-spec: + fontFamily: "\"Akkurat Mono\", ui-monospace, monospace" + fontSize: 14px + fontWeight: 400 + lineHeight: 20px + letterSpacing: 1.4px + +rounded: + none: 0px + xs: 2px + sm: 4px + md: 6px + lg: 8px + xl: 12px + 2xl: 16px + radius: 20px + 3xl: 24px + pill: 9999px + +spacing: + 1: 4px + 2: 8px + 2-5: 10px + 3: 12px + 4: 16px + 5: 20px + 6: 24px + 8: 32px + 10: 40px + 14: 56px + 16: 64px + 20: 80px + 28: 112px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + border: "1px solid #212121" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 8px 16px + height: 33px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + border: "1px solid #575757" + button-on-image: + backgroundColor: "{colors.surface}" + textColor: "{colors.primary}" + border: "1px solid #ffffff" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 8px 16px + height: 33px + button-on-image-hover: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + border: "1px solid #212121" + button-outline-white: + backgroundColor: transparent + textColor: "{colors.surface}" + border: "1px solid #ffffff" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 8px 16px + height: 33px + button-outline-white-hover: + backgroundColor: "{colors.surface}" + textColor: "{colors.primary}" + button-outline-black: + backgroundColor: transparent + textColor: "{colors.primary}" + border: "1px solid #212121" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 8px 16px + button-outline-black-hover: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + button-icon: + backgroundColor: transparent + textColor: "{colors.primary}" + border: "1px solid #212121" + rounded: "{rounded.pill}" + size: 24px + padding: 0px + button-icon-hover: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + button-modal: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button-modal}" + rounded: "{rounded.md}" + padding: 12px 0px + height: 48px + size-selector: + backgroundColor: transparent + textColor: "{colors.primary}" + border: "1px solid #cdcdcd" + typography: "{typography.heading-label}" + rounded: "{rounded.xs}" + padding: 12px 0px + size-selector-hover: + backgroundColor: "{colors.light-charcoal-30}" + size-selector-selected: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + border: "1px solid #212121" + text-input: + backgroundColor: "{colors.surface}" + textColor: "{colors.primary}" + border: "1px solid #212121" + typography: "{typography.body-md}" + rounded: "{rounded.pill}" + padding: 10px 80px 10px 12px + height: 42px + select-sort: + backgroundColor: transparent + textColor: "{colors.primary}" + border: "1px solid #212121" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 8px 40px 8px 16px + height: 41px + card-product: + backgroundColor: "{colors.surface}" + textColor: "{colors.ink}" + typography: "{typography.product-title}" + rounded: "{rounded.2xl}" + padding: 0px + card-pdp-panel: + backgroundColor: "{colors.surface}" + textColor: "{colors.ink}" + typography: "{typography.body-md}" + rounded: "{rounded.xl}" + padding: 32px + tag-new: + backgroundColor: "{colors.natural-white}" + textColor: "{colors.primary}" + typography: "{typography.badge}" + rounded: "{rounded.pill}" + padding: 8px + nav: + backgroundColor: "{colors.surface}" + textColor: "{colors.primary}" + typography: "{typography.nav-link}" + rounded: "{rounded.xl}" + padding: 0px 20px + height: 48px + boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px" + link: + textColor: "{colors.ink-muted}" + typography: "{typography.breadcrumb}" + modal: + backgroundColor: "{colors.surface}" + textColor: "{colors.ink}" + typography: "{typography.body-md}" + rounded: "{rounded.lg}" + padding: 24px + boxShadow: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px" + footer: + backgroundColor: "{colors.footer}" + textColor: "{colors.on-primary}" + typography: "{typography.body-md}" + rounded: "{rounded.none}" + padding: 80px 40px 20px +--- + +## Overview + +Allbirds sells wool, tree-fibre and sugarcane-foam shoes, and its storefront behaves like a printed +lookbook laid on undyed fabric. The page background the viewer sees is a warm oatmeal, `#ece9e2` +(the site's own token `--color-natural-white-60`), and almost everything placed on it is either a +photograph inside a rounded tile or a white card. Type is deliberately small: the homepage h1, +"Wildly Comfortable. Super Natural.", is only 24px Geograph at weight 400, set in white over the +hero photograph. The product and the photography carry the volume; the typography whispers. + +Three typefaces split the work cleanly: + +- **Geograph** (Klim Type Foundry) — every heading, paragraph, label and button. Weights served: 400, 500, 700. +- **Self Modern** — a thin serif used only for editorial moments: 40px tile headlines ("Summer Travel + Essentials", "New Arrivals") and the 30px product name on a product page. +- **Akkurat Mono** — tracked uppercase eyebrows and section labels ("ALL NEW DASHER NZ COLLECTION", + "FOLLOW THE FLOCK", "SUBSCRIBE TO OUR EMAILS", "BEST FOR"). + +Shape language is soft: tiles and product cards at 16px, the floating header at 12px, the modal at 8px, +and every action button a full pill. Colour is almost entirely neutral — oatmeal, white, black text, +and a `#212121` near-black for buttons and the footer. Colour arrives through the photography +(muted sky, dusty rose, sage, taupe product tiles) rather than through UI chrome. + +The capture shows the rhythm: a thin dark announcement bar ("Free ground shipping on orders over $100"), +a white rounded header floating 20px inside the viewport edges over a full-bleed hero photograph, +then a row of four colour-blocked category tiles with outlined white pills ("NEW ARRIVALS", "MENS", +"WOMENS", "BEST SELLERS"), then a "BEST SELLERS" carousel of white product cards on the oatmeal canvas, +then three tall editorial photo tiles with Self Modern headlines and paired "SHOP MEN" / "SHOP WOMEN" +outline pills. A country-selector modal ("Where are we shipping to?") opens on first visit. + +Microcopy is short, warm and uppercase on actions: "SHOP MEN", "SHOP WOMEN", "CONFIRM", "SIGN UP". +Marketing lines lean on nature puns ("Wildly Comfortable. Super Natural.", "FOLLOW THE FLOCK"). + +## Colors + +All hex values below were measured on the live site (computed styles, rootVars or CSS corpus). + +### Brand & Action + +- **Primary / near-black** `#212121` — the site's `--color-black`. Solid pill buttons (`.btn-secondary`), + the modal CONFIRM button, the selected size, carousel arrow outlines, and the footer background. +- **On-primary** `#ffffff` — text on `#212121`. +- **Primary hover** `#575757` — `--color-light-charcoal`; `.btn-secondary:hover` swaps bg and border to it. + +### Surface + +- **Canvas** `#ece9e2` — body background, the oatmeal page colour (`--color-natural-white-60`). +- **Surface** `#ffffff` — product cards, PDP panel, header bar, modal, and the white "on-image" pill. +- **Natural white** `#e0dacf` — `--color-natural-white`; the "NEW" badge fill and thin dividers on PDP thumbnails. +- **Natural white 25** `#f5f4f1` — `--color-natural-white-25`, a lighter oatmeal declared in rootVars. +- **Natural white 60 at 50%** `#ece9e250` — declared token for translucent oatmeal. +- **Footer** `#212121` — full-width dark footer. +- **Overlay** `#44444480` — a translucent grey layer, third-largest background by area (its exact placement was not isolated). +- **Scrim** `#00000080` — the modal backdrop (`bg-black/50`). + +### Text + +- **Ink** `#000000` — the most-read text colour on the homepage (body copy, card titles). +- **Ink soft** `#212121` — product-page body copy and button text; the most-read colour on the PDP. +- **Ink muted** `#575757` — prices, breadcrumbs, PDP Akkurat Mono labels. +- **Charcoal** `#52525b` — `--color-charcoal`, secondary text on collection pages. +- **Modal ink** `#101828` — a grey-navy text colour measured on the page (the modal heading uses Tailwind `text-gray-900`). + +### Utility / Semantic + +- **Stroke** `#cdcdcd` — `--color-stroke`, size-selector borders. +- **Light charcoal 30%** `#57575730` — size-selector hover fill. +- **Red** `#9c0f0f` — `--color-red`, sale prices (seen on PDP and collection text colours). +- **Green** `#10714e` — `--color-green`, declared in rootVars. +- **Midnight** `#03143b` and **Khaki** `#443828` — declared brand tokens in rootVars, not prominent on the homepage. + +There is no bright accent. Do not introduce a brand blue or green as a button colour. + +## Typography + +### Font Family + +- Sans: `Geograph, system-ui, sans-serif` (`--font-sans`). Loaded weights: 400, 500, 700. +- Serif: `"Self Modern", ui-serif, serif` (`--font-serif`). Loaded weight: 400. +- Mono: `"Akkurat Mono", ui-monospace, monospace` (`--font-mono`). Loaded weight: 400 (500 is requested on the hero eyebrow and synthesised). + +By characters rendered on the homepage: Geograph 1920, Akkurat Mono 164, Self Modern 59. + +### Hierarchy + +| Token | Family | Size | Weight | Line height | Tracking | Use | +|---|---|---|---|---|---|---| +| display-hero | Geograph | 24px | 400 | 32px | 0.6px | Homepage h1 over hero photo | +| display-hero-mobile | Geograph | 24px | 400 | 32px | 0.6px | Same h1 at 390px (wraps to 2 lines) | +| collection-title-mobile | Geograph | 20px | 400 | 24px | — | Collection h1 at 390px | +| serif-editorial | Self Modern | 40px | 400 | 60px | normal | Editorial tile headlines | +| serif-editorial-mobile | Self Modern | 30px | 400 | — | — | Same below md (`text-[1.875rem]`) | +| serif-product-name | Self Modern | 30px | 400 | 36px | normal | PDP h1 product name | +| serif-product-name-mobile | Self Modern | 24px | 400 | 32px | normal | PDP h1 at 390px | +| modal-title | Geograph | 24px | 500 | 24px | normal | "Where are we shipping to?" | +| body-lg | Geograph | 18px | 400 | 28px | normal | PDP description | +| body-md | Geograph | 16px | 400 | 24px | normal | Body default, inputs, footer | +| body-sm | Geograph | 14px | 400 | 21px | normal | Homepage paragraphs | +| body-mobile | Geograph | 12px | 400 | 18px | normal | Paragraphs at 390px | +| product-title | Geograph | 14px | 500 | 20px | 0.7px | Uppercase product names on cards | +| button | Geograph | 12px | 500 | 15px | 0.3px | All `.btn` pills, uppercase | +| button-modal | Geograph | 16px | 400 | 24px | 0.8px | Modal CONFIRM, uppercase | +| nav-link | Geograph | 12px | 500 | 16px | 0.6px | Header links, uppercase | +| heading-label | Geograph | 12px | 500 | 16px | normal | "CART (0)" h2, uppercase | +| caption | Geograph | 12px | 400 | 16px | normal | Prices, colour names | +| breadcrumb | Geograph | 12px | 400 | 16px | 0.3px | "Home / Womens" | +| badge | Geograph | 12px | 500 | 12px | 0.6px | "NEW" badge, uppercase | +| micro-mobile | Geograph | 10px | 400 | — | — | Announcement bar below md | +| mono-eyebrow | Akkurat Mono | 12px | 500 | 20px | 1.2px | Hero eyebrow, uppercase | +| mono-label | Akkurat Mono | 12px | 400 | 16px | 0.6px | "FOLLOW THE FLOCK" h3, uppercase | +| mono-footer | Akkurat Mono | 12px | 400 | 16px | 1.2px | Footer section headings, uppercase | +| mono-spec | Akkurat Mono | 14px | 400 | 20px | 1.4px | PDP "BEST FOR" labels in `#575757`, uppercase | + +### Principles + +- Small type everywhere. The two dominant sizes by characters are 14px (982) and 12px (969); the next is 24px. +- Uppercase is reserved for actions, navigation, product names and mono eyebrows — always with positive tracking + (0.3px at 12px buttons, 0.6px at 12px nav, 0.7px at 14px product names, 1.2px on mono eyebrows). +- Sentence-case display lines (hero h1, Self Modern tiles) carry no uppercase. +- Weight contrast is minimal: 400 for reading, 500 for labels, 700 only on the footer "SIGN UP" button. +- The tracking scale is Tailwind's: `--tracking-wide .025em`, `--tracking-wider .05em`, `--tracking-widest .1em` + — which is why 12px tracks to 0.3px / 0.6px / 1.2px. + +### Note on Font Substitutes + +All three faces are commercial. Geograph is a retail typeface from +[Klim Type Foundry](https://klim.co.nz/fonts/geograph/) by Kris Sowersby, classified by Klim as +"Modern: Lineal/Geometric". Self Modern is listed under Lucas Le Bihan / Bretagne Type Foundry as +"a thin text typeface" ([Devroye](https://luc.devroye.org/fonts-82564.html)). Akkurat Mono is sold by +[Lineto](https://www.lineto.com/typefaces/akkurat-mono). No official Allbirds substitute guidance exists. +If unlicensed, keep the declared fallbacks (`system-ui`, `ui-serif`, `ui-monospace`) rather than picking a +look-alike, and keep sizes, weights and tracking exactly as listed so the rhythm survives. + +## Layout + +### Spacing System + +The site runs on Tailwind v4 with `--spacing: .25rem` (4px). Measured gaps by weight: 4px (72), 8px (40), +10px (38), 16px (12), 20px (9), 12px (8), 32px (6), 40px (5). Measured paddings: 8px (54), 16px (47), +32px (7), 10px (7), 12px, 24px, 20px, 6px, 40px, 80px, 112px, 56px, 64px. + +Spacing tokens: 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 56px, 64px, 80px, 112px. + +### Grid & Container + +- Measured at a 1280px viewport. The header bar is inset 20px from each edge (`top-5 right-5 left-5`), + 1240px wide, capped at `max-w-[2560px]`. +- Category tiles: four equal columns (gutter not measured). +- Product carousel: cards 345px wide, 456px tall, scrolling horizontally with circular arrow buttons. +- Editorial row: three tall photo tiles. +- Container tokens declared: `--container-sm 24rem` up to `--container-7xl 80rem`; `--breakpoint-xl 80rem`. +- Footer padding: 80px 40px 20px. + +### Whitespace Philosophy + +Tiles sit tight to each other and to the viewport (small gutters), while text inside them is sparse and +small. Whitespace comes from the oatmeal canvas between bands (e.g. the "BEST SELLERS" heading row) rather +than from large margins. The result is dense photography with quiet type. + +## Elevation & Depth + +| Level | Value | Use | +|---|---|---| +| 0 | none | Cards, tiles, buttons — flat | +| 1 | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Floating header bar | +| 2 | `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px` | Modal panel | +| inset ring | `rgb(87, 87, 87) 0px 0px 0px 1px inset` + `rgb(0, 0, 0) 0px 0px 0px 1px` | Colour swatch rings on product cards | + +Depth comes from photography and the floating header; product cards are flat white on oatmeal. +Overlays: `#44444480` (large translucent layer) and `#00000080` behind the modal. + +### Decorative Depth + +Hero text sits directly on photography with no gradient panel; legibility relies on image choice. + +## Shapes + +### Border Radius Scale + +| Token | Value | Use | +|---|---|---| +| none | 0px | Footer, full-bleed bands | +| xs | 2px | PDP size selector (`--radius-xs`) | +| sm | 4px | Small selects (`--radius-sm`) | +| md | 6px | Modal CONFIRM button (`rounded-md`) | +| lg | 8px | Modal panel (`rounded-lg`) | +| xl | 12px | Floating header, PDP aside panel | +| 2xl | 16px | Product cards, category and editorial tiles; `16px 16px 0px 0px` on card image tops | +| radius | 20px | Site's `--radius` token | +| 3xl | 24px | PDP colour panel | +| pill | 9999px | All `.btn` pills, badges, inputs, swatches (the site computes 3.35544e+07px) | + +### Photography Geometry + +Photography always lives inside rounded tiles (16px). Product shots are cut-out shoes on white cards; +lifestyle shots are full-bleed inside tiles. No skew, clip-path or notch shapes are used. + +## Components + +### Buttons + +All buttons share the `.btn` base: Geograph 12px / 500 / line-height 15px / tracking 0.3px, uppercase, +padding 8px 16px, full pill radius, height 33px, and a 0.2s `cubic-bezier(0.37, 0, 0.63, 1)` colour transition. + +- **button-primary** (site class `.btn-secondary`) — `#212121` fill, `#ffffff` text, 1px `#212121` border. + Hover: fill and border `#575757`. +- **button-on-image** (site class `.btn-primary`) — `#ffffff` fill, `#212121` text, 1px `#ffffff` border; used on + the hero photograph. Hover: inverts to `#212121` fill, `#ffffff` text. +- **button-outline-white** — transparent, 1px `#ffffff` border, white text; on category and editorial tiles. + Hover: `#ffffff` fill, `#212121` text. +- **button-outline-black** — transparent, 1px `#212121` border, `#212121` text. Hover: `#212121` fill, white text. +- **button-icon** — 24px circle, 1px `#212121` border, transparent; carousel arrows. Hover: `#212121` fill. +- **button-modal** — `#212121` fill, white text, Geograph 16px / 400 / 24px, tracking 0.8px, uppercase, + 6px radius, padding 12px 0px, 48px tall, full width. +- Size modifiers declared in CSS: `.btn-small` (padding 8px 12px, 11px text) and `.btn-large` (padding 10px 14px, 14px text). +- Focus: `.btn:focus` sets `outline-color: var(--color-blue-600)`. + +### Cards & Containers + +- **card-product** — white, 16px radius, no padding on the frame, 456px tall in the carousel (370px on + collection grids). Top-left "NEW" badge, image, then uppercase 14px/500 title with 0.7px tracking, a 12px + colour name, round swatches and a `#575757` 12px price. +- **card-pdp-panel** — the PDP aside: white, 12px radius, 32px padding. +- **Category tile** — 16px-radius colour-blocked tile with a cut-out shoe and a centred outline-white pill. +- **Editorial tile** — tall 16px-radius photo with a centred Self Modern 40px / 60px white headline and paired pills at the bottom. + +### Inputs & Forms + +- **text-input** — white, `#212121` text, 1px `#212121` border, pill radius, padding 10px 80px 10px 12px + (room for an inline button), 42px tall, Geograph 16px. +- **select-sort** (collection page) — transparent pill, 1px `#212121` border, 12px / 500 uppercase, padding 8px 40px 8px 16px, 41px tall. +- **Footer email field** — white text on `#212121` with an inline "SIGN UP" button (12px / 700, padding 8px 16px, 31px tall). +- **size-selector** — 2px radius, 1px `#cdcdcd` border, padding-block 12px, 12px / 500. Hover fill `#57575730`; + selected fill and border `#212121` with white text; disabled at opacity 0.7. + +### Navigation + +- **nav** — floating white bar, 12px radius, 48px tall, padding 0px 20px, level-1 shadow, inset 20px from the + viewport. Left: the lowercase script "allbirds" wordmark. Centre: "NEW ARRIVALS · SHOP ALL · MEN · WOMEN" + in `#212121` 12px / 500 / 16px, tracking 0.6px, uppercase. Right: search and cart icons. +- **Announcement bar** — dark strip above the header, white Geograph 12px / 400 / 16px, tracking 0.6px (10px below md), with chevrons. +- **link / breadcrumb** — `#575757` Geograph 12px / 400 / 16px, tracking 0.3px ("Home / Womens"). + +### Pills, Tags, and Chips + +- **tag-new** — `#e0dacf` fill, `#212121` text, 12px / 500, line-height 12px, tracking 0.6px, uppercase, 8px padding, pill. +- The "BEST SELLERS" category label reuses the outline-white pill shape with pointer events disabled. + +### Signature Components + +- **Country modal** — white 8px-radius panel, 512px wide, 24px padding, level-2 shadow over a `#00000080` scrim; + 24px / 500 centred title, 14px explanation, a country select and the full-width 48px CONFIRM button. +- **Footer** — `#212121`, white text, padding 80px 40px 20px; Akkurat Mono 12px section headings tracked 1.2px + ("SUBSCRIBE TO OUR EMAILS", "HELP"), email signup pill. + +## Design System Architecture + +Allbirds publishes **no public design system**, token package, Figma kit or brand-guideline portal. Searches +for "Allbirds brand guidelines typography", "Allbirds design system github npm", "Allbirds press kit media +assets logo" and "Allbirds new brand identity 2025 rebrand website" returned only third-party aggregator pages, +which are not used here. What follows is the de-facto system measurable on allbirds.com, plus the foundry pages +for its typefaces ([Klim — Geograph](https://klim.co.nz/fonts/geograph/), +[Lineto — Akkurat Mono](https://www.lineto.com/typefaces/akkurat-mono), +[Devroye — Self Modern](https://luc.devroye.org/fonts-82564.html)). + +- **Token architecture (as shipped):** CSS custom properties on `:root` in Tailwind v4 naming. Primitives are the + Tailwind defaults (`--color-gray-500`, `--color-neutral-600` in oklch). Brand tokens are layered on top with plain + names: `--color-black: #212121`, `--color-natural-white: #e0dacf`, `--color-natural-white-60: #ece9e2`, + `--color-natural-white-25: #f5f4f1`, `--color-light-charcoal: #575757`, `--color-charcoal: #52525b`, + `--color-stroke: #cdcdcd`, `--color-midnight: #03143b`, `--color-khaki: #443828`, `--color-red: #9c0f0f`, + `--color-green: #10714e`. Alpha variants are separate tokens with a suffix (`--color-light-charcoal-0.3`, + `--color-light-charcoal-0.7`, `--color-natural-white-60-0.5`). Fonts: `--font-sans`, `--font-serif`, `--font-mono`. + Radii: `--radius-xs .125rem` … `--radius-3xl 1.5rem`, plus `--radius: 20px`. Easing: `--ease-snappy`, + `--ease-sine-in`, `--ease-sine-out`, `--ease-sine-in-out`. Layout: `--global-banner-height: 32px`, + `--hero-header-offset-desktop: 4rem`, `--hero-header-offset-mobile: 6.25rem`. +- **Component layer:** hand-written component classes over the tokens — `.btn` with modifiers `.btn-primary` + (white), `.btn-secondary` (black), `.btn-outline-black`, `.btn-outline-white`, `.btn-icon-black`, `.btn-icon-white`, + `.btn-small`, `.btn-large`, plus `.btn-size` (with `--selected`) and `.btn-add-to-cart`. Everything else is + Tailwind utilities in markup (`rounded-md bg-black py-3 tracking-wider`). +- **Theming:** a single light theme. No dark mode, high-contrast or density switch was found; colour inversion is + done per component (white pill on imagery, outline-white on tiles). +- **Type & spacing:** 4px base (`--spacing: .25rem`); type sizes from Tailwind's `--text-xs .75rem` to `--text-4xl 2.25rem` + with arbitrary values for the serif (`text-[1.875rem] md:text-[2.5rem]`); tracking from `--tracking-wide/wider/widest`. +- **Component inventory observed:** announcement bar, floating header, hero, category tile, product card with badge and + swatches, carousel with icon buttons, editorial tile, breadcrumb, sort select, size selector, PDP panel, country modal, + footer with email signup. +- **Accessibility:** no published rules. Measured: `.btn:focus` outline uses `--color-blue-600`; disabled size buttons use opacity 0.7. +- **Delivery:** the page is a Shopify theme (sections carry ids such as `shopify-section-…__geofencing`). No npm package, Figma kit or versioning is public. + +## Do's and Don'ts + +### Do + +- Use `#ece9e2` as the page canvas and white `#ffffff` for cards; keep the UI otherwise neutral. +- Set everything in Geograph; keep the hero h1 at 24px / 400 with 0.6px tracking. +- Use Self Modern only for editorial headlines (40px / 60px) and the product name (30px / 36px). +- Use Akkurat Mono for small tracked uppercase eyebrows (12px, 1.2px tracking). +- Make every action a full pill, 33px tall, padding 8px 16px, 12px / 500 uppercase with 0.3px tracking. +- Invert on photography: white pill or outline-white pill; invert again on hover. +- Put photography in 16px-radius tiles and let it carry the colour. +- Keep the header floating, white, 12px radius, 20px inset. + +### Don't + +- Don't add a bright accent colour for buttons or links. +- Don't enlarge the type into marketing-scale display sizes; the largest measured sans size is 24px on the homepage. +- Don't use square-cornered buttons (the only non-pill buttons are the 6px modal CONFIRM and the 2px size selector). +- Don't use heavy shadows on cards; only the header and modal are elevated. +- Don't set Self Modern in uppercase or bold — it is served only at 400. +- Don't use pure white as the page canvas. + +## Responsive Behavior + +### Breakpoints + +Tailwind defaults apply (`md` used in class names such as `md:text-xs`, `md:text-[2.5rem]`); `--breakpoint-xl` is 80rem. +Measurements were taken at 1280px and 390px. + +### Touch Targets + +Pills stay 33px tall on mobile; the mobile PDP "SELECT A SIZE" button grows to 49px with 16px padding, and the modal +CONFIRM is 48px. Carousel arrows are 24px. + +### Collapsing Strategy + +- Hero h1 keeps 24px / 32px at 390px and wraps to two lines. +- Collection h1 drops to 20px / 24px; PDP product name drops from 30px to 24px. +- Paragraph text drops from 14px / 21px to 12px / 18px; the announcement bar drops to 10px. +- Self Modern tile headlines drop from 40px to 30px. +- On mobile, 12px is the dominant size by far (1456 weighted characters). + +### Image Behavior + +Tile reflow on mobile was not measured. + +## Iteration Guide + +1. Start with canvas `#ece9e2`, text `#000000`, buttons `#212121`, cards `#ffffff`. +2. Load Geograph (400/500/700), Self Modern (400) and Akkurat Mono (400); fall back to the system stacks. +3. Build the `.btn` pill once (12px / 500 / 15px, 0.3px tracking, 8px 16px, pill) and derive the four variants. +4. Place the floating white header (48px, 12px radius, 20px inset) over a full-bleed hero image. +5. Use 16px-radius tiles for every image block; keep text inside them small and centred. +6. Add Akkurat Mono eyebrows above hero lines and footer sections. +7. Check every number against this file: 24px h1, 14px body, 12px labels, 16px cards, 33px pills. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/allianz/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/allianz/DESIGN.md new file mode 100644 index 0000000..cb4411d --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/allianz/DESIGN.md @@ -0,0 +1,160 @@ +--- +version: alpha +name: Allianz +category: "Banking & Insurance" +description: "Allianz Group global home page: Allianz Neo typeface at 18px/400, blue #003781 text and filled buttons with 8px radius, pale aqua #f1f9fa bands, navy #122b54 cards and flat shadowless layout." +colors: + canvas: "#ffffff" + ink: "#003781" + primary: "#003781" + on-primary: "#ffffff" + button-on-dark: "#ffffff" + surface-tint: "#f1f9fa" + ink-link-blue: "#3f72b1" + navy-deep: "#122b54" + surface-aqua: "#cfe9ee" + surface-mist: "#eef6f6" + border-pale: "#c3d7e9" + on-dark-button-hover: "#dbeaf5" +typography: + display: + fontFamily: "\"Allianz Neo\", sans-serif" + fontSize: 20px + fontWeight: 600 + lineHeight: 28px + display-mobile: + fontFamily: "\"Allianz Neo\", sans-serif" + fontSize: 24px + fontWeight: 600 + lineHeight: 28px + subheading: + fontFamily: "\"Allianz Neo\", sans-serif" + fontSize: 26px + fontWeight: 600 + lineHeight: 32px + body: + fontFamily: "\"Allianz Neo\", sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 26px + button: + fontFamily: "\"Allianz Neo\", sans-serif" + fontSize: 16px + fontWeight: 700 + lineHeight: 20px +rounded: + xs: 2px + sm: 4px + md: 8px +spacing: + s1: 6px + s2: 14px + s3: 16px + s4: 20px + s5: 22px + s6: 24px + s7: 30px + s8: 32px + s9: 36px + s10: 40px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 6px 14px + height: 34px + borderColor: "{colors.primary}" + button-on-dark: + backgroundColor: "{colors.button-on-dark}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 6px 14px + height: 34px + borderColor: "{colors.button-on-dark}" + button-on-dark-hover: + backgroundColor: "{colors.on-dark-button-hover}" + button-outlined: + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 6px 14px + borderColor: "{colors.ink}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" +--- + +# Allianz + +## Overview +The measured page is the global English home page of the Allianz Group at allianz.com/en.html (document language en-GB; title "Insurance and Asset Management worldwide | Allianz"). It is a corporate group site, not a product shop: a white header with the Allianz wordmark and circular logo, a secondary row of links (About us, Investor Relations, Media Center, Jobs, Sustainability, Economic Research) and a Search control, then a full-width dark-blue hero for a campaign ("Why do we feel alone in a connected world? Inside the Allianz Sense of Community study") with collage-style photographs of people, a three-card news carousel on a pale aqua tint, four navy shortcut buttons (Media Center, 3am Report, Mobility, AI at Allianz) and an Investor Relations block of aqua and navy cards. + +The look is calm and institutional: one blue (#003781) carries all text, buttons and outlines, on white and pale aqua surfaces, with photography and short quotations in yellow on navy tiles providing the only warmth. + +## Colors +- **canvas** `#ffffff`: header and card background (5356 area weight). +- **ink** and **primary** `#003781`: Allianz blue. It is the text color of 6732 measured characters, the fill of the filled buttons, and the outline color of outlined buttons. Text is therefore blue, not black. +- **on-primary** `#ffffff`. +- **surface-tint** `#f1f9fa`: the pale aqua page band behind the news carousel (3543 area weight); **surface-mist** `#eef6f6` and **surface-aqua** `#cfe9ee` (the light Investor Relations card) are neighbouring tints. +- **navy-deep** `#122b54`: the dark card and hero-area background (908 area weight). +- **ink-link-blue** `#3f72b1`: a lighter blue text color (52 characters). +- **border-pale** `#c3d7e9`: a hairline border. +- **button-on-dark** `#ffffff` with **on-dark-button-hover** `#dbeaf5`: the white button used on dark photographic bands (the detected first CTA, "Read the article"). The extractor assigned this white button as primary; it is kept under this name because the filled-blue button is the standard action elsewhere on the page. +The site publishes a large two-tier token set in root variables (core colors such as `--core-color-aqua-800` `#005885`, `--core-color-purple-200` `#F9E1ED`, `--core-color-yellow-100` `#FEF5CD`, `--vibrant-orange` `#ff934f`, and semantic ones such as `--semantic-color-selection-surface-attention-hover` `#00266D`); only the colors above are measured in use on this page. + +## Typography +One proprietary family, "Allianz Neo", sans-serif, loaded at 400, 600 and 700, plus an icon font "Allianz-Icons". No substitute is published on the pages opened. +- **display** 20px / 600 / 28px (hero statement); on the 390px mobile pass 24px / 600 / 28px (**display-mobile**). +- **subheading** 26px / 600 / 32px (card titles). +- **body** 18px / 400 / 26px. +- **button** 16px / 700 / 20px. +Character counts: 18px (5282), 16px (907), 24px (785), 26px (169), 40px (152), 20px (138), 12px (134). The `--heading-03-mobile-font-size` variable is 26px and `--heading-03-letter-spacing` is .3px. The measured section heading "Investor Relations" appears at 40px. + +## Layout +Measured at 1280px wide; the header block (logo row plus link row) is 156px tall. The hero is a full-width band; below it three equal news cards sit in a 24px-margin grid with a pager ("1 / 10") and arrows, followed by four centered 8px-radius shortcut buttons. Spacing tokens come from measured paddings and gaps (6, 14, 16, 20, 22, 24, 30, 32, 36, 40px). Root variables include `--margin-s` 8px, `--margin-xxxxl` 40px and `--core-dimension-2000` 80px. + +## Elevation & Depth +Flat. Cards are white or tinted rectangles without shadows. The only measured shadows are focus rings (`0 0 0 2px #fff, 0 0 0 6px #009de6` and variants using `--accessibility-focus-color`) and `0 2px 4px #41414180`. Depth comes from color bands and photography. + +## Shapes +Measured radii: 8px (18 uses; all buttons), 2px (8) and 4px (3). News and investor cards are square-cornered; buttons are 8px with a 1px border in their own color. + +## Components +- **button-primary**: `#003781` fill, white text, 16px / 700, 8px radius, padding 6px 14px, height 34px (measured on "Explore opportunities for students"); on mobile the navy "Media Center" button measures 358px by 50px with 14px 30px padding. +- **button-on-dark**: white fill and border, blue text, same size; hover `#dbeaf5`. +- **button-outlined**: transparent, 1px `#003781` border, 8px radius, 14px / 700 ("Allianz Contacts"; also "Sense of Community Hub" in white on the hero). +- News card: image on top with quote overlays, blue 26px headline, date line, 18px description in blue. +- Investor Relations tiles: aqua card with arrow links ("More", "Results") and a navy "Results 2Q 2026" card with a white "More" button. + +## Design System Architecture +The site ships a layered token system in its root custom properties: core scales (`--core-color-*`, `--core-dimension-*`), semantic aliases (`--semantic-color-*`, `--semantic-dimension-*`, `--semantic-inset-*`) and per-component tokens (`--button-emphasis-active-text-color`, `--tab-item-color`, `--switcher-checked-icon-color`, `--checkbox-selected-border-color`, `--tooltip-pointer-width`, `--heading-03-*`, `--price-info-*`, `--license-plate-*`, `--rating-label-*`). About 400 variables were read from the page. No public brand-guideline page was found: the home page markup contains no brand, design or guideline link, so the system is documented from this shipped CSS only. + +## Do's and Don'ts +- Do set text, buttons and outlines in `#003781`. +- Do use white buttons only on dark photographic or navy bands. +- Do use 8px radius on buttons and square corners on cards. +- Do pair headlines at 600 weight with 18px body at 400. +- Don't use black text; the page's text is blue. +- Don't add drop shadows; separation is by tint bands. +- Don't use the hidden skip-link styles as navigation. + +## Responsive Behavior +Measured at 390px: the h2 is 24px / 600 / 28px, the body paragraph 18px / 400 / 26px in a 243px column, and the main action is the full-width navy "Media Center" button (358px by 50px, 8px radius, 14px 30px padding). Breakpoint values and menu behavior were not measured. + +## Iteration Guide +1. Start from white, `#003781` and `surface-tint`. +2. Use filled blue for actions, white-on-dark for hero actions. +3. Keep headings at 600 and buttons at 700 in Allianz Neo (or a neutral sans if unavailable). +4. Use quotes in yellow on navy photo tiles only as in the capture. +5. Verify new values against `web/data/extracted/allianz.json`. + +## Imagery and Voice +Photography is human and documentary: people hugging, a group on grass, a child running in the Community study; editorial tiles show executives with a pull quote beside a yellow quotation mark, and an aerial car-and-crosswalk image for the mobility story. Headlines are sentence case, informative and neutral ("We are thinking too narrowly about solutions", "Liability and Safety: The Keys to Autonomous Mobility"), each with a date such as "August 24, 2026" and a two to five line summary. Calls to action are plain verbs: "Read the article", "More", "Results". + +## Page Composition Notes +The capture reads top to bottom as five bands. First, a white header of two rows separated by a thin divider: the upper row holds the logo at left and, at right, "Products & Services", a globe icon with EN and DE language links and the outlined "Allianz Contacts" button; the lower row holds the six section links at 14px to 16px in blue and a Search link with a magnifier icon. Second, the dark-blue hero with a textured background, a white "COMMunity" wordmark graphic and a collage of three photographs, with two stacked buttons at left. Third, the aqua news band with equal-height cards, where the shortest card still stretches to the row height, leaving white space below the text. Fourth, a row of four navy shortcut buttons centered under the pager. Fifth, the Investor Relations heading in 40px blue followed by a staggered row of tiles: a light aqua tile, a navy tile, an empty gap, and a photographic tile for the "Investor Relations AI Assistant". + +Every text link uses the same blue, and arrow icons, not underlines, signal links inside tiles. Date lines sit between headline and summary in the same blue at body size, so the only hierarchy cues are size, weight and spacing. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ally-reit/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ally-reit/DESIGN.md new file mode 100644 index 0000000..69e10a3 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ally-reit/DESIGN.md @@ -0,0 +1,152 @@ +--- +version: alpha +name: ALLY REIT +category: "Thai Brands" +description: "Thai-language investor site of ALLY Freehold and Leasehold Real Estate Investment Trust, set in Avenir LT Std with kohinoor-thai fallback, deep teal #056967 ink and footer, mint #4bcfab pill buttons (120px radius, 11px uppercase type), dark brown-black #35292b body text and a white canvas." +colors: + canvas: "#ffffff" + ink: "#056967" + primary: "#4bcfab" + on-primary: "#ffffff" + ink-body: "#35292b" + surface-deep: "#045452" + border-beige: "#ddd7c8" +typography: + display: + fontFamily: "\"Avenir LT Std\", kohinoor-thai, sans-serif" + fontSize: 48px + fontWeight: 700 + lineHeight: 81.6px + textTransform: uppercase + display-mobile: + fontFamily: "\"Avenir LT Std\", kohinoor-thai, sans-serif" + fontSize: 48px + fontWeight: 600 + lineHeight: 76.8px + textTransform: uppercase + body: + fontFamily: "\"Avenir LT Std\", kohinoor-thai, sans-serif" + fontSize: 16px + fontWeight: 300 + lineHeight: 25.6px + button: + fontFamily: "\"Avenir LT Std\", kohinoor-thai, sans-serif" + fontSize: 11px + fontWeight: 500 + lineHeight: 16.5px + letterSpacing: 0.55px + textTransform: uppercase +rounded: + xs: 5px + sm: 6px + md: 7px + lg: 8px + xl: 36px + 2xl: 100px + 3xl: 120px + pill: 9999px +spacing: + s1: 4px + s2: 5px + s3: 6px + s4: 8px + s5: 10px + s6: 12px + s7: 16px + s8: 20px + s9: 24px + s10: 32px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 4px + height: 48px + link: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 4px + nav: + textColor: "{colors.ink-body}" + nav-link: + textColor: "{colors.ink-body}" + typography: "{typography.body}" + footer: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" +--- + +## Overview + +ALLY REIT is the investor website of "ALLY Freehold and Leasehold Real Estate Investment Trust" (title: "ทรัสต์เพื่อการลงทุนในอสังหาริมทรัพย์และสิทธิการเช่าอสังหาริมทรัพย์ อัลไล"). The address `https://www.allyreit.com/` first serves a memorial entry page (a tribute for 13 October with a portrait and an "Enter Site" / "เข้าสู่หน้าหลัก" button); that page is not the brand site, so the measurements here were taken from the real Thai home page `https://www.allyreit.com/th/home`, reached through the entry page's own link. + +The home page is a Thai-language investor communication page. A full-width photographic hero shows a render of a community mall with the headline "ร่วมลงทุนและพัฒนา สถานที่แห่งความสุข ให้เติบโตและยั่งยืน" in white over the image, with four translucent pill shortcuts along the bottom edge. Below it a white band opens "เกี่ยวกับ ALLY REIT" (About ALLY REIT) in two columns, followed by "จุดเด่นของ REIT" (REIT highlights) with four key figures in large mint numerals and line icons: 15 projects, 165,038 square metres of net lettable area, 89.7 percent average occupancy and a 9.2 percent annual yield, each with an "as of 30 June 2026" caption. Then come "อสังหาริมทรัพย์ที่ลงทุน" (invested properties) as a bordered logo grid of the properties (Crystal Design Center, The Crystal, ALLY VILLAGE branches), investor corner and latest news. + +The tone is calm, institutional and green: teal and mint carry a "sustainable growth" message, and imagery is architectural renders rather than people. + +## Colors + +`canvas` is #ffffff. `ink` #056967, a deep teal, is the colour of section headings and of the footer background and is the second most-read text colour (657 characters). `ink-body` #35292b, a warm near-black, is the running body and navigation text (493 characters). `primary` #4bcfab is a mint used for the pill buttons ("ดูเพิ่มเติม", "ติดต่อเรา", "สมัครรับข่าวสาร"), for the large statistic numerals and for small accents; `on-primary` is white text. `surface-deep` #045452 is a darker teal measured as a background area in the footer region. `border-beige` #ddd7c8 is the measured border colour of the property logo grid and is also used at low alpha (#ddd7c826) as a section tint. + +The "link" variant is a white pill with teal text (#056967) used for "เกี่ยวกับเรา". White text is used over the hero image and on the teal footer. A black layer measured at the viewport size belongs to the dark scrim of a payment-announcement pop-up that was open when the page was captured; it is not a brand colour and is not tokenised. The pop-up itself (a green card announcing an interim distribution) and the cookie control at the lower left are overlays, not brand UI, and are not documented as components. + +Bootstrap variables such as --bs-primary #0d6efd exist in the stylesheet and are framework defaults; they are not brand colours. + +## Typography + +The site loads Avenir LT Std (weights 300, 500, 900 and a regular) for Latin characters and kohinoor-thai (300, 400, 500, 600, 700) for Thai, and a custom icon font named "ally". The CSS stack is `"Avenir LT Std", kohinoor-thai, sans-serif`. Avenir LT Std carried all 2615 measured characters on the page. + +Measured scale: `display` 48px / 81.6px at weight 700, uppercase (the hero headline); `display-mobile` 48px / 76.8px at weight 600 (the "เกี่ยวกับ ALLY REIT" heading in the 390px pass); `body` 16px / 25.6px at weight 300; `button` 11px / 16.5px at weight 500 with 0.55px letter-spacing, uppercase. Other measured sizes include 14px, 24px, 36px and 20px. Weight 300 is the dominant text weight (1180 characters), so body copy reads light against bold headings. Avenir LT Std and kohinoor-thai are commercial families; if they are unavailable, any humanist sans with a Thai companion can stand in, but no substitute was measured. + +## Layout + +The measured page is 1280px wide and 5442px tall. The header is 100px tall, with a logo on the left and a search icon, EN language switch and menu icon on the right (nav text colour #35292b). The hero is full-bleed; below it content sits in a centred container with two-column splits for the About block, a four-column statistic row separated by thin vertical rules, and a five-column bordered logo grid. Measured gaps are 16px (26 uses), 4px and 10px; paddings 12px (57 uses), 4px, 8px and 32px. + +## Elevation & Depth + +Shadows are light. Three elements carry `rgba(0, 0, 0, 0.1) 0px 0px 40px 0px` (a wide soft glow), one form control carries a Bootstrap focus ring `rgba(13, 110, 253, 0.25) 0px 0px 0px 4px` (a framework default) and one element has `rgba(204, 204, 204, 0.5) 0px 2px 10px 0px`. Depth otherwise comes from imagery, the translucent hero shortcut pills and layering of the teal footer. + +## Shapes + +Measured radii: 5px, 6px, 7px, 8px (small controls), 36px, 100px, 120px (the button pill), and 50% for round icon buttons. Primary buttons are 48px tall with a 120px radius, rendering as a full pill; the token `pill` records the 9999px equivalent. The logo grid and statistic row use square corners and hairline borders. + +## Components + +**Primary button.** Mint #4bcfab fill, white 11px uppercase text at weight 500 with 0.55px tracking, 120px radius, 48px high; a small round play-style icon sits at its left end in the capture. + +**Link pill.** White fill, teal #056967 text, same type and radius, used on dark photography. + +**Navigation.** Header links in #35292b at 16px / 25.6px weight 300; a three-link header with a "Toggle navigation" button is what the mobile pass recorded. The site menu (About Us, Investment Properties, Investors, Sustainability, Activities & Promotions, Newsroom, Contact Us) was read from the page text. + +**Statistic block.** Large mint numerals with a unit, a line icon above and a small teal caption below, separated by vertical hairlines. + +**Footer.** Teal #056967 background, white text at 20px / 36px, with management-company and trustee details. + +## Design System Architecture + +No public design system, brand guideline or press kit is linked from the home page (the page text was read and offered none). The de-facto system is a Bootstrap 5 build (the stylesheet exposes the standard --bs-* variables, breakpoints and utility radii) overlaid with brand CSS: Avenir LT Std plus kohinoor-thai, a mint-and-teal palette, pill buttons and a custom "ally" icon font. Brand tokens are therefore expressed in component CSS, not in published variables. + +## Do's and Don'ts + +- Do keep teal #056967 for headings and the footer and mint #4bcfab for actions and key figures. +- Do pair a 300-weight 16px body with bold uppercase display headings. +- Do present figures with an "as of" date caption, as the highlights row does. +- Don't use Bootstrap default blue #0d6efd as a brand colour. +- Don't document the distribution pop-up, cookie control or the black scrim as brand UI. +- Don't use the memorial entry page's gold-brown (#794a00 measured there) as the site palette; it is a one-day tribute treatment. + +## Responsive Behavior + +Measured at 390px: the header shows 3 links and a "Toggle navigation" menu button; cards lay out in at most 2 columns; the About heading stays 48px / 76.8px, body stays 16px / 25.6px, and the primary button keeps 11px type, 48px height and a 120px radius. No other mobile layout data was recorded, so the behaviour of the hero, statistic row and logo grid at that width is not measured. + +## Iteration Guide + +1. Keep tokens as listed; change a value only after re-measuring `https://www.allyreit.com/th/home`. +2. New sections: white canvas, teal #056967 heading at `display` scale, 16px light body in #35292b, one mint pill button. +3. Show numbers in mint with small teal captions and thin vertical dividers. +4. Re-measure with the pop-up closed if exact hero text colours are needed; the capture was taken with an announcement pop-up open. +5. Run `node web/scripts/verify-designs.mjs --slug=ally-reit` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aman/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aman/DESIGN.md new file mode 100644 index 0000000..118d126 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aman/DESIGN.md @@ -0,0 +1,357 @@ +--- +version: alpha +name: Aman +category: "Travel & Hospitality" +description: Aman's site is a warm stone canvas (#f3eee7) with charcoal ink (#313131), serif Lyon Text and Lyon Display for headlines and body, tiny letter-spaced WhitneySSm for eyebrows and buttons, square 0px corners everywhere, and a single flat dark Reserve button. + +colors: + canvas: "#f3eee7" + page-largest: "#ffffff" + ink: "#313131" + ink-muted: "#585858" + ink-black: "#000000" + primary: "#313131" + on-primary: "#f3eee7" + primary-hover: "#625f5f" + surface-band: "#e6e2db" + secondary: "#404040" +typography: + heading: + fontFamily: "\"Lyon Text Web\", \"Lyon Display Web\", \"Times New Roman\", serif" + fontSize: 31.08px + fontWeight: 400 + lineHeight: 45.066px + letterSpacing: 0.5px + eyebrow: + fontFamily: WhitneySSm, "Lyon Display Web", "Times New Roman", serif + fontSize: 10.108px + fontWeight: 400 + lineHeight: 14.6566px + letterSpacing: 2px + textTransform: uppercase + body: + fontFamily: "\"Lyon Display Web\", \"Times New Roman\", serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 20.3px + letterSpacing: 0.8px + button: + fontFamily: WhitneySSm, "Lyon Display Web", "Times New Roman", serif + fontSize: 14px + fontWeight: 400 + lineHeight: 20.3px + letterSpacing: 0.7px + link: + fontFamily: WhitneySSm, "Lyon Display Web", "Times New Roman", serif + fontSize: 13px + fontWeight: 400 + lineHeight: 18.85px + letterSpacing: 0.42px + button-secondary: + fontFamily: WhitneySSm, "Lyon Display Web", "Times New Roman", serif + fontSize: 12.32px + fontWeight: 400 + lineHeight: 17.864px + letterSpacing: 0.7px +rounded: + none: 0px +spacing: + s1: 2.8px + s2: 4px + s3: 7.39px + s4: 8.4px + s5: 10px + s6: 14px + s7: 15px + s8: 20px + s9: 24.5px + s10: 28px +components: + button-primary: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 10px 15px + height: 42px + borderColor: "{colors.ink}" + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-secondary: + backgroundColor: "{colors.secondary}" + textColor: "{colors.canvas}" + typography: "{typography.button-secondary}" + rounded: "{rounded.none}" + padding: 7.392px 33.264px + height: 35px + borderColor: "{colors.secondary}" + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + rounded: "{rounded.none}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.none}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.none}" + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.ink-muted}" + rounded: "{rounded.none}" + padding: 0px 24.5px 28px +--- + +# Aman + +## Overview + +Aman is a luxury hotel, resort and residence group, and its home page is quiet to the point of austerity. The +measured page is 5,511px tall at 1,280px wide, and almost all of it is photography on a warm, stone-coloured +canvas (#f3eee7). Type is small and serif, UI chrome is nearly absent, and nothing on the page has a rounded +corner or a drop shadow. + +The capture reads top to bottom as: +1. A slim header, 88px tall: hamburger icon and "Menu" on the left, a search icon, the centred AMAN wordmark (a + spaced-out custom lettering with a macron over the A), and on the right an underlined "English" selector and + a dark "Reserve" button. +2. A very large edge-to-edge hero image (a blurred skier in snow) with a small uppercase eyebrow "MOUNTAIN + ESCAPES", the headline "Grand Ski Adventures" and an underlined "Discover more" link. +3. A two-up row: a wide landscape interior (desert view through a picture window, "HOTELS & RESORTS / Explore the + World of Aman") beside a narrower portrait exterior ("NOW OPEN / Amanvari, Mexico"), each with a short paragraph. +4. "Seasonal Experiences": a heading and paragraph on the left and a horizontally scrolling row of square-ish cards + (Aman Villas, A Novak Djokovic Programme, a faded City Escapes card cut off at the edge). +5. A white (#ffffff) footer starting with "Get inspired" and a newsletter prompt. + +Tone is restrained and declarative: "Uncover new horizons with Aman - from soul-soothing escapes by the coast to +transformational journeys that awaken the spirit - across 36 hotels and resorts in 21 countries." Calls to action +are all the same two words, "Discover more". + +Key characteristics: +- Warm stone canvas (#f3eee7) instead of white; white (#ffffff) is reserved for the footer. +- Charcoal ink (#313131) as both text colour and button fill; no accent hue at all. +- Three typefaces: Lyon Text Web, Lyon Display Web (serifs) and WhitneySSm (sans) for small functional text. +- Zero border radius, no measured shadows. +- Photography does all the colour work; the interface is monochrome. +- Generous letter-spacing on small text: 0.42px to 2px. + +## Colors + +| Token | Value | Role | +|---|---|---| +| canvas | #f3eee7 | Page background, header (nav), button text | +| page-largest | #ffffff | Largest-area background in the DOM walk; the footer | +| surface-band | #e6e2db | Second-largest background area; a deeper stone for bands and tiles | +| ink | #313131 | Most-read text colour; primary button fill | +| ink-muted | #585858 | Paragraph copy, footer text | +| ink-black | #000000 | Rare pure-black text (69 characters) | +| primary | #313131 | Reserve button background | +| on-primary | #f3eee7 | Reserve button text | +| primary-hover | #625f5f | Reserve button on hover | +| secondary | #404040 | Secondary button fill ("Sign Up") | + +### Observations +- There is no brand hue. The palette is a stone (warm off-white), a deeper stone (#e6e2db) and a graded set of + charcoals. This agrees with the brand's own identity + description: a write-up of the 2016 identity by studio Construct calls the palette "sand, soil and clay" and the + finishes "dyed uncoated papers, embossed boards and a gold foil print finish" + (https://bpando.org/2016/02/16/branding-aman/). Gold foil is a print finish; no gold appears in the web measurements. +- Primary and ink are the same colour (#313131). The button is distinguished by being filled, not by hue. +- Hover only lightens the button to #625f5f (the one hover state measured). +- The canvas on screen is #f3eee8 in the capture (JPEG rounding of #f3eee7); #ffffff covers more DOM area because of + nested containers and the footer, but the viewer sees stone. + +## Typography + +### Families +- **Lyon Text Web** - used for the heading role (31.08px). Lyon is a serif by Kai Bernau; Lyon Text began as his + 2006 Type + Media graduation project and was reworked by Commercial Type, which added Lyon Display in 2010 + (https://type.today/en/journal/lyon). Display has sharper serifs and higher contrast. +- **Lyon Display Web** - the body font (14px) and the dominant family by character count (1,995 characters). The + loaded face is weight 300; the CSS declares body at 400. +- **WhitneySSm** - a sans used for eyebrows, buttons and links. Its foundry and exact style were not confirmed from an + official source, so no claim is made beyond the face name. + +### Scale +| Token | Family | Size | Weight | Line height | Tracking | +|---|---|---|---|---|---| +| heading | Lyon Text Web | 31.08px | 400 | 45.066px | 0.5px | +| eyebrow | WhitneySSm | 10.108px | 400 | 14.6566px | 2px, uppercase | +| body | Lyon Display Web | 14px | 400 | 20.3px | 0.8px | +| button | WhitneySSm | 14px | 400 | 20.3px | 0.7px | +| link | WhitneySSm | 13px | 400 | 18.85px | 0.42px | +| button-secondary | WhitneySSm | 12.32px | 400 | 17.864px | 0.7px | + +Other measured sizes without a role token: 12.95px (1,259 characters, the second most common), 19.6px and 24.108px +(the card titles and section headings in the capture are of this order). + +### Principles +- Everything is small. Body is 14px with 0.8px tracking, which opens the text and gives it a quiet, printed feel. +- Hierarchy comes from family, case and spacing, not weight: all roles are weight 400. +- Eyebrows are tiny, uppercase, widely tracked sans ("MOUNTAIN ESCAPES", "NOW OPEN", "WELLNESS RETREATS"). +- Line height is about 1.45 across the board. +- Links and "Discover more" are sans with an underline rule beneath, not coloured text. + +### Font substitutes +Lyon and Whitney are commercial. Reasonable open stand-ins: a Garamond-lineage serif such as EB Garamond or Cormorant +Garamond for the Lyon pair, and a humanist sans such as Source Sans 3 for WhitneySSm. The site's own fallback is +`"Times New Roman", serif`. + +## Layout + +- Page width measured at 1,280px. In the capture the content sits on a gutter of about 18px at the 960px-wide + screenshot scale, so images run nearly edge to edge. The footer padding is 0px 24.5px 28px; the 24.5px side + gutter matches the spacing scale. +- The header is 88px tall (`--header-menu-height-lg`), shrinking to 4rem when scrolled (`--header-menu-scrolled`), + and the booking bar is 70px tall (`--booking-bar-height-lg`). +- Rows alternate: one full-width hero, a 2:1 two-column pair, and a heading column beside a horizontal card rail. +- Captions sit under images with a small gap: eyebrow, title, short paragraph, then an underlined link. +- Spacing scale (measured): 2.8, 4, 7.39, 8.4, 10, 14, 15, 20, 24.5 and 28px. +- Columns are separated by a `--bn-col-gap` of 49px. + +## Elevation & Depth + +None. No box-shadow was measured on the page and no border radius either. Depth is created by: +- photography with real depth of field and reflections; +- a tone step between the stone canvas (#f3eee7), the deeper stone (#e6e2db) and white (#ffffff); +- the final card in the rail fading toward the canvas to imply more content off-screen. + +There are no cards with borders, no overlays on text and no frosted surfaces. Button borders, where present, are +the same colour as the fill. + +## Shapes + +Only one radius exists: 0px, on buttons, nav, links and footer. Images are rectangular; portrait, landscape and +square crops are mixed to create rhythm. The AMAN wordmark and the thin line icons (hamburger, magnifier) provide the +only curves. The wordmark is a custom lettering inspired, according to its designers, by early alphabets, Futhark +and stone carving, with an A that has no crossbar (https://bpando.org/2016/02/16/branding-aman/). + +## Components + +### Primary button ("Reserve") +Fill #313131, text #f3eee7, 42px tall, padding 10px 15px, 0px radius, WhitneySSm 14px with 0.7px tracking. On hover +the fill and border change to #625f5f. + +### Secondary button ("Sign Up") +Fill #404040, text #f3eee7, 35px tall, padding 7.392px 33.264px, 0px radius, 12.32px WhitneySSm. + +### Text link ("Discover more", "English") +13px WhitneySSm, ink #313131, underlined by a thin rule sitting just under the text. No hover colour was measured. + +### Navigation +Canvas-coloured (#f3eee7) header, 88px tall, 14px sans for "Menu", "English", with hamburger and search glyphs, the +wordmark centred. No border or shadow beneath it in the capture. + +### Content card +Image on top (square, portrait or landscape), then eyebrow, serif title (about 19.6 to 24px), two to four lines of +14px body in #585858, then an underlined link. No card background, border or radius: the card is defined only by the +image and the column. + +### Hero +Large media block with an eyebrow, a 31.08px serif headline and an underlined link below, rather than overlaid on the +image. + +### Footer +White (#ffffff) background, text #585858, a "Get inspired" newsletter prompt ("To receive updates about exclusive +experiences"), padding 0px 24.5px 28px, height about 1,035px in the measurement. + +## Design System Architecture + +No public design system, brand-guidelines site or token package from Aman was found. A search returned a third-party +page titled "aman brand guidelines" and a design-token page on shadcn.io; neither is an official Aman source and +neither is used. Description therefore rests on the shipped CSS: + +- **Namespaces.** Root variables use an `--ai-` prefix (`--ai-font-size-h1` to `--ai-font-size-h6`, `--ai-font-size-base`, + `--ai-font-size-s`, `--ai-font-size-xs`, `--ai-font-size-xxs`, `--ai-text-color-muted` pointing at `--color-text-light`, + `--ai-icon-size` 1.25rem, `--ai-icon-size-lg` 2rem) which in turn reference un-prefixed variables such as + `--font-size-h1`. This reads as a size-and-colour token layer wrapped by a component layer. +- **Layout variables.** `--header-menu-height-lg` (88px), `--header-menu-scrolled` (4rem), `--header-menu-content-offset` + (20px), `--booking-bar-height-lg` (70px), `--bn-col-gap` (49px). +- **Font loading.** The CSS contains font-face rules for Lyon, Lyon Display Web, Lyon Text Web, WhitneyBook, SuisseBP, + Beausite, Calligraph810 and Classic Roman, plus Noto Serif JP and SC for Japanese and Chinese. Only Lyon Display Web + (300), Lyon Text Web (400) and WhitneySSm (400) were actually rendered on the home page. +- **Brand identity.** The wordmark and original identity were created by the London studio Construct in 2016 + (https://bpando.org/2016/02/16/branding-aman/). This is an identity description, not a published UI system. + +Sources: bpando.org's 2016 write-up of the identity, type.today's journal on Lyon, and the site's own CSS. + +## Imagery and Voice + +- **Subjects.** Interiors with a view outward (a desert through a picture window), architecture reflected in pools, + a portrait of a named ambassador, and motion footage (the blurred skier). People appear rarely and are never + posed as models selling a product. +- **Light.** Warm, low sun and dusk blues; the photographs share the stone and clay tones of the canvas, so the + page reads as one palette even though the interface itself is monochrome. +- **Crops.** Hero is wide and short of the viewport; the pair below is wide plus tall; the rail is near-square. +- **Copy.** Short eyebrow categories (Mountain Escapes, Hotels & Resorts, Now Open, Exclusive Hideaways, Wellness + Retreats, City Escapes), a one-line title, two to four lines of description, and the same link text every time. +- **Density.** Low. Large gaps separate the rows; the first screen shows one image and one headline. + +## Microcopy Patterns + +| Slot | Example from the capture | Style | +|---|---|---| +| Eyebrow | MOUNTAIN ESCAPES | uppercase, 10.108px, 2px tracking | +| Title | Grand Ski Adventures | serif, 31.08px | +| Card title | Aman Villas | serif, about 19.6 to 24px | +| Body | Time together is made effortless... | 14px, #585858 | +| Link | Discover more | 13px sans, underlined | +| Header | Menu, English, Reserve | 14px sans | + +Sentence case for titles, no exclamation marks, no prices, no urgency language. Facts are stated as numbers in +prose ("36 hotels and resorts in 21 countries"). + +## Do's and Don'ts + +### Do +- Use the stone canvas (#f3eee7) as the page ground and white (#ffffff) only for the footer. +- Keep ink at #313131 and secondary copy at #585858. +- Use zero radius everywhere. +- Set eyebrows in 10.108px uppercase WhitneySSm with 2px tracking. +- Set titles in Lyon Text (31.08px, weight 400) and body in Lyon Display (14px, 0.8px tracking). +- Let photography carry colour, mixing landscape, portrait and square crops. +- Use one repeated call to action wording, "Discover more", with an underline. +- Make the only filled button the Reserve action. + +### Don't +- Don't add an accent colour; the system has none. +- Don't round corners, add shadows, or put cards in boxes. +- Don't use bold weights; every measured role is 400. +- Don't place text over the hero image; captions sit beneath. +- Don't use pure black (#000000) for body text. +- Don't tighten the tracking; the airy spacing is part of the voice. + +## Responsive Behavior + +Only the desktop capture (1,280px) and a mobile font-size sample were available. Mobile text sizes are the same as +desktop for the leading sizes (14px, 12.95px, 13px, 19.6px, 10.108px), so type does not rescale. The CSS exposes +a large and a scrolled header height (`-lg`, 4rem), implying a smaller mobile header. Observed in the capture: the card +rail already clips its last card at the viewport edge, which is the pattern a narrower screen would extend. Further +mobile behaviour was not measured; the stacking of the 2:1 row on small screens is an expectation, not an observation. + +## Iteration Guide + +1. Set the canvas to #f3eee7, ink to #313131, muted text to #585858. +2. Load Lyon Text, Lyon Display and Whitney (or the substitutes above); set body to 14px / 20.3px with 0.8px tracking. +3. Build the header: menu glyph and label left, centred wordmark, underlined language selector and the dark Reserve button + right (42px tall, 10px 15px padding, 0px radius). +4. Compose the hero as an image, then eyebrow (10.108px, uppercase, 2px tracking), 31.08px title, underlined link. +5. Add the 2:1 image row and the horizontal card rail, each with eyebrow, title, paragraph and "Discover more". +6. Use #e6e2db for any needed tonal band; finish with a white footer. +7. Check: no radius, no shadow, no accent colour, weight 400 throughout. + +When extending, add components by tone (a deeper stone or darker charcoal), not by hue. + +## Appendix: measured facts + +- Page title: "Aman Resorts, Hotels & Residences - Explore Luxury Destinations"; scroll height 5,511px; 529 visible elements. +- Backgrounds by area: #ffffff (1,324), #e6e2db (1,145), #f3eee7 (225), #404040 (9), #313131 (6). +- Text colours by characters: #313131 (2,542), #585858 (1,512), #000000 (69), #f3eee7 (14). +- Families by characters: Lyon Display Web (1,995), WhitneySSm (1,828), Lyon Text Web (314). +- Sizes by characters: 14px (2,033), 12.95px (1,259), 13px (368), 19.6px (217), 10.108px (146), 31.08px (57), + 24.108px (40), 12.32px (17). +- Border radii: none measured; box shadows: none measured. +- Hover: Reserve button #313131 to #625f5f; no other hover captured. +- The extractor found no h1; "Grand Ski Adventures" is an h2 and "HOTELS & RESORTS" an h3. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amanah-leasing/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amanah-leasing/DESIGN.md new file mode 100644 index 0000000..c34fe5c --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amanah-leasing/DESIGN.md @@ -0,0 +1,180 @@ +--- +version: alpha +name: Amanah Leasing +category: "Thai Brands" +description: "Amanah Leasing PCL (amanah.co.th), a Thai car-title and refinance lender built in Webflow: forest green #1a8732 and lime #3dae2b, dark green ink #1a5632, Athiti type at 400 to 600, 100px pill buttons with a soft 0 2px 5px shadow, 10px cards." +colors: + canvas: "#ffffff" + ink: "#1a5632" + primary: "#1a8732" + on-primary: "#ffffff" + accent-orange: "#f5a800" + lime-green: "#3dae2b" + white-smoke: "#f2f2f2" + ink-grey: "#808080" + ink-charcoal: "#333333" + hairline: "#cccccc" +typography: + display: + fontFamily: Athiti, sans-serif + fontSize: 26px + fontWeight: 400 + lineHeight: 32px + display-mobile: + fontFamily: Athiti, sans-serif + fontSize: 20px + fontWeight: 400 + lineHeight: 26px + heading: + fontFamily: Athiti, sans-serif + fontSize: 20px + fontWeight: 600 + lineHeight: 26px + button: + fontFamily: Athiti, sans-serif + fontSize: 22px + fontWeight: 500 + lineHeight: 32px + nav: + fontFamily: Athiti, sans-serif + fontSize: 21px + fontWeight: 400 + lineHeight: 20px + button-secondary: + fontFamily: Athiti, sans-serif + fontSize: 18px + fontWeight: 600 + lineHeight: 24px + input: + fontFamily: Athiti, sans-serif + fontSize: 18px + fontWeight: 400 +rounded: + xs: 5px + sm: 10px + md: 14px + lg: 18px + xl: 24px + 2xl: 100px + pill: 9999px +spacing: + s1: 5px + s2: 8px + s3: 9px + s4: 10px + s5: 12px + s6: 15px + s7: 16px + s8: 20px + s9: 30px + s10: 40px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.2xl}" + padding: 9px 40px + height: 50px + boxShadow: rgba(0, 0, 0, 0.2) 0px 2px 5px 0px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button-secondary}" + rounded: "{rounded.2xl}" + padding: 9px 20px + height: 42px + nav: + textColor: "{colors.white-smoke}" + nav-link: + textColor: "{colors.white-smoke}" + typography: "{typography.nav}" + padding: 0px 15px + text-input: + backgroundColor: "{colors.lime-green}" + textColor: "{colors.white-smoke}" + typography: "{typography.input}" + rounded: "{rounded.xs}" + padding: 8px 12px + height: 50px + borderColor: "{colors.hairline}" + card: + textColor: "{colors.ink}" + rounded: "{rounded.sm}" + boxShadow: rgba(0, 0, 0, 0.2) 0px 2px 5px 0px +--- + +## Overview + +Amanah Leasing PCL's homepage (title "Amanah Leasing PCL. | บริษัทสินเชื่อรถยนต์ รีไฟแนนซ์รถยนต์ ไม่เช็คเครดิต") sells car-registration loans, refinancing and private-sale financing in Thai. The capture shows a header with the green "AMANAH Leasing" wordmark, a Thai call-center number (02-091-6456) and a Facebook page badge; a dark-green navigation bar; a hero carousel of smiling staff in green uniforms with a rate strip ("18.50% - 24.00% ต่อปี"); three rounded green service tiles (car-title loan, transfer refinance, private car sale) each with a yellow circular icon; an online loan application form with green filled fields; and a news-and-activities row. A 34th-anniversary popup was open in the capture and a column of floating contact icons sits at the right; both are overlays and excluded from the system. + +The brand reads as green throughout: three named greens, one orange accent and a very light grey. The extractor recorded the site's own root variables, so the colors are named by the site: `--forest-green` #1a8732, `--lime-green` #3dae2b, `--black` #1a5632 (a dark green used as ink), `--black-2` #333, `--white-smoke` #f2f2f2, `--light-grey` #ccc, `--orange` #f5a800, `--grey` grey and `--white` #fff. Voice is friendly and procedural: "สมัครสินเชื่อ ออนไลน์", "กรุณากรอกข้อมูลของท่านให้ครบถ้วน" (please complete your details), and a reassuring consent line before submit. + +Imagery and art direction in the capture: the hero photographs staff in matching green polos holding car keys and loan documents, flanked by translucent leaf shapes and diagonal green panels; service tiles stack a stock photograph (coins and a toy car, a bank building, a handshake) over a rounded green panel with a yellow circle icon and a white Thai label, and a short grey caption sits beneath each tile. The application form uses large green input boxes with white placeholder text, labels in dark green above each field, a small checkbox for consent and a centered green pill submit button. News cards show announcement graphics with a date in small grey text above a bold green headline. + +## Colors + +- **`{colors.canvas}` #ffffff:** page ground; the capture's lower half sits on a soft grey-to-white gradient. +- **`{colors.ink}` #1a5632:** the dominant text color (1,652 characters) and the site's `--black`. It is a deep green, not black. +- **`{colors.primary}` #1a8732:** forest green, the CTA and button fill, `--forest-green`. White text on it is `{colors.on-primary}`. +- **`{colors.lime-green}` #3dae2b:** lighter green used for form fields, the second stop of the green gradient (the CTA candidate measured `linear-gradient(135deg, rgb(26, 135, 50), rgb(61, 174, 43))`) (185 area weight). +- **`{colors.white-smoke}` #f2f2f2:** light grey fill and the text color on green surfaces (105 characters). +- **`{colors.ink-grey}` #808080** (445 characters) and **`{colors.ink-charcoal}` #333333** (270) are secondary text. **`{colors.hairline}` #cccccc** is the border color on inputs; a #cccccc4d translucent fill is the largest background by area (472). +- **`{colors.accent-orange}` #f5a800:** published as `--orange`; measured as a small background area (weight 1), and the capture shows yellow-orange icon circles on the service tiles. A red text color #ff0000 was measured for 60 characters; its role was not identified and it is not a token. + +## Typography + +Athiti supplies 2,774 counted characters and Open Sans 63. Loaded faces include Athiti at 300, 400, 500, 600 and 700, Open Sans italics and the Webflow icon font. + +- **Display `{typography.display}`:** Athiti 26px, weight 400, line-height 32px, white on the hero ("สินเชื่อทะเบียนรถยนต์"). On mobile the extractor's h1 candidate is the white "สมัครสินเชื่อ" label at 20px, line-height 26px, 91px wide (`display-mobile`); it is a floating-button label rather than a page heading. +- **Heading `{typography.heading}`:** Athiti 20px, weight 600, line-height 26px. +- **Button `{typography.button}`:** Athiti 22px, weight 500, line-height 32px. **Secondary button:** 18px, weight 600, line-height 24px. +- **Nav `{typography.nav}`:** Athiti 21px, weight 400, line-height 20px. +- **Input `{typography.input}`:** Athiti 18px, weight 400. +- Frequent sizes by characters: 18px (997), 16px (600), 22px (376), 20px (243), 14px (180), 21px (178), 24px (156), 26px (85) and 44px (22). Weights: 600 (1,179), 400 (1,172), 500 (434), 700 (52). + +## Layout + +The page is 1280px wide with a scroll height of 3,791px. Sections: header, navigation, hero carousel, three-column service tiles, two-column application form (eight labeled fields in four rows), centered consent block and submit button, then a four-column news row on a pale gradient. Paddings measured: 5, 8, 9, 10, 12, 15, 16, 20, 30 and 40px. Buttons use 9px 40px (primary) and 9px 20px (secondary); inputs 8px 12px at 50px height; nav links 0px 15px. + +## Elevation & Depth + +A soft drop shadow `rgba(0, 0, 0, 0.2) 0px 2px 5px 0px` was measured on the primary button and cards. Service tiles and news cards sit on pale gradients with a faint grey translucent fill (#cccccc4d), giving a layered, rounded look. The hero uses photography with a dark translucent band under the rate text. + +## Shapes + +Radii measured: 100px (13 elements, the pill buttons), 5px (6, inputs), 100% (5, circular icons), 10px (4, cards), 18px (4), `18px 18px 0px 0px` (4, tile tops), 14px (1) and 24px (1). Tokens `xs` 5px, `sm` 10px, `md` 14px, `lg` 18px, `xl` 24px and `2xl` 100px; primary and secondary buttons use `{rounded.2xl}`, inputs `{rounded.xs}` and cards `{rounded.sm}`. Service tiles round their top corners at 18px. + +## Components + +- **Primary button (`button-primary`):** fill `{colors.primary}` (the measured candidate also carries the green-to-lime 135-degree gradient), white Athiti 22px 500, radius 100px, padding 9px 40px, height 50px, soft shadow; measured label "ดูข่าวสารและกิจกรรมทั้งหมด >". +- **Secondary button (`button-secondary`):** `{colors.primary}` fill, white Athiti 18px 600, radius 100px, padding 9px 20px, height 42px. +- **Nav and nav-link:** text `{colors.white-smoke}` on the dark green bar, Athiti 21px, padding 0px 15px. +- **Text input:** `{colors.lime-green}` fill, `{colors.white-smoke}` text, Athiti 18px, radius 5px, padding 8px 12px, height 50px, border color `{colors.hairline}`. +- **Card:** 10px radius, `{colors.ink}` text, soft shadow. +- **Service tile:** rounded green panel with a yellow circle icon and white label under a photo. + +## Design System Architecture + +No public design system or brand guideline was found, and none was searched for. The site defines nine root custom properties for color (listed in the Overview); the loaded icon font is Webflow's, and the consent filter hid a "scrim pop-up" element. The tokens in this file use the site's own color vocabulary where possible (forest-green, lime-green, white-smoke). + +## Do's and Don'ts + +- Do use `{colors.primary}` forest green for actions and `{colors.ink}` dark green for text. +- Do use pill buttons (100px radius) and 10px card corners. +- Do pair green with the small orange accent only for icons. +- Don't use the anniversary popup or the floating contact column as brand components. +- Don't swap the dark green ink for black. +- Don't remove the soft shadow from primary buttons and cards. + +## Responsive Behavior + +Measured at 390px: the h1 candidate is the "สมัครสินเชื่อ" label at 20px with line-height 26px; an h2 "สินเชื่อสำหรับเล่มทะเบียนเป็นชื่อตนเอง" measured 16px, weight 500, line-height 22px in `{colors.ink}`. Layout reflow, menu collapse and tile stacking are not measured. + +## Iteration Guide + +1. Start with `{colors.canvas}`, Athiti and `{colors.ink}` text. +2. Add forest-green pill buttons with white labels and the 0 2px 5px shadow. +3. Use `{colors.lime-green}` for fields and tile panels. +4. Keep the orange for icon accents only. +5. Run `node web/scripts/verify-designs.mjs --slug=amanah-leasing`. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amarin-book/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amarin-book/DESIGN.md new file mode 100644 index 0000000..f7180f3 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amarin-book/DESIGN.md @@ -0,0 +1,169 @@ +--- +version: alpha +name: Amarin Books +category: "Thai Brands" +description: "Online bookstore of the Amarin publishing group in chuanpim-x type (13.6 to 25.6px, uppercase headings), on white with #334862 slate ink, #149f8e teal as the brand and action color, square 0px buttons, a #ffffffe6 frosted header and #777777 footer text, built on a Flatsome WooCommerce theme." +colors: + canvas: "#ffffff" + ink: "#334862" + primary: "#149f8e" + on-primary: "#f1f1f1" + ink-grey: "#777777" + ink-black: "#111111" + ink-ghost: "#ffffff80" + ink-dark: "#333333" + nav-bg: "#ffffffe6" + nav-text: "#ffffffcc" +typography: + display: + fontFamily: chuanpim-x + fontSize: 25.6px + fontWeight: 700 + lineHeight: 33.28px + textTransform: uppercase + nav-label: + fontFamily: chuanpim-x + fontSize: 22px + fontWeight: 700 + lineHeight: 16px + letterSpacing: 0.44px + textTransform: uppercase + display-mobile: + fontFamily: chuanpim-x + fontSize: 22px + fontWeight: 400 + lineHeight: 22px + heading: + fontFamily: chuanpim-x + fontSize: 25.6px + fontWeight: 700 + lineHeight: 33.28px + textTransform: uppercase + subheading: + fontFamily: chuanpim-x + fontSize: 20px + fontWeight: 700 + lineHeight: 32px + body: + fontFamily: chuanpim-x + fontSize: 16px + fontWeight: 400 + lineHeight: 25.6px + button: + fontFamily: chuanpim-x + fontSize: 13.6px + fontWeight: 700 + lineHeight: 21.76px + textTransform: uppercase + nav: + fontFamily: chuanpim-x + fontSize: 19.2px + fontWeight: 400 + lineHeight: 30.72px + link: + fontFamily: chuanpim-x + fontSize: 16px + fontWeight: 400 + lineHeight: 25.6px +rounded: + xs: 3px + sm: 5px + md: 10px + none: 0px + pill: 9999px +spacing: + s1: 2px + s2: 3px + s3: 5px + s4: 5.44px + s5: 7.19px + s6: 7.5px + s7: 7.68px + s8: 10px + s9: 10.08px + s10: 15px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 5.44px 0px 6.8px + height: 34px + link: + textColor: "{colors.ink-black}" + typography: "{typography.link}" + rounded: "{rounded.none}" + nav: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.nav-text}" + rounded: "{rounded.none}" + nav-link: + textColor: "{colors.nav-text}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + padding: 5px 0px + footer: + textColor: "{colors.ink-grey}" + rounded: "{rounded.none}" +--- + +## Overview + +The measured page is the home page of amarinbooks.com, titled "Amarinbooks.com | ร้านหนังสือออนไลน์ในเครืออมรินทร์" ("online bookstore of the Amarin group"). It sells books from imprints of the Amarin group: the navigation lists publisher families (Entertainment, Literature, Non-Fiction, Kids, with imprints such as Amarin How-To, Prism, Piccolo, Sophia, Steps, Springbooks and Amarin Kids), book categories (literature, translated Japanese and Korean fiction, romance, psychology and self-development, business, travel, history, food and health, lifestyle, home and garden, children's books), E-books, a payment-notification page, an order-status page and "NAK Scoops". + +The first screen is a utility strip in teal with account and order links, a white header with the stacked "AMARIN BOOKS" logo, a cart readout ("CART / ฿ 0.00") in a square outlined counter, and a center menu of bold Thai labels with chevrons. A large promotional slider follows, here a hot-pink "Money Monster" book campaign with a ring of pagination dots. Below it, a "หนังสือใหม่" (new books) section shows a carousel of book covers with Thai-and-English titles, baht prices and a teal outlined "ADD TO CART" button under each, then a wide "see more" bar and a second full-width campaign banner. + +The look is a utilitarian WooCommerce storefront (the markup carries "No products in the cart", wishlist and Quick View controls) with the publisher's book art and banners providing the color. A cookie notice bar with two blue buttons overlays the hero in the capture; it is a consent control and not brand UI, and its blue (#3860be) was excluded from the tokens after re-extraction. + +## Colors + +White (#ffffff) is the canvas and slate navy #334862 is the reading color: it is both the body text color and the theme's link color, and the most-read text color on the page by a wide margin. Teal #149f8e is the brand and action color: it is published in the stylesheet root as --primary-color and --fs-color-primary and --fs-color-secondary, fills the top utility strip and the Quick View buttons, and is the text and 2px border color of the "ADD TO CART" outlined button and of the "see more" bar. Text on teal is #f1f1f1. + +Neutrals are #111111 for links and titles, #333333 for dark labels, #555555 for the section heading, #777777 for footer text and a #777777 footer band, plus #ffffff80 and #ffffffcc for semi-transparent text on dark. The header is a frosted white, #ffffffe6. Light page areas tint to #00000008, an almost-invisible 3% black wash. + +The theme root defines many button variables (for example --color-add-to-cart-background #333333 with hover #4F4F4F, social-share colors such as Facebook #39599E and WhatsApp #00A901, and --fs-color-alert #b20000), and WooCommerce purple #720eec. These are theme defaults for components or states not visible in the measured design, so they are not declared as brand colors; the measured add-to-cart button is teal outline, not the theme's charcoal default. + +## Typography + +One typeface, chuanpim-x, carries all text, with no fallback listed in the measured values; it is a Thai text face loaded as a web font. Sizes are small and compact: 22px accounts for the most characters (book titles and menu labels), followed by 18px, 20px, 13.6px, 12.8px, 14px and 16px. The home page's body baseline is 16px with a 25.6px line height. Section headings, such as "หนังสือใหม่" (the first h2), are 25.6px at weight 700 with a 33.28px line height and uppercase transformation, in #555555. + +Main menu labels are 22px at weight 700 with 0.44px letter spacing, while top-strip links and secondary navigation are 19.2px at weight 400 with a 30.72px line height. Buttons are 13.6px at weight 700, uppercase; the outlined "ADD TO CART" is 20px at weight 700 with a 36px line height and 0.6px tracking. The first heading the extractor found is the menu item "สำนักพิมพ์" (publishers), so the display token here uses the h2 values and keeps the menu label separately as nav-label. + +## Layout + +The page is 1280px wide and 8423px tall. The header is stacked: a thin teal strip of utility links, a white logo-and-cart row with search at the far left, and a centered menu row. The root declares a sticky header height of 125px (--flatsome--header--sticky-height). Content sits in an inner column of about 1190px, which is the measured width of the heading and the home banner link. + +The sections are: a full-width promotional slider, a ruled section title centered in a small outlined tab ("หนังสือใหม่"), a five-up product carousel with pagination dots, a full-width see-more bar and further banners. Each product item stacks cover, title (centered, two lines), price and a button. Spacing values in the tokens are small steps (2, 3, 5, 7.5, 10 and 15px), with larger gaps between sections from padding. + +## Elevation & Depth + +Elevation is minimal. Two small shadow stacks are measured: rgba(0, 0, 0, 0.16) 0px 3px 6px -4px together with rgba(0, 0, 0, 0.23) 0px 3px 6px 0px on seven elements (book covers and controls), and a rgba(0, 0, 0, 0.25) 0px 2px 5px 0px on one. The header is a 90% white veil that lets the page show faintly through it when it sticks. The "see more" bar has a rounded outline and a soft shadow under it in the capture. No layered cards or heavy depth are present; the banners provide visual weight. + +## Shapes + +Radii are mixed. Fully round (999px) is the most common, on ninety-four elements (the carousel pagination dots, round icon buttons and some tabs); 3px appears on forty-five (small buttons and tags), 50% and 100% on twenty-seven (circular icons and avatars), 10px on seven and 5px on two. The theme also declares --rounded-corners-radius: 16px and --add-to-cart-rounded-corners-radius: 16px, though the measured outlined add-to-cart button has a 0px radius. The primary measured buttons and the nav are square. Book covers are rectangular, and the "see more" bar is a wide, softly rounded outline. + +## Components + +Primary button (Quick View): 34px high, #149f8e fill, #f1f1f1 13.6px bold uppercase text, square corners, 5.44px top and 6.8px bottom padding; on hover its text turns white and its border white. Outlined button (Add to cart): 40px high, 24px horizontal padding, 2px #149f8e border, teal 20px bold uppercase text with 0.6px tracking and square corners. + +Header: a #ffffffe6 frosted bar with bold Thai menu labels and chevrons for dropdown groups, a cart counter in a square outline (the count is 0 in the capture) and a search icon at the far left. Utility strip: teal bar with 19.2px light links separated by thin vertical rules and "Login" at the right. Slider: full-width promotional image with round pagination dots below. Product tile: cover, title, baht price, outlined add button. Section tab: a small outlined box centered on a thin horizontal rule. Footer: a TAGS block in #777777 22px uppercase text with 1.1px tracking, and light grey links. The cookie notice with its blue "ยอมรับ" and "ไม่ยอมรับ" buttons is an overlay, not a brand component. + +## Design System Architecture + +No public design system or brand guideline was found on the pages opened; the visible navigation covers imprints, categories and order services only. The system is a Flatsome WordPress theme (variables prefixed --fs- and --flatsome-) with WooCommerce: --fs-color-primary and --fs-color-secondary both #149f8e, --fs-color-success #7a9c59, --fs-color-alert #b20000, --fs-experimental-link-color #334862 (hover #111), --color-headers-background #F4F4F4, and numerous --color-button-style-* variables. Icons come from the theme's fl-icons font. Brand identity is therefore set in the theme options (one teal, one slate link color), and the home page's banners are authored as images. This file records the computed values measured on the live page and the theme variables that match them. + +## Do's and Don'ts + +Do use teal #149f8e for the utility strip, filled Quick View buttons and the outlined add-to-cart and see-more controls. Do set reading text and links in slate #334862, headings in #555555 uppercase, and keep type compact (13.6px to 25.6px) in chuanpim-x. Do keep controls square and outlined with a 2px border, and let publisher artwork supply the color. + +Don't use the theme's charcoal button defaults (#333333 with #4F4F4F hover) for primary actions. Don't use the cookie bar's blue (#3860be) as a brand color. Don't introduce WooCommerce purple. Don't add heavy shadows or round the primary buttons. Don't remove the baht price from beside the title; each product carries both. + +## Responsive Behavior + +A 390px mobile measurement exists. Its first measured link shows a 22px title in weight 400 (instead of the desktop menu label in weight 700), "The Secret of Secrets ความลับแห่งความลับ", and the extractor gave display-mobile as 22px with a 22px line height. The theme defines a sticky header height of 125px, and the carousel and slider are built for swiping, but how the menu and category groups collapse at phone width was not captured, so the stacking behavior is not described. + +## Iteration Guide + +Start with a white page, slate #334862 text and chuanpim-x. Use teal #149f8e only for actions and the utility strip: a 34px filled button with #f1f1f1 13.6px bold uppercase text, and a 40px outlined one with a 2px teal border. Set section headings at 25.6px weight 700 uppercase in #555555 and menu labels at 22px weight 700. Keep the header a 90% white veil, with a thin teal strip above it. Present each book as cover, two-line title, baht price and an outlined add-to-cart button, in a five-up carousel with round dots. Let banners from the publishers' campaigns supply the saturated color, and keep Thai and English titles in the same face. Capture new pages with consent bars dismissed, and measure each component before adding a token. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amarin-corporations/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amarin-corporations/DESIGN.md new file mode 100644 index 0000000..eb097ef --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amarin-corporations/DESIGN.md @@ -0,0 +1,133 @@ +--- +version: alpha +name: Amarin Group +category: "Thai Brands" +description: "Amarin Group English home page (amarin.co.th/en): white and #f6f6f6 sections, teal #00a08e brand panels and icons, grey #666666 Sarabun 15px body, anakotmai Thai headings at 42px, circular controls and flat layout." +colors: + canvas: "#f6f6f6" + page-largest: "#ffffff" + ink: "#666666" + primary: "#00a08e" + on-primary: "#ffffff" + link-blue: "#1779ba" + brand-green-light: "#44b88e" + ink-light: "#999999" + ink-black: "#000000" +typography: + display: + fontFamily: anakotmai_medium + fontSize: 42px + fontWeight: 400 + lineHeight: 58.8px + display-mobile: + fontFamily: anakotmai_medium + fontSize: 30px + fontWeight: 400 + lineHeight: 42px + subheading: + fontFamily: anakotmai_medium + fontSize: 24px + fontWeight: 400 + lineHeight: 33.6px + textTransform: uppercase + body: + fontFamily: Sarabun, sans-serif + fontSize: 15px + fontWeight: 400 + lineHeight: 24px + nav: + fontFamily: anakotmai_light + fontSize: 18px + fontWeight: 700 + lineHeight: 27px +rounded: + pill: 9999px +spacing: + s1: 5px + s2: 8px + s3: 11.2px + s4: 15px + s5: 16px + s6: 20px + s7: 30px +components: + nav: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.ink}" + transform: matrix(1, 0, 0, 1, 0, 0) + nav-link: + textColor: "{colors.link-blue}" + typography: "{typography.nav}" + footer: + textColor: "{colors.page-largest}" +--- + +# Amarin Group + +## Overview +The queued entry was "Amarin Corporations" at amarin.co.th/en/. The measured site is the English home page of Amarin Group, the parent group of Amarin Printing and Publishing (the page title reads "Amarin - บริษัท อมรินทร์พริ้นติ้ง แอนด์พับลิชชิ่ง จำกัด (มหาชน)"), so this file is named after the measured site, Amarin Group. The home page presents the group as an omni-channel media company: a white header with a grey triangular logo and a two-row link bar, a full-width hero photograph of Thai TV and publishing talent under a teal-green gradient, a section "We are number one omni media (Omni Media - Omni Channel)" with five outlined teal icons, a teal "Our Brand" panel with a grid of white brand logos, and a "News and Activities" band with photo cards. + +A video player in the hero shows "Playback error / Please check your internet connection" in the capture; it is a third-party widget in an error state and is not documented as brand UI. The look is clean and light: white and warm-grey (#f6f6f6) sections, one teal-green family, and grey text. + +## Colors +- **canvas** `#f6f6f6` and **page-largest** `#ffffff`: the warm-grey section background and the white header and card areas (white has the largest background weight, 2892). +- **ink** `#666666`: body text, the most-read color (3023 characters). +- **ink-light** `#999999` and **ink-black** `#000000`: captions and the section headings (the 24px "ON PRINT" style uses black). +- **primary** `#00a08e`: the brand teal; background of the "Our Brand" panel (1285 area weight), the color of icon outlines and "Click" links (1532 characters) and the measured border color. The extractor found no filled button, so there is no measured call-to-action fill; teal is chosen as primary because it carries the brand's icons, links and panels. +- **on-primary** `#ffffff`: white text and logos on teal (1088 characters). +- **brand-green-light** `#44b88e`: the lighter green used in the hero gradient and section backgrounds (2629 area weight). +- **link-blue** `#1779ba`: the extractor's navigation link color (1760 characters). It is close to the default blue of the Foundation framework, so it is kept as a link color rather than a brand color. +Other measured colors: `#18644f` (60 characters) and `#08a992` (25), `#28bbaa` border. The root variables also carry the WordPress block-editor palette (`--wp--preset--color--*`: vivid red `#cf2e2e`, vivid orange `#ff6900`, amber `#fcb900`, pale pink `#f78da7`), which is a CMS default and not brand color. + +## Typography +Three families: anakotmai (loaded as "anakotmai_light" and "anakotmai_medium", a Thai-language face), Sarabun (400, a Thai and Latin sans), and FontAwesome for icons. +- **display** anakotmai_medium 42px / 400 / 58.8px (hero heading, white on the photo); on the 390px mobile pass **display-mobile** 30px / 400 / 42px. +- **subheading** anakotmai_medium 24px / 400 / 33.6px, uppercase ("ON PRINT", "ONLINE"). +- **body** Sarabun 15px / 400 / 24px, grey. +- **nav** anakotmai_light 18px / 700 / 27px; the header text measures 15.36px / 400 / 19.968px. +Character counts: anakotmai_medium 3034, Sarabun 2797, anakotmai_light 1902; sizes 15px (2457), 24px (2239), 18px (2187), 16px (334) and 42px (130). Headings use weight 400 of a medium-cut font rather than a bold weight. The WordPress preset sizes are 16px (`--wp--preset--font-size--normal`) and 42px (`--huge`). + +## Layout +Measured at 1280px wide; the header is 101px tall in two stacked link rows. The home page is a stack of full-width sections with centered titles: a hero with a left text column (585px wide) and a video panel at right, a five-column icon row, a six-column logo grid separated by hairline rules into four rows with side arrows, and a three-card news row. Spacing tokens come from measured paddings and gaps: 5, 8, 11.2, 15, 16, 20 and 30px. A short white horizontal rule sits above the left-aligned section titles "Our Brand" and "News and Activities". + +## Elevation & Depth +Almost flat. Measured shadows: `0 0 0 1px rgba(0,0,0,0.2)`, `0 0 4px 1px rgba(0,0,0,.08)`, `0 0 5px #cacaca`, and `0 0 10px rgba(0,0,0,0.7)` (the video control). News cards are white rectangles on the teal band; depth comes from color bands and the hero gradient. + +## Shapes +Only one radius is measured: 50% (10 uses), used for circular controls such as the carousel arrow button. Cards, panels and the logo grid are square-cornered. The pill token in the frontmatter (9999px) is the generator's mapping for the 50% circle. + +## Components +No filled button was detected. Measured components: +- **nav**: white background, `#666666` text, 15.36px, two rows with dropdown carets (Products & Services, Investor Relations, Sustainability, Corporate Governance) and plain links (About Amarin Group, News Update, Work with Us, Contact Us), then "TH" and "EN" language links. +- **nav-link**: anakotmai_light 18px / 700 in `#1779ba` for the in-page link style. +- **channel item**: a teal outline icon above an uppercase black label, a teal "Click" link with a small right-pointing triangle, and a grey 15px description. +- **brand logo cell**: white logo on teal, separated by hairline rules. +- **news card**: white card with a photo, a teal bold headline, truncated. +- **footer**: white text on the dark band (not fully captured). + +## Design System Architecture +No public design system or brand guideline was found: the English home page markup contains no brand, design, press or guideline link. The site is a WordPress build (`--wp--preset--*` variables) with the Foundation-style blue link color and FontAwesome icons; the de-facto system is the teal, grey and white palette above with the anakotmai and Sarabun type pair. + +## Do's and Don'ts +- Do use teal `#00a08e` for icons, links and brand panels and white for text on teal. +- Do keep body text grey `#666666` at 15px with a 24px line. +- Do show brand logos in white on a teal field. +- Do set section titles in anakotmai medium with a short white rule above. +- Don't use the WordPress preset palette as brand colors. +- Don't give panels rounded corners; only controls are circular. +- Don't document the video player error state. + +## Responsive Behavior +At 390px the hero h2 measures 30px / 400 / 42px (box 370px by 163px) and the body paragraph stays 15px / 400 / 24px at 340px wide. Navigation collapse, column counts and breakpoints were not measured. + +## Iteration Guide +1. Use white and `#f6f6f6` for page sections and teal for brand bands. +2. Keep type at 15px body, 24px labels and 42px hero. +3. Use outline icons in teal; text in grey. +4. Check any new value against `web/data/extracted/amarin-corporations.json`. +5. Name the brand "Amarin Group" when describing this page. + +## Imagery and Voice +The hero is a posed group photograph of Thai actors in dark formal wear with a green-teal overlay. Section copy is short and promotional English with a slogan flavor: "Fulfill media experience with Amarin Group", "Create and produce all types of digital media with expertise and experience", "Conduct fair events and quality activities with proficiency", "AMARIN TV HD, Channel 34, Creative Television Station, 'Fill the Thought, Full Imagination'" and "Distribute channels both storefront and online". The brand grid lists group brands as white logos (for example Amarin TV, National Geographic Thai edition, Baby&Kids, Dek-D, Living Asean), so brand marks themselves provide the visual variety. + +The English interface is paired with the Thai language switch (TH and EN) in the header, and several news captions in the capture are in Thai, so the site is bilingual at the content level: Thai headings use anakotmai while English headings use the same family's Latin glyphs. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amata/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amata/DESIGN.md new file mode 100644 index 0000000..91ce8ba --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amata/DESIGN.md @@ -0,0 +1,160 @@ +--- +version: alpha +name: AMATA +category: "Thai Brands" +description: "AMATA Corporation home page: pale grey #e4e6e9 page with white cards, deep green #014b3a pill buttons with 100px radius, green #007852 figures, Montserrat headings at 45px and Yantramanav 18px body." +colors: + canvas: "#687d86" + page-body: "#ffffff" + page-largest: "#e4e6e9" + ink: "#000000" + primary: "#014b3a" + brand-green: "#007852" + on-primary: "#ffffff" + ink-green: "#007854" + ink-pale: "#d9dde2" + ink-slate-dark: "#111827" + hairline: "#d5d8db" + nav-text: "#008776" +typography: + display: + fontFamily: Montserrat + fontSize: 45px + fontWeight: 600 + lineHeight: 54px + heading: + fontFamily: Montserrat + fontSize: 28px + fontWeight: 600 + lineHeight: 34px + subheading: + fontFamily: Montserrat + fontSize: 24px + fontWeight: 400 + lineHeight: 33.6px + body: + fontFamily: Yantramanav + fontSize: 18px + fontWeight: 300 + lineHeight: 25.2px + nav: + fontFamily: Montserrat + fontSize: 20px + fontWeight: 400 + lineHeight: 28px + link: + fontFamily: Yantramanav + fontSize: 16px + fontWeight: 400 + lineHeight: 20.8px + button: + fontFamily: Montserrat + fontSize: 14px + fontWeight: 500 + lineHeight: 40px +rounded: + xs: 8px + sm: 10px + md: 12px + lg: 14px + xl: 24px + 2xl: 100px + pill: 9999px +spacing: + s1: 3.25px + s2: 3.5px + s3: 5px + s4: 6px + s5: 8px + s6: 9px + s7: 10px + s8: 12px + s9: 14px + s10: 15px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.page-body}" + typography: "{typography.button}" + rounded: "{rounded.2xl}" + padding: 0px 25px + height: 40px + link: + textColor: "{colors.ink-green}" + typography: "{typography.link}" + nav: + backgroundColor: "{colors.page-body}" + textColor: "{colors.nav-text}" + nav-link: + textColor: "{colors.nav-text}" + typography: "{typography.nav}" +--- + +# AMATA + +## Overview +The measured page is the English home page of AMATA Corporation at amata.com (title "AMATA - Industrial Estates for Manufacturers in Thailand & Vietnam"; document language en-gb). AMATA develops and operates industrial estates, which it calls "Industrial Cities", and the page reads as a corporate and investor-facing site: a white header with the wordmark "AMATA ALL WIN" and a single row of links (Home, About, Our Location, Services, Investor Relations, Sustainability, News/Media, Career, Contact, English), a hero carousel of seven vertical photographic panels about sustainability themes, the headline "Southeast Asia's Leading Industrial Estate Developer" in black and green, statistic cards, a dark green call-to-action banner, a location map with country lists, a "Sustainability" section, FAQs, "News & Updates" with three photo cards, and a contact footer for Thailand, Vietnam, Myanmar and Laos. + +The capture contains several non-brand overlays that are not documented as brand UI or tokens: a grayscale tribute window ("In Remembrance of...") with a dark scrim over the hero, a "Cookie policy" tab, a chat-assistant bubble ("Ask me anything about AMATA... Get Help NOW") and a close icon. The extraction was re-run once with the popup-handling batch and the overlay was still present, so the hero area and the near-black `#0b0b0b` background area (the scrim) are excluded from the palette below. + +## Colors +- **canvas** `#687d86`: slate blue-grey; the generator's canvas pick, which matches the large "AMATA Sustainability" and FAQ section backgrounds (3004 area weight). +- **page-largest** `#e4e6e9`: the pale grey page background that fills most of the page (7663 area weight); **page-body** `#ffffff`: header, stat cards and news cards. +- **ink** `#000000`: headlines and body text (1906 characters); **ink-slate-dark** `#111827` (60) and **ink-pale** `#d9dde2` (111, light text on dark). +- **primary** `#014b3a`: deep green; the fill of the "View All News & Updates" button and of the contact banner (291 area weight). **on-primary** `#ffffff`. +- **brand-green** `#007852`: the green used for statistic numbers, section accents, the question links ("Where can I see land price...") and the "Industrial Estate Developer" half of the headline; nearby greens measured as text are `#007854` (**ink-green**, 649 characters), `#007551` (`--bs-success`) and `#0c8456`. +- **nav-text** `#008776`: teal-green navigation text, also `--bs-primary`, `--bs-info`, `--bs-cyan` and `--bs-blue` in the root variables. +- **hairline** `#d5d8db`: 1px borders and dividers in cards. +Other measured values: a salmon tint `#c57877d7` background (101) and `#c06e6a` text, used for the "Contact Us" label on the banner; `#eeeeee`. The Bootstrap root variables (yellow `#F5D161`, danger `#E53F5F`, orange `#fd7e14`, teal `#20c997`) belong to the framework theme and are not seen in use here. + +## Typography +Montserrat (400, 500, 600 and 700) for headings, navigation and numerals, and Yantramanav (300 and 400) for body text; the root `--bs-font-sans-serif` is 'Yantramanav'. The cookie tab uses a Helvetica, Calibri, Arial stack and is excluded. +- **display** Montserrat 45px / 600 / 54px (h1; black with a green second line). +- **heading** Montserrat 28px / 600 / 34px (white on dark panels). +- **subheading** Montserrat 24px / 400 / 33.6px (the intro statement). +- **body** Yantramanav 18px / 300 / 25.2px. +- **nav** Montserrat 20px / 400 / 28px; the header text measures 14px / 400 / 19.6px. +- **link** Yantramanav 16px / 400 / 20.8px. +- **button** Montserrat 14px / 500 / 40px. +By characters: 18px (3032), 24px (610), 14px (295), 32px (197), 15px (139), 48.75px (135), 36px (108). The statistic numerals in the capture are large green Montserrat figures. + +## Layout +Measured at 1280px wide with a 70px header. The h1 and the intro text sit in a 1200px container; the intro paragraph column is 946px wide and the descriptive paragraph 750px. Statistics sit in two rows of three white cards. The banner is a full-width rounded rectangle. A second container breakpoint set is published in root variables (UIkit: `--uk-breakpoint-s` 640px, `-m` 960px, `-l` 1200px, `-xl` 1600px). Spacing tokens come from measured paddings and gaps: 3.25, 3.5, 5, 6, 8, 9, 10, 12, 14 and 15px. + +## Elevation & Depth +Flat with one soft shadow: `0 0 15px rgba(0,0,0,.05)` on white cards. The other measured box-shadows (`0 0 0 .2rem rgba(0,123,255,.25)`, `0 0 0 .2rem rgba(40,167,69,.25)`) are Bootstrap focus rings. Hierarchy comes from white cards on a pale grey page and one dark green banner. + +## Shapes +Measured radii: 500px (22 uses; circular pills and the arrow controls), 100px (the news button), 24px, 14px, 12px, 10px and 50%. The primary button is a 100px pill, 40px high with 0px 25px padding. White stat cards and the dark banner have small rounded corners (the 12px to 24px range appears once each; their exact mapping to elements was not isolated). + +## Components +- **button-primary**: `#014b3a` fill, white text, Montserrat 14px / 500, radius 100px, padding 0px 25px, height 40px ("View All News & Updates"). +- **nav / nav-link**: white header, teal-green `#008776` Montserrat links. +- **link**: Yantramanav 16px in green for FAQ-style question links with a small right-pointing triangle. +- **statistic card**: white, hairline-ruled, a large green figure and label on the left, and a small right-aligned footnote ("Combined Over All Locations", "Since 1975"). +- **banner**: deep green with a faint large A mark, white 32px heading and a salmon "Contact Us" arrow link. +The cookie tab is excluded (the extractor's first CTA candidate was this cookie control, not a brand button). + +## Design System Architecture +No public design system or brand guideline was found on the pages opened (the home page markup has no brand, design or press link). The site is built on Bootstrap and UIkit: root variables include the `--bs-*` theme set (`--bs-primary` `#008776`, `--bs-success` `#007551`, `--bs-body-color` `#212529`, `--bs-body-line-height` 1.5, `--bs-body-bg` `#FFF`) and `--uk-breakpoint-*` values. The brand palette is a customised Bootstrap theme with teal-green primary and deep green buttons. + +## Do's and Don'ts +- Do use green (`#007852`, `#007854`) for figures and links, black for text, and deep green `#014b3a` for filled buttons and the contact banner. +- Do set statistics large in Montserrat with a small grey footnote. +- Do use white cards on the `#e4e6e9` page. +- Don't treat the tribute overlay, cookie tab or chat bubble as brand components. +- Don't use the Bootstrap palette values that are not seen in use. +- Don't add heavy shadows. + +## Responsive Behavior +Not measured. The extractor's 390px pass returned a security-check interstitial (heading "amata.com", text beginning "This website uses a security s...") instead of the home page, so no mobile data for the brand site exists. Only the published UIkit breakpoints (640px, 960px, 1200px, 1600px) are known. + +## Iteration Guide +1. Use `#e4e6e9` page, white cards, black ink and deep green `#014b3a` actions. +2. Show key figures in green Montserrat 600. +3. Keep copy factual and corporate. +4. Re-measure the page without the tribute overlay before adding hero colors. +5. Check any new value against `web/data/extracted/amata.json`. + +## Imagery and Voice +The hero is a row of tall photographic panels (industrial estates, wastewater recycling, renewable energy) with small white icon-and-label captions such as "100% Wastewater Recycling" and "Renewable Energy"; panels appear tinted green, orange and blue. Photo cards in News & Updates show events and signings. Copy is formal and descriptive: "Every business needs a home and if you are looking for a place to set up or expand your manufacturing base in Southeast Asia, Amata provides the answer. Established in 1989, Amata is a world's leading private developer and operator of industrial real estate sites", and statistics such as "13 Projects", "150+ km² Developed Land", "350K+ People Working", "45 Subsidiaries" and "50 Years Industrial Development". diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amazon/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amazon/DESIGN.md new file mode 100644 index 0000000..d495919 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amazon/DESIGN.md @@ -0,0 +1,185 @@ +--- +version: alpha +name: Amazon +category: "Retail & E-commerce" +description: "Amazon.com storefront system: white #ffffff canvas, near-black #0f1111 text, #131921 navigation bar, a yellow #ffd814 action button with 8px radius, Amazon Ember Modern Display 700 headlines over Arial 400 functional text, and dense bordered card grids where imagery carries all the colour." +colors: + canvas: "#ffffff" + ink: "#0f1111" + primary: "#ffd814" + on-primary: "#111111" + surface-2: "#232f3e" + surface-3: "#131a22" + ink-2: "#dddddd" + ink-3: "#999999" + ink-5: "#2162a1" + ink-6: "#000000" + hairline: "#d5d9d9" + button-primary-border: "#fcd200" + button-secondary-border: "#848688" + nav-bg: "#131921" + nav-text: "#cccccc" +typography: + display: + fontFamily: "\"Amazon Ember Modern Display\", \"Amazon Ember\", Arial, sans-serif" + fontSize: 38.25px + fontWeight: 700 + lineHeight: 38.25px + display-mobile: + fontFamily: "\"Amazon Ember Modern Display\", \"Amazon Ember\", Arial, sans-serif" + fontSize: 32.6454px + fontWeight: 700 + lineHeight: 32.6454px + heading: + fontFamily: "\"Amazon Ember Modern Display\", \"Amazon Ember\", Arial, sans-serif" + fontSize: 36.108px + fontWeight: 700 + lineHeight: 36.108px + button: + fontFamily: Arial, sans-serif + fontSize: 13px + fontWeight: 400 + lineHeight: 30px + nav: + fontFamily: Arial, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 0px + input: + fontFamily: Arial, sans-serif + fontSize: 15px + fontWeight: 400 + lineHeight: 15px +rounded: + xs: 2px + sm: 3px + md: 4px + lg: 5px + xl: 8px + 2xl: 12px + 3xl: 16px + 4xl: 100px +spacing: + s1: 1px + s2: 2px + s3: 3px + s4: 4px + s5: 5px + s6: 6px + s7: 7px + s8: 7.2px + s9: 7.8px + s10: 8px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xl}" + height: 33px + borderColor: "{colors.button-primary-border}" + boxShadow: rgba(213, 217, 217, 0.5) 0px 2px 5px 0px + button-secondary: + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 6px 18px 6px 8px + height: 35px + borderColor: "{colors.button-secondary-border}" + nav: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.nav-text}" + nav-link: + textColor: "{colors.ink-5}" + typography: "{typography.nav}" + padding: 1px 8px 0px 6px + text-input: + textColor: "{colors.on-primary}" + typography: "{typography.input}" + rounded: "{rounded.xl}" + padding: 7px 10px 10px 0px + height: 38px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.xl}" + padding: 16px 20px 20px + boxShadow: rgba(15, 17, 17, 0.5) 0px 0px 14px 0px + +--- + +# Amazon + +## Overview + +Amazon.com's storefront is a dense, utilitarian retail system: a near-black navigation header (`nav-bg` #131921), a white canvas (#ffffff), near-black text (#0f1111), and a grid of promotional and category cards that carry nearly all of the colour. The brand does not use colour in its chrome; saturated yellow, purple and blue appear inside the imagery tiles, while the interface itself stays neutral so that product photography does the selling. The one action colour measured on the page is a yellow button fill (#ffd814, border #fcd200, label #111111) with an 8px radius, seen on the account flyout's "Sign in" button. The measured homepage was fetched from https://www.amazon.com/ (final URL identical) at a 1280px desktop viewport. + +The capture is a very long single scroll of 4-up card rows. A row of four tall hero tiles (free delivery, a Kindle promotion, a Prime Video title, a "Crazy low prices" haul tile) sits directly under the header, followed by repeating bordered cards, each with a bold two-line title, a chevron at the top right, and a 2x2 grid of product thumbnails with small captions. Microcopy is short and promotional ("Crazy low prices", "Apparel under $25", "Level up your PC here"). A delivery-address tooltip ("Dismiss" / "Change Address") overlaps the top left of the capture; it is a geolocation notice, not brand UI, and the stealth re-run of the extractor still shows it. Its buttons are not documented here as brand controls. + +Doubt on record: the primary CTA was auto-detected as the "Sign in" button in the account flyout. It is genuine measured Amazon UI, but it is not visible in the capture, and the capture's search button is a different orange that was not measured as a button fill. + +## Colors + +- **Canvas (#ffffff)** is the page background and the card background. +- **Ink (#0f1111)** is the most-read text colour across the page. +- **Primary (#ffd814)** is the measured button fill; `on-primary` (#111111) is its label colour, `button-primary-border` (#fcd200) its border. +- **Navigation:** `nav-bg` #131921 with `nav-text` #cccccc; the secondary dark panels are `surface-2` (#232f3e) and `surface-3` (#131a22), the footer-like dark bands. +- **Text greys:** `ink-2` (#dddddd) and `ink-3` (#999999) are light-on-dark label colours measured by character count; `ink-6` is pure black (#000000). +- **Links:** `ink-5` (#2162a1) is the measured link blue. +- **Hairline (#d5d9d9)** is the most frequent border colour, used on card outlines and dividers; `button-secondary-border` (#848688) outlines the language/currency selector. + +No browser-default link colours were retained. Imagery-driven colour (yellow, purple, sky blue tiles) is not tokenised because it belongs to campaign artwork rather than the interface. + +## Typography + +Headlines use **Amazon Ember Modern Display** at weight 700, falling back to Amazon Ember and then Arial; the measured desktop h1 is 38.25px on a line height of 38.25px (solid leading, tight stacked headlines), and the mobile h1 is 32.6454px. The section-heading style is 36.108px / 700. Everything functional uses **Arial** at 400: navigation at 14px, the currency selector button at 13px, and the search input at 15px. The page's loaded font list includes Amazon Ember, Amazon Ember Modern Display and Amazon Ember Modern Text in several weights, which fits Amazon's own developer page for Alexa branding that names Amazon Ember Light, Ember Bold and Ember Display as brand typefaces (https://developer.amazon.com/alexa/branding/echo-guidelines/identity-guidelines/typography: Bold for subheads and calls to action, Display for headlines and brand names). That page covers Echo branding, so it is cited only as evidence of the typeface family, not as rules for the storefront. + +Amazon Ember is proprietary. Substitutes: Arial is already the declared fallback; Helvetica Neue or Inter for headlines, kept at weight 700 with tight leading, reproduces the bold, compact look. + +## Layout + +The layout is a card grid. Cards use 8px radius (`rounded.xl`) with 16px 20px 20px padding on white (#ffffff) and a soft shadow `rgba(15, 17, 17, 0.5) 0px 0px 14px 0px` for floating panels. The spacing scale is dense and small: 1px through 8px steps (s1 to s10), reflecting how tightly rows of captions, thumbnails and links are packed. Common measured gaps are 8px, 12px, 10px and 4px. The header is two tiers: a top bar with logo, delivery location, a wide search field and account, language and cart controls, and a secondary bar of department links. The measured header is 99px tall. Page width at the 1280px measurement is fully used; cards run edge to edge with narrow gutters. + +## Elevation & Depth + +Depth is modest. Cards are mostly flat, separated by hairline borders (#d5d9d9) and white space. Light shadows (`rgba(15, 17, 17, 0.15) 0px 2px 5px 0px`, `rgba(0, 0, 0, 0.13) 0px 2px 4px 0px`) appear on small controls; the measured primary button carries `rgba(213, 217, 217, 0.5) 0px 2px 5px 0px`, and large floating panels (flyouts, the address tooltip) use the 14px-blur shadow listed in the card component. Layering is functional: header above content, flyout above header. + +## Shapes + +The measured radius ladder is 2px, 3px, 4px, 5px, 8px, 12px, 16px and 100px. The 3px radius belongs to the currency selector, the 8px radius to buttons, the search input and cards, 12px and 16px to image tiles and larger cards, and 100px to pill elements. Buttons are therefore softly rounded rectangles rather than pills. Thumbnails in the 2x2 grids are square-edged or lightly rounded images over pale tinted backgrounds. + +## Components + +- **button-primary:** fill #ffd814, label #111111, 13px Arial, 8px radius, 33px height, border #fcd200, light shadow. +- **button-secondary:** outlined selector with border #848688, 3px radius, 35px height, padding 6px 18px 6px 8px, text on the dark header. +- **nav / nav-link:** dark header #131921 with #cccccc text, links measured in #2162a1, 14px. +- **text-input:** 15px Arial text in #111111, 8px radius, 38px tall; the search field sits wide in the header. +- **card:** white, 8px radius, 16px 20px 20px padding, the shadow noted above. + +## Design System Architecture + +No public design system for the Amazon.com storefront was found among the pages opened. The de-facto system is visible in the shipped CSS: hashed custom properties such as `--nav-search-scope-hover` (#d4d4d4) and `--nav-search-labels` (#fff) show a navigation-specific token layer, while many generated names (`--__dChw-...`) hold colours such as #0f1111, #1c89e3 and #ffa41c, indicating a compiled, componentised token set rather than a documented public one. Amazon's developer site publishes Echo/Alexa typography rules (link above), which is the only official typography source consulted. + +## Do's and Don'ts + +- Do keep chrome neutral: white canvas, #131921 header, #0f1111 text. +- Do reserve #ffd814 for the action button and keep its label #111111. +- Do let product and campaign imagery carry colour. +- Do use 8px radius for buttons and cards. +- Don't introduce gradients or heavy shadows into the interface. +- Don't use Ember Display below headline sizes; use Arial for functional text. +- Don't treat the delivery-address tooltip buttons as brand buttons. +- Don't use the browser default link blue; use #2162a1. + +## Responsive Behavior + +A separate mobile measurement at 390px shows the h1 reduced from 38.25px to 32.6454px with the same bold Display face. The desktop 4-up card grid was only measured at desktop width; only the type step-down was measured, so no card-column counts are claimed for smaller screens. The header keeps the search field as the dominant control. + +## Iteration Guide + +1. Start from canvas #ffffff, ink #0f1111, header #131921. +2. Build cards with 8px radius, 16px 20px 20px padding and a #d5d9d9 hairline. +3. Set headlines in Display 700 with line height equal to font size; body in Arial 400 at 14px. +4. Make the single action button #ffd814 with #111111 text and a #fcd200 border. +5. Let imagery supply every other colour; check any new colour against the measured list before adding it. +6. Keep spacing in the 4px, 8px, 12px range for dense rows. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amd-g/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amd-g/DESIGN.md new file mode 100644 index 0000000..2b2aa25 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amd-g/DESIGN.md @@ -0,0 +1,182 @@ +--- +version: alpha +name: AMD +category: "Consumer Electronics" +description: "AMD.com home: a black #000000 canvas lit by cyan light-trail imagery, Klavika 54.4px/600 headlines, Open Sans 16px/24px body in #f8f9fa, AMD cyan #00c2de for outlined 2px-radius buttons and accent words, #2899ff product links, and 12px-radius cards edged in translucent white." +colors: + canvas: "#000000" + page-body: "#ffffff" + ink: "#ffffff" + primary: "#00c2de" + surface-card: "#111112" + surface-glass: "#1a1a1bcc" + ink-soft: "#f8f9fa" + link: "#2899ff" + ink-muted: "#9d9fa2" + hairline: "#00000020" + card-border: "#ffffff2e" +typography: + display: + fontFamily: Klavika, arial, sans-serif + fontSize: 54.4px + fontWeight: 600 + lineHeight: 56px + display-mobile: + fontFamily: Klavika, arial, sans-serif + fontSize: 32px + fontWeight: 600 + lineHeight: 35.2px + subheading: + fontFamily: "\"Open Sans\", arial, sans-serif" + fontSize: 16px + fontWeight: 600 + lineHeight: 24px + body: + fontFamily: "\"Open Sans\", arial, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + nav: + fontFamily: "\"Open Sans\", arial, sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 24px + button: + fontFamily: "\"Open Sans\", arial, sans-serif" + fontSize: 15.6224px + fontWeight: 600 + lineHeight: 23.4336px + letterSpacing: 0.468672px +rounded: + xs: 2px + sm: 3px + md: 4px + lg: 5px + xl: 12px + pill: 9999px +spacing: + s1: 1px + s2: 6px + s3: 8px + s4: 8.1px + s5: 10px + s6: 16px + s7: 17px + s8: 26px + s9: 34px + s10: 36.24px +components: + button-outline: + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 16px 34px + height: 57px + borderColor: "{colors.primary}" + button-subscribe: + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 16px 34px + boxShadow: rgb(0, 0, 0) -1px 1px 0px 0px, rgba(133, 133, 133, 0.62) -1px 1px 0px 0px inset + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + card: + textColor: "{colors.ink-soft}" + rounded: "{rounded.xl}" + borderColor: "{colors.card-border}" + card-feature: + backgroundColor: "{colors.surface-card}" + textColor: "{colors.ink-soft}" + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" +--- + +# AMD + +## Overview + +This file documents the AMD home page as measured at `https://www.amd.com/en.html` (title "AMD ׀ together we advance_AI"). The page is dark from top to bottom: a black 86px header, a hero with "Your Trusted Partner for Advancing AI" where the words "Advancing AI" are set in AMD cyan, flowing blue-and-cyan light-trail imagery behind the content, then a row of three news cards, a "Why AMD" section of three dark feature cards, a logo wall ("Leading Businesses Trust AMD"), an "A Comprehensive AI Portfolio" carousel, a "Developer Central" promo, "Latest News" and a black footer. + +The mood is technical and nocturnal. Colour is restricted to one accent — cyan `#00c2de` — plus a link blue `#2899ff` for product links ("Instinct GPUs >", "EPYC CPUs >"). Everything else is black, near-black panels and white or off-white text. The microcopy is enterprise-direct: small all-caps cyan eyebrows ("AI SOLUTIONS", "AI PORTFOLIO", "ACCELERATE AI FOR DEVELOPERS"), short headings, and action labels such as "Explore AI Solutions", "See How", "Read News Release", "Explore Developer Central". + +## Colors + +Backgrounds by area: `#000000` (7421), `#1a1a1bcc` (1498), `#111112` (318), `#2222224d` (13). Text by characters: `#ffffff` (2239), `#f8f9fa` (1777), `#2899ff` (640), `#9d9fa2` (595), `#00c2de` (151). + +- **canvas `#000000`** — the page as the viewer sees it; header, sections and footer are black. +- **page-body `#ffffff`** — the `` element's own background. It is covered by black sections and is not visible in the capture; keep it only so embedded content inherits a defined base. +- **ink `#ffffff`** and **ink-soft `#f8f9fa`** — headings and card copy. The off-white is the value of `--bs-gray-100` in the page's variables. +- **primary `#00c2de`** — AMD cyan: button borders, the accent words in the hero, eyebrows, and the selected-card glow. The site maps it onto `--bs-teal: #00c2de`. +- **link `#2899ff`** — inline product links inside portfolio cards. +- **ink-muted `#9d9fa2`** — dates and secondary text in news cards. +- **surface-card `#111112`** — the "Why AMD" feature cards. +- **surface-glass `#1a1a1bcc`** — translucent panels over imagery. +- **card-border `#ffffff2e`** — the 1px border around news cards. **hairline `#00000020`** — light dividers. + +Bootstrap's default `--bs-primary: #0d6efd` and the floating accessibility-widget colours are not AMD colours and are left out. + +## Typography + +Fonts loaded: Open Sans 400/500/600/700, Klavika 500/700, plus Font Awesome icon fonts. Open Sans carries 5108 measured characters, Klavika 241. Klavika is the display face; arial is the shipped fallback and the substitute to use if Klavika is not licensed. + +- **display** — Klavika 54.4px / 56px, weight 600. Hero headline. +- **subheading** — Open Sans 16px / 24px, 600. Card titles ("Introducing AMD Helion, Agentic AI Compute at Rack Scale"). +- **body** — Open Sans 16px / 24px, 400. +- **nav** — Open Sans 20px / 24px, 400 (measured top-level nav link). +- **button** — Open Sans 15.6224px / 23.4336px, 600, letter-spacing 0.468672px. + +The fractional sizes (15.6224px, 19.3696px, 33.6672px) come straight from the computed styles. The size distribution is led by 14px (2797 chars) and 16px (1688), then 19.3696px (495). Section heads such as "Why AMD" measure 48px at weight 500. Weights in use: 400, 600, 500, 700. + +## Layout + +Desktop capture: 1280px wide, 5619px tall. Content runs from x=90 to about x=1190, so the side margin is roughly 90px. The hero band is 252px tall before the imagery band (620px) that holds the three news cards. "Why AMD" is a 3-column band with centered 48px heading; the portfolio and news carousels show four cards with circular arrow buttons at either edge and dot pagination below. Measured gaps: 8px (12), 60px (4), 16px, 26px. Most common paddings: 16px, 17px, 26px, 10px, 34px. The header shows 9 visible links plus account, language, search and cart icons. The logo wall below "Leading Businesses Trust AMD" is a loose grid of monochrome white partner logos (AWS, Oracle, Google Cloud, Microsoft, Dell, Lenovo and others) on black, with generous vertical spacing and a single outlined "See How" button underneath. + +## Elevation & Depth + +Measured shadows: `rgba(0, 0, 0, 0.24) 0px 2px 6px 0px` (14 uses), `rgba(0, 0, 0, 0.1) 0px 8px 16px 0px` (4), `rgba(0, 0, 0, 0.24) 0px 6px 16px 0px`, `rgba(0, 0, 0, 0.28) 0px 4px 12px 0px`. On black these shadows are nearly invisible; depth is carried by the glowing light-trail imagery and by the cyan glow on the active card: `rgba(0, 194, 222, 0.5) 0px 0px 0px 1px, rgba(0, 194, 222, 0.35) 0px 0px 18px 0px`. The subscribe button uses a bevel: `rgb(0, 0, 0) -1px 1px 0px 0px, rgba(133, 133, 133, 0.62) -1px 1px 0px 0px inset`. + +## Shapes + +Measured radii: `3px 3px 0px 0px` (13 — tab tops), 2px (10 — buttons), 100% and 50% (circular icons and carousel arrows), 4px (9), 12px (8 — cards), 5px (8), and `12px 12px 0px 0px` (3 — card image tops). The system is squarish: buttons are nearly sharp at 2px, cards soften to 12px. + +## Components + +- **button-outline** — "Explore AI Solutions": transparent fill, white 15.6224px/600 text, 1px solid `#00c2de` border, 2px radius, padding 16px 34px, 57px tall. Measured hover: the label gains an underline; fill and border do not change. +- **button-subscribe** — "Subscribe to the latest news from AMD" in the footer: 2px radius, 16px 34px padding, bevel shadow, 79px tall. +- **card** — news cards, 360×425px, 12px radius, 1px `#ffffff2e` border, image top, 16px/600 title, body copy, cyan "Read News Release" link. The highlighted card swaps to a 1px `#00c2de` border with the cyan glow. +- **card-feature** — "Why AMD" cards on `#111112`, title and paragraph. +- **nav** — black header, white Open Sans links ("Products", "Solutions", "Resources & Support", "Shop"). +- **footer** — black; social icons, five link columns ("Company", "News & Events", "Resources", "Partners", "Investors") and a legal row. + +## Design System Architecture + +No public AMD design system or brand-guideline page could be opened for this file (the attempts are logged in SOURCES.json). The de-facto system is visible in the shipped CSS: about 149 root variables combining Bootstrap (`--bs-*`, with `--bs-teal` set to AMD cyan `#00c2de`), Tailwind (`--tw-*`) and an `--atomic-*` layer (`--atomic-on-primary: #fff`, `--atomic-border-radius: .25rem`, `--atomic-border-radius-lg: .75rem`, `--atomic-border-radius-xl: 1rem`, `--atomic-visited: #752e9c`). Components are therefore Bootstrap-structured with AMD's colour overrides on top. + +## Do's and Don'ts + +- Do keep the canvas black and let imagery supply light. +- Do use cyan `#00c2de` sparingly: outlines, accent words, eyebrows, focus glow. +- Do keep buttons outlined with a 2px radius; the home page has no filled CTA. +- Do set headlines in Klavika and everything else in Open Sans. +- Don't use Bootstrap blue `#0d6efd` as a brand colour. +- Don't round buttons beyond 2px or cards beyond 12px. +- Don't put long paragraphs in cyan; it is an accent, not a text colour. + +## Responsive Behavior + +Measured at 390px: the hero headline goes from 54.4px/56px to 32px/35.2px; body copy stays 16px/24px. The header shows 5 visible links and a menu toggle labelled "Toggle navigation" (desktop: 9 links and a "Products" toggle). Up to 3 card columns were counted on mobile versus 15 on desktop (carousel items included). Mobile font sizes by characters: 14px, 16px, 17.28px, 15.68px, 25.6px, 32px, 28px, 48px. Carousel and grid behaviour at intermediate widths was not measured. + +## Iteration Guide + +1. Set `canvas` black and `ink` white; use `ink-soft` for longer copy. +2. Headline in Klavika `display`, with one or two accent words in `primary`. +3. Add `button-outline` CTAs — transparent, cyan border, 2px radius. +4. Build card rows from `card` (bordered) or `card-feature` (`#111112` fill). +5. Use `link` blue only for inline product links inside cards. +6. Re-measure before adding filled buttons; none were found on the home page. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/american-airlines/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/american-airlines/DESIGN.md new file mode 100644 index 0000000..92180e8 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/american-airlines/DESIGN.md @@ -0,0 +1,200 @@ +--- +version: alpha +name: American Airlines +category: "Airlines" +description: "aa.com, American Airlines' booking site: white #ffffff canvas, slate #36495a body copy, #0078d2 link blue, #00467f navy headings and a #0860c4 Log in button set in AmericanSans Var 16px/700 with 3.5px corners, plus a cool grey #d0dae0 footer. Type runs through the proprietary AmericanSans, AmericanSansLight and AmericanSans Var families." +colors: + canvas: "#ffffff" + page-largest: "#d0dae0" + ink: "#36495a" + link: "#0078d2" + heading: "#00467f" + primary: "#0860c4" + on-primary: "#ffffff" + ink-strong: "#181e25" + ink-deep: "#101419" + ink-muted: "#627a88" + alert: "#d14904" + hairline: "#9da6ab" +typography: + display: + fontFamily: AmericanSans, Helvetica, Arial, sans-serif + fontSize: 24px + fontWeight: 400 + lineHeight: 31.2px + heading: + fontFamily: AmericanSansLight, Helvetica, Arial, sans-serif + fontSize: 30px + fontWeight: 400 + lineHeight: 36px + subheading: + fontFamily: AmericanSansLight, Helvetica, Arial, sans-serif + fontSize: 24.0001px + fontWeight: 400 + lineHeight: 30px + body: + fontFamily: "\"AmericanSans Var\"" + fontSize: 14px + fontWeight: 400 + lineHeight: 20px + button: + fontFamily: "\"AmericanSans Var\", Helvetica, Arial, sans-serif" + fontSize: 16px + fontWeight: 700 + lineHeight: 21px + letterSpacing: 0.16px + input: + fontFamily: Arial, sans-serif + fontSize: 14px + fontWeight: 400 +rounded: + xs: 2px + sm: 3px + md: 3.5px + lg: 4px + xl: 18px + none: 0px + pill: 9999px +spacing: + s1: 1px + s2: 4px + s3: 6px + s4: 8px + s5: 9px + s6: 10px + s7: 10.5px + s8: 12px + s9: 14px + s10: 18px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 0px 14px + height: 48px + button-outlined: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + typography: "{typography.button}" + rounded: "{rounded.md}" + border: "1px solid #0860c4" + padding: 0px 18px + height: 48px + link: + textColor: "{colors.link}" + typography: "{typography.body}" + rounded: "{rounded.none}" + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.input}" + rounded: "{rounded.none}" + padding: 8px 27px 9px 9px + height: 35px + borderColor: "{colors.hairline}" +--- + +## Overview + +aa.com is a working tool before it is a brand showcase. The measured home page (finalUrl `https://www.aa.com/homePage.do?locale=en_US`, title "American Airlines - Airline tickets and low fares at aa.com") opens on a utility row with a language picker and a "Search AA.com" field, then a header with the centenary "100" mark beside the oneworld roundel, three plain navigation labels (Plan travel, Travel information, AAdvantage) and a pair of account buttons: a filled blue "Log in" and an outlined "Join". Below that, a photographic hero banner (in the capture, a snowy alpine scene with skiers) carries a thin blue headline; that headline is not present as text in the extraction, so its size is not measured. + +The hero hands straight over to the booking widget, which is the real centre of the page. Three large tabs (Book, Manage trips / Check-in, Flight status) sit on top of a white form with small pill toggles (Flight, Vacation packages, Hotel, Car, Cruise, Experiences), radio buttons for Round trip or One way, a Redeem miles checkbox, and rectangular From/To/Depart/Return fields. Under the widget the page becomes an editorial grid: "Today's offers" in three photo cards, then "News and offers", "Plan your next adventure" and a Citi / AAdvantage card promotion, and finally a cool grey footer with three link columns (Help, About American, Extras). + +The voice is plain and transactional ("Use cash and miles together", "Search flights and book", "Bag and optional fees »"). Links end in a » chevron or an external-window glyph, and the footer explains that glyph: "Link opens in new window. Site may not meet accessibility guidelines." Everything reads as calm, light and blue, with orange reserved for the Travel alerts control. + +## Colors + +The palette is a family of blues on white with slate text. + +- **canvas `#ffffff`**: the body background and the background of the booking form and editorial sections. +- **page-largest `#d0dae0`**: the cool blue-grey that covers the largest measured area; in the capture it is the footer band and the inactive booking tabs sit in a similar pale tone. +- **ink `#36495a`**: slate body copy, the second most-read text color and the color of form field text. It is the color for paragraphs such as offer descriptions. +- **link `#0078d2`**: the most-read text color on the page, because so much of the home page is links: widget links, offer links, the tab labels "Manage trips / Check-in" and "Flight status". Hover adds an underline without changing the color (measured). +- **heading `#00467f`**: deep navy used for the "Today's offers" section heading and the active "Book" tab label. +- **primary `#0860c4`**: the fill of the "Log in" button and the border and text of "Join". It also colours some inline links ("Travel inspiration with AI"). +- **on-primary `#ffffff`**: label color on the filled button. +- **ink-strong `#181e25`** and **ink-deep `#101419`**: near-black text tones measured in the page's text colors. +- **ink-muted `#627a88`**: the blue-grey of the offer card headlines ("Use cash and miles together", "Escape to The Bahamas"). +- **alert `#d14904`**: burnt orange for the "Travel alerts »" control, used for text and its 1px border. +- **hairline `#9da6ab`**: the 1px border of the From/To/Depart/Return inputs. + +There is no dark theme in the measurement. The root variables on the page are Angular Material defaults (`--mat-*`, `--mdc-*`, e.g. `--mat-badge-background-color: #3f51b5`); they belong to an embedded component library, are not visible on the home page, and are not brand colors. + +## Typography + +American's type is proprietary. The page loads four families: `AmericanSans` (400), `AmericanSansLight` (400), `AmericanSans Var` (a variable font with a 100–1000 weight axis) and an icon font, `American Icons`. By characters rendered, AmericanSans Var dominates, followed by Arial (form inputs), the icon font, AmericanSansLight and AmericanSans. + +- **display**: AmericanSans 24px/31.2px, weight 400. The extractor's largest hero text is the "Book" tab label, so this token is the tab label style rather than a marketing headline. +- **heading**: AmericanSansLight 30px/36px, weight 400, for section headings such as "Today's offers". +- **subheading**: AmericanSansLight 24.0001px/30px, weight 400, for card headlines in `#627a88`. +- **body**: AmericanSans Var 14px/20px, weight 400. 14px is the most common size on the page, followed by 16px and 18px. +- **button**: AmericanSans Var 16px/21px, weight 700, letter-spacing 0.16px. The 0.16px tracking is the page's only measured letter-spacing and appears on all 16px text. +- **input**: Arial 14px, weight 400, inside the booking fields. + +Only two weights appear: 400 for almost everything and 700 for buttons and labels. The light cut at large sizes is what makes headings feel airy. Substitutes for AmericanSans are not published by American; the site's own fallback stack is Helvetica, then Arial, then sans-serif, and that is the safe stand-in. + +## Layout + +On the 1280px desktop pass the page is 2208px tall. The first band, from the top to the end of the editorial content, measures 1642px on white with content between x=135 and x=1145 (a 1010px column) and up to three columns; the footer is a separate grey band. The booking widget is the widest content object, and the offer grid is three equal photo cards with a headline, two lines of description and a link beneath each. + +Spacing is small and specific. The most frequent paddings are 14px, 12px, 9px, 10.5px and 8px; the most frequent gaps are 10.5px and 8px. The input padding `8px 27px 9px 9px` leaves room for the in-field search or calendar icon at the right. Large values appear once each (25px, 36px, 38px, 40px, 112px), so the site does not run a strict 4- or 8-pixel scale. A thin rule separates the widget from the offers and the offers from the secondary row. + +## Elevation & Depth + +The page is mostly flat. Measured box-shadows are rare: an inset double ring (`rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(208, 218, 224) 0px 0px 0px 3px inset`, three uses) and a three-layer drop shadow used once by the cookie notice, which is not brand UI. Depth comes instead from layering: the booking widget overlaps the bottom of the hero photo, and the inactive tabs are tinted grey against the white active tab. Borders do the rest of the separation work: 1px `#9da6ab` around inputs, 1px `#0860c4` around Join, 1px `#d14904` around Travel alerts. + +## Shapes + +Corners are small. The measured radii are 3.5px (32 uses, the default for buttons such as Log in and Join), 4px, 3px, 2px and 18px, plus `50%` for circles (the social icons in the footer and the radio buttons in the capture). Inputs have square 0px corners. The Travel alerts control has a `0px 0px 5px 5px` radius, rounded only at the bottom so it hangs from the rule above it, and one element uses `3px 3px 0px 0px`, rounded only at the top. The pill toggles in the booking widget are fully rounded in the capture. + +## Components + +- **Primary button (Log in)**: `#0860c4` fill, white AmericanSans Var 16px/700 label with 0.16px tracking, 3.5px corners, `0px 14px` padding, 48px tall on desktop. +- **Outlined button (Join)**: white fill, `#0860c4` text and 1px `#0860c4` border, same type, 3.5px corners, `0px 18px` padding, 48px tall. It always sits to the right of Log in. +- **Text link**: `#0078d2` AmericanSans Var 14px/20px. On hover the measured change is an underline only; color, background and height stay the same. Keyboard focus draws a 2px solid `#0078d2` outline with a 1px offset (measured on Travel alerts). +- **Booking tabs**: label text is AmericanSans 24px, with 12px padding and 55px height; the active tab is white with navy `#00467f` text, inactive tabs show `#0078d2` text. +- **Text input**: white, 1px `#9da6ab` border, square corners, Arial 14px in `#36495a`, 35px tall, `8px 27px 9px 9px` padding with an icon at the right edge. +- **Travel alerts**: white control with `#d14904` text and border, a warning triangle icon and bottom-only 5px corners; hover underlines the label. +- **Offer card**: full-bleed photo, AmericanSansLight 24px headline in `#627a88`, 14px description, a `#0078d2` link with a » chevron. No border, shadow or background. +- **Footer**: `#d0dae0` band, column headings above a rule, link lists in dark text, partner logos at the right, social icons in outlined circles. + +## Design System Architecture + +No public American Airlines design system or brand guideline was found. The newsroom's logo page (https://news.aa.com/multimedia/logos/default.aspx) offers logo downloads for American Airlines, American Airlines Cargo, AAdvantage and the wholly owned carriers, with no color values, typeface names or usage rules. + +The shipped page shows how the system is assembled. Header pieces are custom elements (the primary CTA is measured on an `hp-header-button` element that wraps the visible anchor), the page bundles the Angular Material component library (its 400 root variables are all `--mat-*` / `--mdc-*` defaults), and the typography rests on three in-house font files plus a variable font and an icon font. Color is applied as literal values rather than brand CSS variables: there are no American-specific custom properties on `:root`. To rebuild the look, treat the tokens above as the system: three blues for action and links, navy for headings, slate for text, orange for alerts, a grey footer and small 3.5px corners. + +## Do's and Don'ts + +**Do** +- Keep the canvas white and put the booking widget first; the home page is organised around search. +- Use `#0078d2` for every inline link and add an underline on hover, as the site does. +- Pair a filled `#0860c4` button with an outlined `#0860c4` button for account actions. +- Set large headings in the light cut (AmericanSansLight) at 24–30px and weight 400. +- Use 3.5px corners on buttons and square corners on form fields. +- Mark external links with the new-window glyph and end call-to-action links with ». + +**Don't** +- Don't use bold display type; the measured page has only 400 and 700, and 700 is for buttons. +- Don't use the Angular Material defaults (`#3f51b5`, `#ff4081`) as brand colors. +- Don't use `#d14904` for anything but alerts. +- Don't add heavy shadows to cards; offer cards are borderless and shadowless. +- Don't treat the cookie notice in the capture as a brand component. + +## Responsive Behavior + +The extractor's mobile pass recorded the following. The mobile header shows no visible header links and no menu toggle (`headerLinksVisible: 0`, `menuToggleVisible: false`). The "Book" tab label keeps the same 24px AmericanSans style, and the first h2 becomes "News and offers" at 24.0001px. The Log in button keeps its 16px/700 label but measures 36px tall instead of 48px. The mobile bands are recorded as single-column content: a 419px media band, a 482px white band (the widget), further media and white bands, and a 354px `#d0dae0` footer band. The most common mobile sizes remain 14px, 16px and 18px. + +The stylesheet declares breakpoints, most often `max-width 767px` (12 rules) and `min-width 768px` (5 rules), followed by `max-width 896px`, `max-width 480px` and `max-width 1200px`. How the booking tabs and the offer grid re-flow at each breakpoint is not measured. + +## Iteration Guide + +1. Start from the white canvas, slate `#36495a` body text and `#0078d2` links; most of the page is these three. +2. Add navy `#00467f` for section headings and AmericanSansLight for their large sizes. +3. Use `#0860c4` only for the main filled button and its outlined twin; keep tracking at 0.16px on 16px labels. +4. Build forms with square 1px `#9da6ab` fields at 35px height and Arial 14px text. +5. Close the page with the `#d0dae0` footer band and three link columns. +6. Check each new screen against the capture: few shadows, small corners, many links, one orange alert. +7. When a value is missing (hero headline size, mobile grid behaviour), measure it on aa.com before adding a token. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amex/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amex/DESIGN.md new file mode 100644 index 0000000..93f4fee --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amex/DESIGN.md @@ -0,0 +1,491 @@ +--- +version: alpha +name: American Express +category: "Banking & Insurance" +description: "American Express's site runs on its internal DLS (Design Language System): a white #ffffff canvas, Bright Blue #006fcf actions and links, Deep Blue #00175a for the darkest brand moments, and a six-step gray ramp from #f7f8f9 to #333333 (body ink). Type pairs BentonSans light (300) for 30px display lines with Helvetica Neue for UI and reading text (15px/22px, 16px/24px, 20px/26px). Buttons are 50px tall with 4px corners and 13px 30px padding (the header sign-in is 48px with 8px corners); cards are flat white with a 0 1px 1px rgba(0,0,0,.1) shadow, and focus is a 1px dashed #53565a outline offset by 3px." + +colors: + primary: "#006fcf" + primary-hover: "#0069c4" + primary-active: "#0063b9" + bright-blue-hover: "#0065bd" + bright-blue-active: "#005aa8" + secondary-hover-border: "#0061b6" + secondary-hover-fill: "#f2f2f2" + nav-link: "#0066be" + deep-blue: "#00175a" + bright-blue-60: "#66a9e2" + bright-blue-20: "#cce2f5" + canvas: "#ffffff" + ink: "#333333" + ink-heading: "#3d3d3d" + gray-01: "#f7f8f9" + gray-02: "#ecedee" + gray-03: "#c8c9c7" + gray-04: "#8e9092" + gray-05: "#53565a" + gray-06: "#333333" + on-primary: "#ffffff" + success: "#008767" + warning: "#b42c01" + moderate: "#ea700b" + attention: "#fdb92d" + gold: "#c1932f" + +typography: + display-guardian: + fontFamily: "Guardian, Helvetica Neue, Helvetica, sans-serif" + fontSize: 48px + fontWeight: 400 + lineHeight: 60px + heading-6: + fontFamily: "BentonSans, Helvetica Neue, Helvetica, sans-serif" + fontSize: 38px + fontWeight: 300 + lineHeight: 44px + heading-5: + fontFamily: "BentonSans, Helvetica Neue, Helvetica, sans-serif" + fontSize: 30px + fontWeight: 300 + lineHeight: 38px + heading-4: + fontFamily: "BentonSans, Helvetica Neue, Helvetica, sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 28px + heading-3: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 16px + fontWeight: 600 + lineHeight: 24px + eyebrow: + fontFamily: "BentonSans, Helvetica Neue, Helvetica, sans-serif" + fontSize: 13px + fontWeight: 600 + lineHeight: 18px + body-lg: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 26px + body-3: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + body-1: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 15px + fontWeight: 400 + lineHeight: 22px + body-1-strong: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 15px + fontWeight: 600 + lineHeight: 22px + small: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 13px + fontWeight: 400 + lineHeight: 20px + button: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 22px + button-sm: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 15px + fontWeight: 400 + lineHeight: 22px + button-signin: + fontFamily: "\"Helvetica Neue\", Roboto, sans-serif" + fontSize: 16px + fontWeight: 500 + lineHeight: 24px + nav-link: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 15px + fontWeight: 500 + lineHeight: 21.8501px + footer-link: + fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + footer-legal: + fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 22px + mobile-body: + fontFamily: "\"Helvetica Neue\", Helvetica, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + +rounded: + xs: 3px + sm: 4px + md: 8px + +spacing: + s2: 2px + s6: 6px + s8: 8px + s10: 10px + s12: 12px + s13: 13px + s16: 16px + s20: 20px + s24: 24px + s30: 30px + s40: 40px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 13px 30px + height: 50px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + textColor: "{colors.on-primary}" + button-primary-active: + backgroundColor: "{colors.primary-active}" + button-signin: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + borderColor: "{colors.primary}" + typography: "{typography.button-signin}" + rounded: "{rounded.md}" + padding: 11px 23px + height: 48px + button-secondary: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + borderColor: "{colors.primary}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 13px 30px + height: 50px + button-secondary-hover: + backgroundColor: "{colors.secondary-hover-fill}" + textColor: "{colors.bright-blue-hover}" + borderColor: "{colors.secondary-hover-border}" + button-sm: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button-sm}" + rounded: "{rounded.xs}" + padding: 8px 20px + button-disabled: + backgroundColor: "{colors.gray-01}" + textColor: "{colors.gray-04}" + borderColor: "{colors.gray-03}" + text-input: + backgroundColor: "{colors.gray-01}" + textColor: "{colors.ink}" + borderColor: "{colors.gray-04}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 0px 10px + height: 50px + text-input-focus: + borderColor: "{colors.primary}" + card-product: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + borderColor: "{colors.gray-03}" + typography: "{typography.body-1}" + rounded: 4px 4px 0px 0px + padding: 10px 20px + offers-band: + backgroundColor: "{colors.gray-02}" + textColor: "{colors.ink}" + typography: "{typography.heading-5}" + promo-tile-dark: + backgroundColor: "{colors.gray-05}" + textColor: "{colors.on-primary}" + typography: "{typography.body-lg}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.nav-link}" + typography: "{typography.nav-link}" + height: 64px + link: + textColor: "{colors.gray-05}" + typography: "{typography.body-1}" + textDecoration: underline + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-heading}" + typography: "{typography.footer-link}" + padding: 0px 0px 16px +--- + +## Overview + +The extraction of https://www.americanexpress.com landed on the Thailand market homepage (`/th-th/`, geo-redirected), so the measured page is in Thai. It runs the same global Amex front end as the other markets: the DLS stylesheet `@americanexpress/dls` 6.23.1, the DLS icon font `dls-icons-2.27.0`, and `dls-fonts` 1.2.0 (BentonSans, Guardian). + +The page is white, tidy and dense in the way of a bank portal, not a lifestyle site. A 64px white header carries the Blue Box logo at far left, then six blue menu labels (My Account, Our Cards, Points, Privileges, Insurance, Business Cards). At far right sit a search icon, a "Contact us" link and a solid Bright Blue "Log in" button with 8px corners. Below the header, a bordered notice box with an "i" icon gives a flood-relief message in gray `#53565a` text with an underlined inline link and a close "×". + +The hero is a three-column mosaic rather than one big banner: +- **Left:** a stack of three white card tiles. Each shows small card art (Platinum, Platinum Credit, Gold) with a blue 16px/600 product name and a 13px gray description, divided by 1px `#c8c9c7` rules. +- **Center:** a tall underwater photograph (diver beside a whale shark, the Platinum card floating above). It carries a white BentonSans Light 30px/38px headline, a 15px/600 offer line and a white "Apply" button with blue text. +- **Right:** two stacked promo tiles. The top one is a photo over a `#53565a` gray text panel; the bottom one is a lavender-field photo over a `#ecedee` panel. Both use 20px/26px Helvetica Neue text. + +Below, a `#ecedee` band titled in BentonSans Light 30px ("Latest offers and privileges from American Express") holds three photo cards with outlined blue buttons. A patterned light-gray band follows with three white icon cards ("Assistance", "Online fraud protection", "Compare cards"), each with a solid Bright Blue full-width button. The footer is white, with BentonSans 13px uppercase column heads, Bright Blue link lists, the "AMERICAN EXPRESS" wordmark, a country switcher with flag, and a row of legal links separated by vertical bars. + +**Key Characteristics:** +- Bright Blue `#006fcf` is the brand color for the logo, every link, and every primary button. It is also the most-read text color on the page by characters, because so much of the page is links. +- Body ink is DLS gray-06 `#333333`, never black. Secondary text is gray-05 `#53565a`. +- Light 300-weight BentonSans for display and Helvetica Neue for reading and UI. +- Rectangular geometry: 4px button radius, 4px card corners, no pills. +- Flat white cards lifted by the DLS `shadow-1` (`0 1px 1px 0 rgba(0,0,0,.1)`). +- Generous 50px button height with `13px 30px` padding. +- Accessibility focus treatment: `outline: 1px dashed #53565a; outline-offset: 3px` on links, buttons and inputs. + +## Colors + +> Sources: computed styles on the measured homepage, plus the official DLS stylesheet served by the site, https://www.aexp-static.com/cdaas/one/statics/@americanexpress/dls/6.23.1/package/dist/6.23.1/styles/dls.min.css. DLS class names are in parentheses. + +### Brand & Accent +- **Bright Blue** (`{colors.primary}` `#006fcf`, `.dls-bright-blue`): Primary buttons, links, the Blue Box logo, product names on card tiles. +- **Primary hover** (`{colors.primary-hover}` `#0069c4`): `.btn-primary:hover` in DLS, and measured as the hover fill of the blue content buttons. +- **Primary active** (`{colors.primary-active}` `#0063b9`): `.btn-primary:active`. +- **Bright Blue Hover / Active** (`{colors.bright-blue-hover}` `#0065bd`, `.dls-bright-blue-hover`; `{colors.bright-blue-active}` `#005aa8`, `.dls-bright-blue-active`): Text and icon color states. `#0065bd` is the measured text color of a hovered secondary button. +- **Secondary hover** (`{colors.secondary-hover-fill}` `#f2f2f2` fill, `{colors.secondary-hover-border}` `#0061b6` border): `.btn-secondary:hover`, matching the measured hover. +- **Nav blue** (`{colors.nav-link}` `#0066be`): Measured color of the header menu labels. +- **Deep Blue** (`{colors.deep-blue}` `#00175a`, `.dls-deep-blue`): The darker brand blue, used for focus-ring insets and selected states in CSS (`inset 0 -4px 0 0 #00175a` tab indicator). +- **Tints** (`{colors.bright-blue-60}` `#66a9e2`, `{colors.bright-blue-20}` `#cce2f5`): `.dls-bright-blue-60` / `-20`. DLS also defines `-40` `#99c5ec`, and deep-blue tints `#66749c`, `#99a2bd` and `#ccd1de`. + +### Surface +- **Canvas** (`{colors.canvas}` `#ffffff`, `.dls-white`). +- **Gray 01** (`{colors.gray-01}` `#f7f8f9`): Input fill and disabled button fill. +- **Gray 02** (`{colors.gray-02}` `#ecedee`): The offers band and light promo tile; `.border` hairline color. +- **Gray 03** (`{colors.gray-03}` `#c8c9c7`): Card-tile borders, disabled borders. +- **Gray 04** (`{colors.gray-04}` `#8e9092`): Input border, disabled text, `.dls-color-neutral`. +- **Gray 05** (`{colors.gray-05}` `#53565a`): Dark promo tile fill, secondary text, focus outline color. + +### Text +- **Ink** (`{colors.ink}` `#333333`, `.dls-gray-06`): Paragraph text (the measured `bodyText`, 20px/26px). +- **Heading ink** (`{colors.ink-heading}` `#3d3d3d`): Footer column heads and legal copy. +- **Secondary** (`{colors.gray-05}` `#53565a`): Notice text, inline links in notices, `.label-1`. +- **On primary** (`{colors.on-primary}` `#ffffff`). + +### Semantic +From the DLS stylesheet (no semantic states are visible on the homepage): +- **Success** (`{colors.success}` `#008767`, `.dls-green`, `.dls-color-success-bg`). +- **Warning / error** (`{colors.warning}` `#b42c01`, `.dls-red`, `.dls-color-warning-bg`). +- **Moderate** (`{colors.moderate}` `#ea700b`, `.dls-orange`). +- **Attention** (`{colors.attention}` `#fdb92d`, `.dls-color-attention-bg`, `.dls-dark-yellow-bg`). +- **Gold** (`{colors.gold}` `#c1932f`, `.dls-gold-bg`): Card-tier accent. + +## Typography + +### Font Family +- **BentonSans** (loaded weights 300, 400, 700 from `dls-fonts`): Display and section headings. DLS sets `.heading-4`, `.heading-5` and `.heading-6` in `BentonSans, Helvetica Neue, Helvetica, sans-serif`. +- **Helvetica Neue** (system font): Body, buttons, card text, nav labels. DLS `.body-*`, `.heading-2`, `.heading-3` and `.label-*` use `Helvetica Neue, Helvetica, sans-serif`. +- **Guardian** (served by `dls-fonts/1.2.0/.../guardianregular.woff2`): The DLS `-g` heading variants (`.heading-7-g`, `.heading-5-g`); not rendered on the measured page. +- **System stack** (`-apple-system, "system-ui", "Segoe UI", Roboto, …`): The global header and footer partials. +- `amex-card-number` and `amex-card-name` faces exist for rendering card art; `dls-icons-2.27.0` is the icon font. + +### Hierarchy + +| Token | Family | Size | Weight | Line height | Source | +|---|---|---|---|---|---| +| `display-guardian` | Guardian | 48px | 400 | 60px | DLS `.heading-7-g` (cited) | +| `heading-6` | BentonSans | 38px | 300 | 44px | DLS `.heading-6` (cited) | +| `heading-5` | BentonSans | 30px | 300 | 38px | measured hero + offers title; DLS `.heading-5` | +| `heading-4` | BentonSans | 20px | 400 | 28px | measured; DLS `.heading-4` | +| `heading-3` | Helvetica Neue | 16px | 600 | 24px | measured h3; DLS `.heading-3` | +| `eyebrow` | BentonSans | 13px | 600 | 18px | measured footer h2 (uppercase) | +| `body-lg` | Helvetica Neue | 20px | 400 | 26px | measured promo copy (`bodyText`) | +| `body-3` | Helvetica Neue | 16px | 400 | 24px | DLS `.body-3`; mobile body | +| `body-1` | Helvetica Neue | 15px | 400 | 22px | measured; DLS `.body-1` | +| `body-1-strong` | Helvetica Neue | 15px | 600 | 22px | measured offer line; DLS `.body-2` | +| `small` | Helvetica Neue | 13px | 400 | 20px | measured card descriptions | +| `button` | Helvetica Neue | 16px | 400 | 22px | measured; DLS `.btn` | +| `button-sm` | Helvetica Neue | 15px | 400 | 22px | DLS `.btn-sm` (cited) | +| `button-signin` | Helvetica Neue | 16px | 500 | 24px | measured header button | +| `nav-link` | Helvetica Neue | 15px | 500 | 21.8501px | measured header menu | +| `footer-link` | system stack | 16px | 400 | 24px | measured | +| `footer-legal` | system stack | 14px | 400 | 22px | measured | +| `mobile-body` | Helvetica Neue | 16px | 400 | 24px | measured at 390px | + +Note: the page's `

` element itself computes to Helvetica Neue 30px/500 with a 22px line height. Its visible text is a child `

` set in BentonSans 30px/300/38px (the DLS `heading-5` look). The tokens follow the visible text, and the override is recorded in `SOURCES.json`. + +### Principles +- Large type is light: 300 at 30px and 38px. Weight increases only as size drops (600 at 16px and below). +- No letter-spacing anywhere; none was measured. +- Uppercase is reserved for small eyebrows (`.heading-1` / `.label-1`: 13px/18px uppercase). +- DLS sizes are rem-based steps: 0.8125rem (13px), 0.9375rem (15px), 1rem, 1.25rem (20px), 1.875rem (30px), 2.375rem (38px), 3rem (48px). + +### Note on Font Substitutes +BentonSans and Guardian are licensed commercial typefaces delivered only through Amex's own `dls-fonts` package (no foundry or license terms were confirmed from an official Amex source, so none are named here). The DLS stacks already define the fallback: `Helvetica Neue, Helvetica, sans-serif`. Keep weight 300 for display when substituting, because the light weight is the brand's look. + +## Layout + +### Spacing System +- DLS spacing utilities center on 20px (`.pad { padding: 1.25rem }`, `.pad-lr`, `.pad-tb`, …) with responsive container padding of 10px → 12px → 18px → 20px across breakpoints (`.container`, `.pad-responsive`). +- Measured paddings: 10px (34), 20px (28), 3px (16), 13px (13), 16px (11), 30px (10), 24px (8), 12px (7). Gaps: 8px (20), 16px (1). +- Buttons: `13px 30px` (DLS `.btn`: `.8125rem 1.875rem`); small buttons `8px 20px` (`.btn-sm`: `.5rem 1.25rem`). + +### Grid & Container +- DLS ships a 12-column flex grid (`.col-md-6 { flex: 0 0 50%; max-width: 50% }`) with breakpoints at 375px, 768px, 1024px and 1280px. +- The measured homepage mosaic uses three columns (left tile stack, center hero, right promo stack) inside a container with about 24px side margins at 1280px. + +### Whitespace Philosophy +Compact. Sections sit close together, with roughly 16–20px between bands in the capture, and the content is grouped into bordered or shaded boxes rather than separated by large empty space. + +## Elevation & Depth + +| Level | Shadow (DLS class) | Use | +|---|---|---| +| 0 | none | page, bands | +| 1 | `0 1px 1px 0 rgba(0,0,0,.1)` (`.shadow-1`, `.card`) | product and icon cards (measured) | +| 2 | `0 5px 10px 0 rgba(0,0,0,.1)` (`.shadow-2`) | dropdowns | +| 3 | `0 13px 26px 0 rgba(0,0,0,.1)` (`.shadow-3`; `.card-actionable:hover`) | actionable card hover, which also lifts the card with `translateY(-10px)` | + +### Decorative Depth +The icon-card band sits on a very light gray background with a faint line-art pattern. The hero relies on photography (underwater, travel, home life) with the physical card composited into the scene. + +## Shapes + +### Border Radius Scale +| Token | Value | Use | +|---|---|---| +| `{rounded.xs}` | 3px | small buttons (`.btn-sm` `.1875rem`), skip link | +| `{rounded.sm}` | 4px | standard buttons (`.btn` `.25rem`), inputs, card stacks (`4px 4px 0 0` top / `0 0 4px 4px` bottom) | +| `{rounded.md}` | 8px | header "Log in" button | + +There are no pill buttons. Circles are used only for icons. + +### Photography Geometry +Photos are full-bleed inside their tiles with square corners (the tile supplies the 4px radius). Card art is shown at a slight perspective in the hero and flat in the tile stack. + +## Components + +### Buttons +- **Primary** (`button-primary`): `#006fcf`, white 16px/400/22px text, radius 4px, padding `13px 30px`, 50px tall. DLS `.btn` also sets `min-width: 11.25rem` (180px) and `max-width: 17.5rem` (280px) with ellipsis overflow. Hover fill `#0069c4` (measured and DLS); active `#0063b9`. +- **Header sign-in** (`button-signin`): `#006fcf` with a 1px `#006fcf` border, 16px/500/24px, radius 8px, padding `11px 23px`, 48px tall. Hover only adds an underline. +- **Secondary** (`button-secondary`): white fill, `#006fcf` text and 1px border. Hover: `#f2f2f2` fill, `#0061b6` border, `#0065bd` text (DLS `.btn-secondary:hover`; measured). +- **On-image white** variant: white fill, blue text, white border ("Apply" in the hero); hover `#f2f2f2` fill with `#0065bd` text. +- **Small** (`button-sm`): 15px/22px, padding `8px 20px`, radius 3px, min 110px / max 260px (DLS `.btn-sm`). +- **Disabled** (`button-disabled`): `#f7f8f9` fill, `#c8c9c7` border, `#8e9092` text (DLS `.btn:disabled`). + +### Cards & Containers +- **Product tile stack** (`card-product`): white tiles with 1px `#c8c9c7` borders; the top tile has `4px 4px 0 0` corners and the bottom tile `0 0 4px 4px`, so the stack reads as one rounded card. Each tile has `10px 20px` padding, card art, a 16px/600 blue product name and 13px/20px gray description. +- **Offer card**: photo on top, 20px/28px BentonSans title, outlined blue button below, on white with `shadow-1`, inside a `#ecedee` band. +- **Icon card**: centered blue line icon, 16px/600 title, full-width solid blue button. +- **Promo tile** (`promo-tile-dark`): photo over a `#53565a` text panel with white 20px/26px copy; a light variant uses `#ecedee` with `#333333` text. + +### Inputs & Forms +From the DLS stylesheet (no input on the homepage): `.form-control` has `#f7f8f9` fill, `.0625rem solid #8e9092` border, radius `.25rem`, `#333` text at 16px/22px, `min-height: 3.125rem` (50px), padding `0 .625rem`. Focus changes the border to `#006fcf`, and the placeholder is `#53565a`. + +### Navigation +- **Header** (`nav`): 64px tall, white, logo + six 15px/500 `#0066be` menu labels, and on the right search / Contact us / Log in. A "Skip to content" link appears on focus (`#333333` fill, `0 0 3px 3px` radius). +- **Notice banner**: full-width bordered box with an info icon, `#53565a` 15px/22px copy and a close icon. + +### Links +Inline links in body copy are `#53565a` and underlined in notices. Navigation and footer links are Bright Blue without underline; header links ("Contact us") gain an underline on hover (measured). + +### Pills, Tags, and Chips +DLS ships `.tag`, `.badge` and `.label` components; none appear on the measured homepage. + +### Signature Components +- **Card-art tiles**: the physical card image is the hero of every product mention. DLS includes card color classes (`.dls-card-gold`, `.dls-card-platinum`, `.dls-card-centurion`, `.dls-card-green`, …). +- **Blue Box logo**: the square Bright Blue logo with white "AMERICAN EXPRESS" lettering at top left; the footer uses the horizontal blue wordmark. + +## Design System Architecture + +American Express builds its web UI with the **DLS (Design Language System)**. Its documentation site is on an internal `americanexpress.com` host that refused connections from this environment, so nothing is cited from it. The architecture below comes from the official DLS assets the live site ships, which were opened directly: +- the page HTML of https://www.americanexpress.com/th-th/ +- the stylesheet https://www.aexp-static.com/cdaas/one/statics/@americanexpress/dls/6.23.1/package/dist/6.23.1/styles/dls.min.css + +**Token architecture.** +- *Classic DLS (v6)* exposes tokens as utility classes rather than CSS variables, named by hue and step: + - text color: `.dls-bright-blue`, `.dls-deep-blue`, `.dls-gray-01` … `.dls-gray-06`, `.dls-bright-blue-hover`, `.dls-bright-blue-active`, `.dls-bright-blue-20/-40/-60` + - background: the `-bg` suffix (`.dls-gray-02-bg`), with `-bg-hvr` for hover + - semantic: `.dls-color-success`, `.dls-color-warning`, `.dls-color-attention`, `.dls-color-moderate`, `.dls-color-neutral` + - card-product colors: `.dls-card-*`, `.dls-cobrand-*` + - data-viz: `.dls-trend-*`, `.dls-fico-*` +- *Newer DLS* partials (the global header and footer, inlined in the HTML) use generated custom properties `--ds-0` … `--ds-1086`. These are primitive steps aliased into semantic slots, for example `--ds-1085: #00175a` and `--ds-1086: #0066be` in light mode. + +**Theming.** +- The newer layer switches modes with data attributes: `[data-dls-mode=light]`, `[data-dls-mode=dark]` (deep-navy primitives such as `--ds-6: #00081f`), and `[data-dls-mode=system]` paired with `@media (prefers-color-scheme: dark)`. +- Surface layering uses `[data-dls-surface=base|foreground|fg-subtle]`, which remaps the same variables per surface. +- The measured homepage renders in light mode. + +**Type & spacing.** +- Named type classes: `.heading-1` … `.heading-7` (with Guardian `-g` variants), `.body-1` … `.body-3`, `.label-1` … `.label-3`. All are rem-based, with sizes .8125 / .9375 / 1 / 1.25 / 1.875 / 2.375 / 3rem. +- Spacing centers on 1.25rem (`.pad`, `.pad-lr`, …), with responsive container gutters of 10 / 12 / 18 / 20px at breakpoints 375 / 768 / 1024 / 1280px. + +**Component model.** +- The DLS stylesheet contains components for accordion, alert, badge, breadcrumb, buttons (`.btn`, `.btn-secondary`, `.btn-tertiary`, `.btn-sm`, `.btn-icon`, white variants), card (`.card`, `.card-actionable`), carousel, checkbox, form-control, hero, label, modal, nav, pagination, progress, radio, search, select, slider, stepper, switch, tabs, table, tag, toggle and tooltip. +- States are explicit classes and pseudo-classes: hover, active, disabled and focus. + +**Accessibility.** +- DLS enforces a visible focus style everywhere: `:focus { outline: 1px dashed #53565a; outline-offset: 3px }`. White buttons on imagery use `outline: 1px dashed hsla(0,0%,100%,.92)`. +- A `prefers-reduced-motion` media query is present. +- Buttons are at least 50px tall (small variant excepted), and disabled styling uses gray fill plus gray text. + +**Delivery.** +- Versioned npm-style packages served from Amex's CDN: `@americanexpress/dls` 6.23.1 (CSS + `dls.min.js`), `@americanexpress/dls-icons` 0.5.0, `dls-fonts` 1.2.0, and an icon font `dls-icons-2.27.0`. +- The homepage itself is the `@americanexpress/homepage-frontend` 3.17.9 package. +- These packages are not on the public npm registry (an npm search for "americanexpress dls" returned no Amex packages). + +## Do's and Don'ts + +### Do +- Use `#006fcf` for every action and link, and `#333333` for reading text. +- Set section headlines in BentonSans 300 at 30px/38px; set UI and body in Helvetica Neue. +- Make primary buttons 50px tall with `13px 30px` padding and 4px corners. +- Use the DLS hover values exactly: primary `#0069c4`; secondary `#f2f2f2` fill / `#0061b6` border / `#0065bd` text. +- Lift white cards with `0 1px 1px 0 rgba(0,0,0,.1)` only. +- Show the physical card art wherever a product is named. +- Keep the 1px dashed `#53565a` focus outline with 3px offset. + +### Don't +- Don't use pill-shaped or heavily rounded buttons. +- Don't set display headlines in bold; Amex display is light. +- Don't use pure black body text. +- Don't introduce new blues; the DLS ramp is Bright Blue, Deep Blue and their 20/40/60 tints. +- Don't remove focus outlines or swap them for glows. +- Don't place Bright Blue text on Deep Blue or on photos without a white button container. + +## Responsive Behavior + +### Breakpoints +DLS breakpoints: 375px, 768px, 1024px, 1280px (`min-width` and `max-width` media queries in dls.min.css). + +At 390px (measured): +- Body text goes from 20px/26px to 16px/24px (`mobile-body`). +- The h1 wrapper keeps 30px. +- The most-set sizes become 16px, 15px, 24px, 14px, 30px and 13px. +- The primary button becomes the 50px blue "Learn more" at 308px wide (full width minus gutters). + +### Touch Targets +Standard buttons are 50px tall and the header sign-in is 48px. + +### Collapsing Strategy +- Mobile header behaviour was not measured. +- Mobile hero mosaic layout was not measured. +- Card bands become single cards in a row. + +### Image Behavior +Hero photography crops around the card art and keeps the white headline legible over its darkest region. + +## Iteration Guide + +1. White canvas, `#333333` Helvetica Neue body at 15px/22px or 16px/24px. +2. Header: 64px, Blue Box at left, 15px/500 `#0066be` menu labels, an 8px-radius blue "Log in" at right. +3. Section titles in BentonSans 300 30px/38px; small uppercase BentonSans 13px/600 eyebrows. +4. Buttons: 50px, 4px radius, `13px 30px`, Bright Blue or outlined; apply the exact DLS hover colors. +5. Cards: white, `shadow-1`, 4px corners, `#c8c9c7` dividers between stacked tiles. +6. Use `#ecedee` for tinted bands and `#53565a` for dark promo panels. +7. Add semantic colors only from DLS: success `#008767`, warning `#b42c01`, moderate `#ea700b`, attention `#fdb92d`. +8. Check focus: 1px dashed `#53565a`, 3px offset. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amgen/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amgen/DESIGN.md new file mode 100644 index 0000000..b9b1ac1 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amgen/DESIGN.md @@ -0,0 +1,161 @@ +--- +version: alpha +name: Amgen +category: "Pharma" +description: "Amgen global home page: Amgen blue #0063c3 buttons and bands, pale #edf2f7 background, Poppins with 16px uppercase 700 buttons, 3px radius, photographic story tiles with blue gradient caption panels." +colors: + canvas: "#edf2f7" + ink: "#0063c3" + primary: "#0063c3" + on-primary: "#ffffff" + surface-dark: "#151b17" + ink-grey: "#706f73" + ink-grey-light: "#747474" +typography: + display: + fontFamily: poppins, "Century Gothic", Helvetica, Arial, sans-serif + fontSize: 32px + fontWeight: 500 + lineHeight: 38px + letterSpacing: "-0.72px" + subheading: + fontFamily: poppins, "Century Gothic", Helvetica, Arial, sans-serif + fontSize: 50px + fontWeight: 700 + lineHeight: 48px + body: + fontFamily: poppins, "Century Gothic", Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + button: + fontFamily: poppins, "Century Gothic", Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 700 + lineHeight: 26px + textTransform: uppercase + nav: + fontFamily: poppins, "Century Gothic", Helvetica, Arial, sans-serif + fontSize: 13.6px + fontWeight: 400 + lineHeight: 20.4px + link: + fontFamily: poppins, "Century Gothic", Helvetica, Arial, sans-serif + fontSize: 12px + fontWeight: 400 + lineHeight: 14px + letterSpacing: 0.9px + textTransform: uppercase +rounded: + xs: 3px + sm: 4px + md: 25px +spacing: + s1: 1px + s2: 5px + s3: 6px + s4: 7px + s5: 10px + s6: 12px + s7: 15px + s8: 16px + s9: 18px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.ink}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 12px 16px + height: 50px + button-secondary: + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 12px 16px + height: 50px + borderColor: "{colors.on-primary}" + link: + textColor: "{colors.on-primary}" + typography: "{typography.link}" + nav: + backgroundColor: "{colors.on-primary}" + textColor: "{colors.ink}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + padding: 7px 0px 8px + footer: + textColor: "{colors.on-primary}" +--- + +# Amgen + +## Overview +The measured page is the global home page of Amgen at amgen.com (title "Amgen | A Worldwide Pioneer in Biotechnology"). It is a corporate biotechnology site built around editorial news: a white 60px header with the blue AMGEN wordmark, five uppercase section links (ABOUT, SCIENCE, PRODUCTS, RESPONSIBILITY, STORIES) and a smaller utility group (Newsroom, Partners, Investors, Careers, a world-map icon, a search icon); a full-bleed hero photograph with a blue story card at its lower left ("When Colorectal Cancer Strikes Early", "READ STORY", a "2 / 6" pager); a three-column grid of story tiles, each a photograph with an overlapping blue gradient caption panel; a centered "MORE STORIES" button; and a solid blue band "Our Latest Press Releases" listing two press releases in white uppercase text. + +The mood is bright, human and scientific at once. People photographed in documentary style are paired with saturated blue panels that carry abstract rounded capsule shapes, so each tile reads as an Amgen-branded card regardless of the photograph. + +## Colors +- **canvas** `#edf2f7`: the pale blue-grey page background behind the story grid (817 area weight); white `#ffffff` (563) is the header. +- **ink** and **primary** `#0063c3`: Amgen blue; the fill of the "MORE STORIES" button and of the press-release band (821 area weight), and the color of header link text. +- **on-primary** `#ffffff`: text on blue and on the gradient caption panels (3086 characters, by far the most used text color). +- **surface-dark** `#151b17` and `#000000`: near-black areas (693 area weight each) that come from the photographic hero and darkest image regions, not a UI surface; kept as a measured dark. +- **ink-grey** `#706f73` and **ink-grey-light** `#747474`: small grey text (32 characters and 1). +- **border** `#2b333fb3` (a translucent slate) is measured once. +The caption panels are blue gradients (lighter cyan-blue at the top to the brand blue); the gradient stops are image-driven and are not measured as tokens. The root variable list is empty, so no published color variables exist on the page. + +## Typography +The family is Poppins, loaded as "poppins" at 400 and 700, with the stack poppins, "Century Gothic", Helvetica, Arial, sans-serif; Arial and FontAwesome (icons) also load. +- **display** 32px / 500 / 38px, letter spacing -0.72px (hero story title, white). +- **subheading** 50px / 700 / 48px ("Our Latest Press Releases"). +- **body** 16px / 400 / 24px. +- **button** 16px / 700 / 26px, uppercase. +- **nav** 13.6px / 400 / 20.4px; header primary links measure 16px / 500. +- **link** 12px / 400 / 14px, letter spacing 0.9px, uppercase (the category and date tags such as "PATIENTS | 09.23.2026"). +By characters: 16px (769), 18px (647), 20px (470), 12px (450), 32px (379), 14px (338), 36px (72), 50px (34). Press-release titles are set in bold uppercase; story titles are bold sentence case. + +## Layout +Measured at 1280px wide with a 60px header. The hero is full-bleed; the blue story card is anchored to its lower left and overhangs the hero's bottom edge. The tile grid has three equal columns with consistent gutters; each caption panel overlaps the lower part of its photograph and is inset from the left, with its right edge staggered relative to the image. Text block widths: body paragraph 432px, hero title 500px. Spacing tokens come from measured paddings and gaps: 1, 5, 6, 7, 10, 12, 15, 16, 18 and 20px. The button padding is 12px 16px. + +## Elevation & Depth +Mostly flat, with measured shadows `0 4px 4px 0 rgba(0,0,0,0.25)`, `0 8px 4px -4px rgba(0,0,0,0.2)` and `inset 0 1px 5px rgba(0,0,0,.1)`, and a focus ring `0 0 0 2px #8CC0E0`. In the capture, depth comes from the overlap of caption panels on photographs, not from drop shadows. + +## Shapes +Small radii: 3px (4 uses; buttons), 4px (5 uses), and one 25px. Buttons are 3px. Photos and caption panels have square corners; the only rounded forms are the capsule shapes drawn inside the gradient artwork. + +## Components +- **button-primary**: `#0063c3` fill, white text, Poppins 16px / 700 uppercase, radius 3px, padding 12px 16px, height 50px, label "MORE STORIES" followed by a divider and an arrow icon. +- **button-secondary**: transparent with a 1px white border, white uppercase text, same size ("MORE NEWS", on the blue band). +- **link**: 12px uppercase tags with 0.9px tracking. +- **nav**: white bar with blue `#0063c3` text; **nav-link** 13.6px with 7px 0px 8px padding. +- **story tile**: photograph plus blue gradient panel containing a tag row (category, vertical rule, date), a hairline, a bold white title and an arrow at the right. +- **press-release item**: tag row, white bold uppercase title, a hairline above and an arrow at right. + +## Design System Architecture +No public design system or brand guideline was found: the home page markup contains no brand, design or press-kit link, and the root variables are empty. The de-facto system is a small set of repeated patterns: the blue gradient caption panel, the tag-row (category | date), uppercase Poppins buttons, and one brand blue used for chrome and bands. + +## Do's and Don'ts +- Do use `#0063c3` for buttons, links and bands, and white text on it. +- Do pair documentary photography with overlapping blue caption panels. +- Do set buttons and tags in uppercase Poppins, and titles in bold. +- Do keep corners nearly square (3px buttons). +- Don't introduce additional accent hues; the page is blue, white and photographic. +- Don't add drop shadows to tiles. + +## Responsive Behavior +Measured at 390px: the hero title stays 32px / 500 / 38px (box 299px by 190px), the body paragraph is 16px / 400 / 24px (299px by 72px), and the "MORE STORIES" button keeps its 186px by 50px size, 3px radius, 12px 16px padding. Menu collapse and column counts were not measured. + +## Iteration Guide +1. Start from `canvas` `#edf2f7`, white and `#0063c3`. +2. Build each story as photo plus a blue gradient panel with a tag row. +3. Use uppercase 16px / 700 Poppins for buttons. +4. Keep 50px / 700 for band headings with a thin vertical rule at the left. +5. Verify new values against `web/data/extracted/amgen.json`. + +## Imagery and Voice +Photography shows patients, scientists, families and staff with direct eye contact; a close-up of a blue eye and an aerial of a solar-panel facility appear as non-portrait variants. Captions are informational and personal: "For Himself and His Daughters: One Father's Journey with Thyroid Eye Disease (TED)", "More Than Dry Eyes: The Many Faces of Sjogren's Disease", "How AI Is Changing Drug Discovery and What It Will Take to Unlock Its Full Potential". Press releases use formal uppercase headlines. Tag rows carry a category (Patients, Leadership, Responsibility, People & Culture, Science & Innovation) and a dated stamp in month, day and year format, such as "07.25.2026". + +## Navigation and Content Model +The main menu on the opened "Brand Partners | Amgen" page expands to deep sub-menus: About (Overview, Amgen History, Mission and Values, Leadership, Brand Partners, Amgen Foundation, Awards and Accolades), Therapy Areas (Cardiovascular, Metabolic, Bone Health, Inflammation, Oncology), How We Operate, Science (Research and Development, Pipeline, Biosimilars, Clinical Trials) and others. That page is about sports and community partnerships rather than visual identity, so it is not a style guide. On the home page the information architecture is flattened into a stories feed: every tile shares the same anatomy (image, category tag, date, headline, arrow), which makes a repeatable card the main unit of the design. The header keeps primary links in uppercase blue and secondary corporate links (Newsroom, Partners, Investors, Careers) in a smaller grey sentence-case style at the right, separated from the primary group by whitespace. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amity-solutions/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amity-solutions/DESIGN.md new file mode 100644 index 0000000..370b604 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amity-solutions/DESIGN.md @@ -0,0 +1,173 @@ +--- +version: alpha +name: Amity Solutions +category: "Thai Brands" +description: "Amity Solutions (Thai enterprise AI software) design system: Euclid Circular B 48px headings with Inter body, white canvas, green #1dc497 8px-radius buttons, mint #e6f9f4 tints, 32px glass cards and a #121419 footer." +colors: + canvas: "#ffffff" + ink: "#414347" + primary: "#1dc497" + on-primary: "#ffffff" + surface-partner-strip: "#fafafa" + surface-footer: "#121419" + ink-heading: "#22292f" + ink-on-dark-muted: "#d0d0d1" + ink-muted: "#9e9e9e" + green-tint: "#e6f9f4" + primary-hover: "#04be8c" + card-bg: "#ffffff4d" +typography: + display: + fontFamily: "\"Euclid Circular B\", sans-serif" + fontSize: 48px + fontWeight: 600 + lineHeight: 52.8px + display-mobile: + fontFamily: "\"Euclid Circular B\", sans-serif" + fontSize: 32px + fontWeight: 600 + lineHeight: 35.2px + heading: + fontFamily: "\"Euclid Circular B\", sans-serif" + fontSize: 35.2px + fontWeight: 600 + lineHeight: 42.24px + subheading: + fontFamily: "\"Euclid Circular B\", sans-serif" + fontSize: 20px + fontWeight: 600 + lineHeight: 24px + body: + fontFamily: Inter, sans-serif + fontSize: 17.6px + fontWeight: 400 + lineHeight: 28.16px + button: + fontFamily: Inter, sans-serif + fontSize: 14px + fontWeight: 600 + lineHeight: 14px + link: + fontFamily: Inter, sans-serif + fontSize: 14px + fontWeight: 500 + lineHeight: 14px + letterSpacing: 0.704px + textTransform: uppercase +rounded: + xs: 4px + sm: 5.6px + md: 8px + lg: 12px + xl: 16px + 2xl: 32px +spacing: + s1: 1.6px + s2: 2.4px + s3: 3.2px + s4: 6px + s5: 8px + s6: 12px + s7: 16px + s8: 20px + s9: 24px + s10: 32px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 8px 12px 8px 16px + height: 36px + borderColor: "{colors.primary}" + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 8px 12px 8px 16px + height: 36px + borderColor: "{colors.primary}" + link: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + typography: "{typography.link}" + rounded: "{rounded.lg}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-heading}" + padding: 40px 0px + nav-link: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 8px 12px 8px 16px + borderColor: "{colors.primary}" + card: + backgroundColor: "{colors.card-bg}" + textColor: "{colors.ink-heading}" + rounded: "{rounded.2xl}" + padding: 40px + borderColor: "{colors.canvas}" + footer: + backgroundColor: "{colors.surface-footer}" + textColor: "{colors.canvas}" + padding: 64px 32px 32px +--- + +# Amity Solutions + +## Overview +Amity Solutions is a Thai enterprise AI software company; the page title is "Amity Solutions | Generative AI & Agentic AI for Enterprise" and the hero headline reads "Empowering Enterprises with Vertical AI & Agentic AI", with "Vertical AI & Agentic AI" set in green. The body copy states "Amity Solutions is Thailand's leading AI-powered software company. We provide enterprise AI agents as a service, powered by Vertical AI". The header has the "amity solutions" wordmark with a green double-chevron mark, menus for Solutions, Products, Newsroom and Company, an ENG / TH switch and a green "Talk to Sales" button with an arrow. The hero is a frosted glass panel over a pale teal-to-white gradient beside a rendered white and silver robot mascot in a green circle with a dark speech bubble ("I'll monitor the impact and update you in a second."). Below, a grey strip titled "AMITY SOLUTIONS PRODUCTS ARE TRUSTED BY LEADING COMPANIES" scrolls logos (Mazda, Kerry Express, Gulf, AIA, SCG, Samsung, ptt Group), followed by "Our Products": three large mint-tinted cards for LIVELY, SAVVY and HANDY, each with a different 3D cat-eared astronaut mascot, a bold product name, a one-line promise, a short description and a green "Explore ..." button. The voice is enterprise, benefit-oriented and product-named. + +## Colors +The brand color is green `#1dc497` (the site's own `--amity-green`), used for buttons, link text, the headline emphasis and the logo chevron; hover measured `#04be8c`. Its light tint `#e6f9f4` (`--amity-light-green`) is the hairline and card-border color and fills the mint cards. Canvas is white `#ffffff`; `#fafafa` fills the partner strip and alternate sections (`--white-smoke`); `#121419` (`--black-tint`) is the footer; `#ffffff4d` (white at 30 percent) is the glass panel and card fill. Text is `#414347` (`--grey`, 1,820 characters) for body, `#22292f` (`--text-color-dark`) for headings, `#9e9e9e` for muted text (`--grey-medium`) and `#d0d0d1` for text on the dark footer. The root variables also declare secondary accents `--yellow` `#ffcd1a`, `--light-red` `#ed6a5e`, `--alt-green` `#29cb72`, `--red` `#ff456b` and `--cyan` `#05bed2`, plus `--border-light` `#e7e7e7` and `--border-dark` `#232324`; these are declared but are not part of the measured hero and product look, so they are not promoted to tokens. + +## Typography +Headlines and product names use Euclid Circular B (weights 500 and 600), body and buttons use Inter (400 to 600), and Noto Sans Thai appears for Thai text (54 characters). The h1 is Euclid Circular B 48px, weight 600, line-height 52.8px; the section heading "Our Products" is 35.2px weight 600 with 42.24px line-height; sub-headings are 20px weight 600 with 24px line-height. Body is Inter 17.6px weight 400 with 28.16px line-height (1,677 characters, the dominant size). Buttons are 14px weight 600 and uppercase-tracked links use 14px weight 500 with 0.704px letter-spacing. Euclid Circular B is a licensed typeface; Inter or Plus Jakarta Sans could stand in. Noto Sans Thai handles Thai and is open. + +## Layout +The desktop capture is 1,280px wide and 5,831px tall. The header is 4.25rem high (`--_navigation---nav-size`) inside a 75rem navigation width. Content containers are published as `--_containers---container-small` 40rem, `-medium` 50rem, `-large` 65rem and `-xlarge` 75rem. The hero is two columns: a glass copy panel on the left and the mascot illustration on the right. Product cards are full-width containers that alternate image-left and image-right. Vertical spacing uses published margins (`--_margins---margin-bottom_xs` .25rem, `_s` .5rem, `_m` 1.5rem, `_l` 3rem, `_xl` 5rem). Measured paddings are 16px, 40px, 32px, 20px and 64px; gaps are 6px, 80px, 8px and 32px. + +The three product blocks carry the page's whole message. LIVELY is described as "From Conversation to Resolution", a Vertical AI Contact Center Suite trained on the customer's own products, policies and workflows to resolve issues in a single conversation; SAVVY, "Turn Sales Data into Daily Revenue", is a Vertical AI Sale Suite that automates daily sales analysis and recommends Next-Best-Actions; HANDY, "Turn Retail Data into Smarter Store Decisions", is a Vertical AI Retail Companion for sales, promotions, pricing and stock. Each name is typed in capitals in the heading font, each mascot has its own finish and the layout alternates sides so the long scroll keeps a steady rhythm without adding new colors. + +## Elevation & Depth +Shadows are rare: `rgba(18, 20, 25, 0.16) 0px 16px 32px 0px` (one use) and `rgba(4, 4, 32, 0.16) 4px 0px 4px 0px`. Depth is produced by translucency and gradient: the white 30 percent glass panel over the teal gradient, mint cards with a 1px `#e6f9f4` border, and the 3D rendered mascots with their own lighting. The dark speech bubble provides the strongest contrast element in the hero. + +## Shapes +Containers use large rounding: 32px on the glass panel and product cards (token `rounded.2xl`), 16px on 16 elements, 12px on 10; buttons use 8px; small elements use 5.6px and 4px; images have `12px 12px 0px 0px` top rounding. The mascots sit in circles. The overall effect is soft, with buttons squarer (8px) than their containers (32px). + +## Components +**button-primary**: green `#1dc497` fill and border, white text, Inter 14px weight 600, radius 8px, padding 8px 12px 8px 16px, height 36px, trailing arrow icon ("Get Started Today", 179px wide); hover fill `#04be8c`. +**button-secondary / nav-link**: same green styling for "Talk to Sales" and "Explore LIVELY". +**link**: green 14px weight 500 uppercase with 0.704px tracking, 12px radius. +**nav**: white, `#22292f` text, padding 40px 0px. +**card**: white at 30 percent, 32px radius, padding 40px, white border, `#22292f` text. +**footer**: `#121419` with white text, padding 64px 32px 32px. +The cookie preferences dialog and the Thai-language prompt shown over the capture are popups and are not brand components. + +## Design System Architecture +No public design-system or brand-guideline page was found; the home page links none. The site is a Webflow build with Client-First naming (variables such as `--_typography---size--h3-font-size: clamp(1.5rem,1vw + 1rem,2.25rem)`, `--_margins---margin-bottom_xl`, `--_containers---container-large`, `--_navigation---nav-size`), alongside brand variables (`--amity-green`, `--amity-light-green`, `--text-color-dark`, `--grey`, `--grey-medium`, `--black-tint`) and greys named `--ekoai-grey`, `--ekoai-grey-text-1` and `--ekoai-grey-text-2`. Fluid type sizes use `clamp()`. + +## Do's and Don'ts +- Do use `#1dc497` for every action and for the emphasized words in the headline. +- Do pair large mint-tinted cards with 3D mascot renders, one mascot per product. +- Do put the product name in uppercase Euclid Circular B and a one-line promise beneath. +- Do keep buttons at 8px radius and cards at 32px. +- Don't use the unmeasured yellow, red and cyan variables as UI colors. +- Don't show the cookie dialog as a component. +- Don't use hard shadows; the system relies on tint and translucency. + +## Responsive Behavior +At the 390px mobile pass the h1 measured 32px weight 600 with 35.2px line-height in a 300px block (48px on desktop). The "Get Started Today" button measured 14px type, 36px height and 167px width (179px on desktop). Mobile font sizes by character count: 16px (1,821), 14px (364), 20px (282), 15px (193), 32px (162), 12px and 18px. Breakpoint widths and menu collapse were not measured. + +## Iteration Guide +1. Start with white canvas, ink `#414347`, headings `#22292f`, green `#1dc497`, mint `#e6f9f4`, footer `#121419`. +2. Build a glass hero panel (white at 30 percent, 32px radius) beside a 3D mascot. +3. Follow with a partner-logo strip on `#fafafa` and alternating mint product cards. +4. Use Euclid Circular B for headings and Inter for body. +5. Re-run the gate after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amplitude/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amplitude/DESIGN.md new file mode 100644 index 0000000..ceff88a --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amplitude/DESIGN.md @@ -0,0 +1,226 @@ +--- +version: alpha +name: Amplitude +category: "Product & SaaS" +description: "Amplitude's analytics site: a white #ffffff canvas with black #000000 headlines in Gellix 72px/600 tracked -1px, Gray 70 #50565b body copy at 18px/24px, black pill 'Start for free' buttons, Amplitude Blue #0052f2 reserved for CTAs, links and eyebrows, #f5f7fa product panels and 13.5px-radius cards." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#0052f2" + on-primary: "#ffffff" + blue-on-black: "#4083ff" + accent-dark-blue: "#001a4f" + accent-lilac: "#6980ff" + accent-violet: "#a373ff" + surface-panel: "#f5f7fa" + ink-gray-70: "#50565b" + ink-gray-50: "#868d95" + ink-on-dark: "#ffffffcc" + ink-navy: "#353c5f" + hairline: "#e2e4e9" + card-border: "#d5d9e0" +typography: + display: + fontFamily: "\"Twemoji Country Flags\", Gellix, Arial, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 72px + fontWeight: 600 + lineHeight: 72px + letterSpacing: "-1px" + display-mobile: + fontFamily: "\"Twemoji Country Flags\", Gellix, Arial, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 44px + fontWeight: 600 + lineHeight: 44px + letterSpacing: "-1px" + heading: + fontFamily: "\"Twemoji Country Flags\", Gellix, Arial, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 28px + fontWeight: 600 + lineHeight: 31px + letterSpacing: "-0.5px" + subheading: + fontFamily: "\"Twemoji Country Flags\", Gellix, Arial, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 22px + fontWeight: 600 + lineHeight: 24px + letterSpacing: "-0.5px" + body: + fontFamily: "\"Twemoji Country Flags\", Gellix, Arial, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 18px + fontWeight: 400 + lineHeight: 24px + button-announcement: + fontFamily: Poppins, "Twemoji Country Flags", Gellix, Arial, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 14px + fontWeight: 600 + lineHeight: 21px + nav: + fontFamily: "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\", \"Twemoji Country Flags\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 18px + fontWeight: 400 + lineHeight: 28px + link: + fontFamily: "\"Twemoji Country Flags\", Gellix, Arial, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 14px + fontWeight: 500 + lineHeight: 19px + button: + fontFamily: "\"Twemoji Country Flags\", Gellix, Arial, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 16px + fontWeight: 600 + lineHeight: 22px +rounded: + xs: 4px + sm: 6px + md: 8px + lg: 12px + xl: 13.5px + 2xl: 16px + 3xl: 32px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 6px + s4: 7px + s5: 8px + s6: 10px + s7: 12px + s8: 14px + s9: 16px + s10: 17px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button-announcement}" + rounded: "{rounded.sm}" + padding: 8px + height: 32px + borderColor: "{colors.primary}" + button-pill: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 0px 18px + height: 48px + link: + textColor: "{colors.ink-gray-70}" + typography: "{typography.link}" + announcement-bar: + backgroundColor: "{colors.ink}" + textColor: "{colors.on-primary}" + nav: + textColor: "{colors.ink}" + padding: 17px 0px 0px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + card: + textColor: "{colors.ink-navy}" + rounded: "{rounded.2xl}" + padding: 24px + borderColor: "{colors.card-border}" + footer: + textColor: "{colors.ink-gray-50}" +--- + +# Amplitude + +## Overview + +Amplitude is a digital analytics and AI-agent platform, and amplitude.com is a clean, white, product-forward page: black geometric headlines, gray body copy, black pill buttons, Amplitude Blue held back for small calls to action and links, and generous product screenshots on pale #f5f7fa panels. A black announcement bar ("Measure the impact of your AI shipping with the North Star Playbook") carries a small blue "Start reading" button. The white header shows the Amplitude logo, Platform, Solutions, Resources and Pricing, and at right "Login", an outlined "Contact sales" and a black "Get started" pill. + +The hero pairs a left-aligned headline, "A new era for product teams", in Gellix at 72px, weight 600, with -1px tracking, against a right-hand intro ("From analytics to feedback to code…") and two pills: black "Start for free" and outlined "Talk to sales". A small eyebrow chip above the headline links to a launch. Below, a tabbed product frame (Agent Analytics, Global Chat, AI-powered Replays, AI Data Governance) shows the Amplitude interface with an AI chat panel. Then follow a logo wall ("Trusted by teams shaping the future"), "One interface. All our capabilities." with prompt chips and an AI chat mock, "Set up Amplitude where you build" with a grid of agent-tool tiles (Claude, Cursor, GitHub Copilot, Windsurf, Replit, Codex, Gemini, Figma Make, Lovable), a performance line chart with four big stats, "The platform for building self-improving products" four-up cards, customer video tiles (Fender, Backstage, Udemy), featured resources and a closing "The industry's most generous free plans" before a white link footer. + +Copy is short and declarative ("A new era for product teams", "Hear what changed when our customers stopped guessing"). + +## Colors + +The brand site (https://brand.amplitude.com/creative/color) names the primaries Amplitude Blue, Black and White ("lead with our primaries"), secondary accents Dark Blue #001A4F, Lilac #6980FF, Violet #A373FF, Pink #FF7D78 and Red #F23845 ("used sparingly"), and a gray ramp from Gray 100 #13171A to Gray 10 #F2F4F8. The typography guide states "Amplitude Blue is reserved for CTAs, links, and eyebrows" and that blue text on black must use #4083FF. + +On the measured page: + +- **Canvas #ffffff** and **ink #000000** — the page is white with black headlines; black also fills the announcement bar and the hero pills. +- **Primary #0052f2** — Amplitude Blue as rendered: the "Start reading" button fill and blue link text; hover lightens it (measured). +- **On-primary #ffffff** — labels on blue and black. +- **Ink-gray-70 #50565b** — Gray 70, body paragraphs and links; **ink-gray-50 #868d95** — Gray 50, the footer. +- **Card-border #d5d9e0** — Gray 20, card outlines; **hairline #e2e4e9** — the most common border. +- **Surface-panel #f5f7fa** — the pale panels behind product frames and tabs. +- **Ink-navy #353c5f** — text inside product mock cards; **ink-on-dark #ffffffcc** — 80% white text. +- **Blue-on-black #4083ff**, **accent-dark-blue #001a4f**, **accent-lilac #6980ff** and **accent-violet #a373ff** — official values for dark-background links and illustration accents. + +A deep #10069f and #0a0f29 appear in the "Software Speedrun" resource artwork and dark media tiles. + +## Typography + +The brand guide names **Gellix** ("a geometrical sans-serif font", Regular, Medium, SemiBold, Bold) as the primary typeface, **Poppins** as the first substitute, Helvetica as the last resort and Noto Sans for unsupported languages; Bold is reserved "for key, succinct display headings", SemiBold is the default for titles, and Medium and Regular are for body copy. + +On the page, every Gellix stack starts with "Twemoji Country Flags" (an emoji-flag face listed first), so measurement tools report that name; the rendered text is Gellix. + +- **Display** — 72px / 72px, weight 600, -1px tracking. +- **Section headings** — 44px with -0.5px tracking ("One interface. All our capabilities."); 56px also appears. +- **Heading** — 28px / 31px, weight 600, -0.5px ("Trusted by teams shaping the future"). +- **Subheading** — 22px / 24px, weight 600, -0.5px (card titles). +- **Body** — 18px / 24px, weight 400, in Gray 70. 16px with -0.4px tracking is the most common size by characters. +- **Button** — 16px / 22px, weight 600 for pills; the announcement button uses Poppins 14px / 21px weight 600. +- **Nav link** — IBM Plex Sans 18px / 28px weight 400; links 14px / 19px weight 500. + +## Layout + +At 1280px the content spans 68px to 1217px. The hero is split: headline left, intro and buttons right. Product frames run full content width; feature cards sit four across; agent-tool tiles run up to nine across; customer videos three across; resources are a large feature card beside a stacked list. Ten header items are visible on desktop. + +Spacing: gaps of 12px, 6px and 8px dominate inside components; paddings of 16px, 24px and 48px are most common; 80px paddings separate sections. The spacing tokens step 2, 4, 6, 7, 8, 10, 12, 14, 16 and 17px. + +## Elevation & Depth + +The page is flat. The only measured box-shadow is a transparent 0px 4px 16px placeholder, so cards rely on 1px #d5d9e0 or #e2e4e9 borders and the pale #f5f7fa panel color for separation. Product screenshots carry their own internal shadows. Translucent panels (#f5f7facc, #f2f4f880) layer over imagery for a light glass effect. + +## Shapes + +4px is the most frequent radius (chips, small controls), followed by 9999px pills (all primary actions, tabs such as "MCP" and "SDK"). Cards and tiles use 13.5px; 16px for larger cards; 6px on the announcement button; 8px, 12px and 32px elsewhere; tab panels use 4px 4px 0px 0px and 0px 0px 4px 4px halves. Icons are filled brand logos on white tiles. + +## Components + +- **Pill button** — #000000 fill, white Gellix 16px weight 600, 9999px radius, 0px 18px padding, 48px tall ("Start for free"); hover lightens the fill to a dark gray (measured). A 40px "Get started" version sits in the header. +- **Outlined pill** — transparent with black text and border ("Talk to sales", "Contact sales"). +- **Blue button** — #0052f2 fill and 1px border, white Poppins 14px weight 600, 6px radius, 8px padding, 32px tall ("Start reading" in the announcement bar). +- **Product tabs** — #f5f7fa tab row with 16px weight 600 labels, 48px tall, 0px 12px padding. +- **Card** — 16px radius, 24px padding, #d5d9e0 border, #353c5f text, screenshot on top. +- **Stat** — large numerals (41.7%, 1.34M, 29.2k, 1.21M) with small gray captions. +- **Video tile** — full-bleed portrait with white overlay text and a play button. +- **Footer** — white, five link columns in #868d95, language links and legal row. + +## Design System Architecture + +Amplitude publishes a brand site at https://brand.amplitude.com/ with Philosophy, Content, Creative and References sections; the color page (https://brand.amplitude.com/creative/color) defines primaries, secondaries and a ten-step gray ramp, and the typography page (https://brand.amplitude.com/creative/typography) defines Gellix with Poppins and Helvetica fallbacks and weight roles. The marketing site's root variables expose only font hooks (`--font-ibm-plex-sans`, `--font-ibm-plex-serif`); component colors are compiled into utility classes, and the gray values in use (#50565b, #868d95, #d5d9e0) match the brand ramp's Gray 70, Gray 50 and Gray 20. + +## Do's and Don'ts + +**Do** +- Lead with black, white and Amplitude Blue; keep blue for CTAs, links and eyebrows (brand rule). +- Set titles in Gellix SemiBold with slight negative tracking; reserve Bold for short display lines. +- Use the gray ramp for hierarchy: Gray 70 for body, Gray 50 for tertiary text. +- Make primary actions pills; pair a black pill with an outlined pill. +- Show the real product inside pale #f5f7fa frames. + +**Don't** +- Don't lead with secondary colors, and don't use pink or red in quantity (brand rule). +- Don't color typography with secondaries unless brand approves (brand rule). +- Don't use #0052f2 for blue text on black; use #4083ff. +- Don't document the chat widget as brand UI. + +## Responsive Behavior + +The extractor's mobile pass at 390px measured: the h1 at 44px / 44px, weight 600, -1px tracking; the h2 at 28px / 31px with -0.25px; body text unchanged at 18px / 24px; the announcement button unchanged (14px, 32px tall). Three header items remain visible with a menu toggle labelled "Open navigation menu"; the announcement bar grows to 98px tall; content spans 22px to 366px. Media queries in the stylesheet are chiefly min-width 992px, min-width 768px, max-width 650px and min-width 1130px, with others from 380px to 1342px. Other mobile behaviour was not measured. + +## Iteration Guide + +1. Start white with black headlines and Gray 70 #50565b body copy. +2. Use Gellix (or Poppins, the official substitute) at 600 for titles: 72px display, 44px sections, 28px headings. +3. Build primary actions as 48px black pills; add an outlined pill for the secondary. +4. Use #0052f2 only for small CTAs, links and eyebrows. +5. Frame product screenshots on #f5f7fa panels with #d5d9e0 borders and 13.5–16px radii. +6. Keep the page flat — borders, not shadows. +7. Check the 44px mobile headline at 390px. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/amrit-palace/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/amrit-palace/DESIGN.md new file mode 100644 index 0000000..4df4a6c --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/amrit-palace/DESIGN.md @@ -0,0 +1,118 @@ +--- +version: alpha +name: Amrit Palace +category: "Food & Beverage" +description: "Amrit Palace home page: sand #d8cbb8 background, charcoal #2c2c2c text, saffron amber #d49653 menu panel and icon tiles, Satoshi 11px copy with TT Ramillas serif display, 2-4px radii and dark candle-lit photography." +colors: + canvas: "#d8cbb8" + ink: "#2c2c2c" + primary: "#d49653" + surface-dark: "#292622" + surface-taupe: "#bfb4a3" +typography: + display: + fontFamily: Satoshi, Arial, sans-serif + fontSize: 37.12px + fontWeight: 500 + lineHeight: 37.12px + letterSpacing: "-1.4848px" + link: + fontFamily: Satoshi, Arial, sans-serif + fontSize: 12.096px + fontWeight: 500 + lineHeight: 16.9344px + letterSpacing: "-0.128px" +rounded: + xs: 2px + sm: 3px + md: 4px +spacing: + s1: 1px + s2: 2px + s3: 3px + s4: 4px + s5: 6px + s6: 8px + s7: 10px + s8: 12px + s9: 16px + s10: 20px +components: + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + nav: + textColor: "{colors.ink}" + padding: 0px 12px 0px 0px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.xs}" +--- + +# Amrit Palace + +## Overview +The measured page is the home page of Amrit Palace (amritpalace.com), an Indian restaurant serving central Florida with two locations, Ocala (3415 SW College Rd) and Gainesville (3105 SW 34th Street), "established 1996" according to the page text. The site is a Webflow build and reads as a warm, dark, photographic restaurant page: a charcoal header with a small ornamental logo mark, plain links (Home, Catering, Gift Cards, About, Reserve a Table, Contact) and, at the right, a "Menu" link with an amber fork-and-knife tile and an "Order Now" link with an amber tile; a full-width hero photograph of a long candle-lit table with a short paragraph at the lower left and a beige review card at the lower right; a framed full-width photograph of a tandoori platter with one line of copy ("From warm hospitality to bold flavors, every detail tells a story."); and a split section with an amber menu panel on a charcoal column beside a beige text column and a photograph of curries. + +Colors are earthy: sand beige, charcoal and saffron amber. The page is largely photography-led, and copy is set small. + +## Colors +The site publishes three variables: `--biege` `#d8cbb8`, `--primary` `#d49653` and `--dark` `#2c2c2c`. +- **canvas** `#d8cbb8`: sand beige; the main background (3338 area weight) and the light text color on dark photos (1388 characters). +- **ink** `#2c2c2c`: charcoal; text on beige and amber (4078 characters) and the border color (`#2c2c2c` and a 20% tint `#2c2c2c33`). +- **primary** `#d49653`: saffron amber; the "Menu" panel background (540 area weight), the header icon tiles, and rating stars. It is the only saturated color. +- **surface-dark** `#292622`: warm near-black; the header and the column behind the menu panel (1282 area weight). +- **surface-taupe** `#bfb4a3`: a darker beige (1200 area weight). +Also measured: translucent black overlays `#0000004d` and `#0000008c` (1382 and 924 area weight) over photographs, and `#2c2c2c66`. The overlays are photographic scrims, not UI colors. +The extractor assigned no filled button, so there is no measured button fill or `on-primary` text color; the amber header tiles are icon tiles. + +## Typography +Two main families plus a script face: Satoshi (500 and 700) for interface and body, TT Ramillas Variable (weights 200 to 900) as a serif display face, and Bad Script (400) loaded as a decorative script. webflow-icons provides icons. +- **display**: Satoshi 37.12px / 500 / 37.12px, letter spacing -1.4848px (measured on the "4.7" rating figure; the detected "h1" role for this page is this numeral, since the hero carries no heading element). +- **link**: Satoshi 12.096px / 500 / 16.9344px, letter spacing -0.128px. +The header element measures TT Ramillas Variable at 19.2px / 300 / 19.2px with -0.672px tracking. +By characters: 11.52px (2938), 10.88px (1352), 23.04px (818), 10.24px (110), 12.8px (96), 12.096px (87), 19.2px (59), 176.64px (12) and 37.12px (6). Body copy is therefore very small (about 11px to 12px) while a handful of characters are set at 176.64px, which matches the oversized serif words of the section titles ("flavors", "that stay") in the page text. Letter spacing is slightly negative throughout. + +## Layout +Measured at 1280px wide. The hero and the second photograph are full width, the second inset in a beige frame with a margin of about the width of the page gutter; the menu section is a two-column split, with a charcoal left column holding the amber menu card (about 520px wide, 1032px tall) and a beige right column with a paragraph. Spacing tokens come from measured paddings and gaps: 1, 2, 3, 4, 6, 8, 10, 12, 16 and 20px; the menu card has 24px bottom padding. + +## Elevation & Depth +Flat. The measured shadows are Plyr media-player thumb shadows (`0 1px 1px #23282f26, 0 0 0 1px #23282f33`) and `0 1px 2px #00000026`; they belong to the embedded video player controls. Layers are separated by color fields and 1px hairlines. + +## Shapes +Radii are tight: 3px (15 uses), 2px (the review card) and 4px (the menu card). Header icon tiles in the capture have small rounded corners. No pills. + +## Components +- **review card**: beige `#d8cbb8`, 2px radius, 1px `#2c2c2c33` border, five amber stars, a Google logo, the figure "4.7" with "/5", "Excellent" and "Based on 3 576 reviews" (294px by 129px). The rating logo is a third-party mark. +- **menu card**: amber `#d49653`, 4px radius, rows divided by 1px charcoal hairlines; each row has a name at the left, a price at the right ("$17.99"), and a one-to-two line description below; an amber-tinted fork-and-knife icon sits at the top right. +- **nav**: charcoal bar with light sentence-case links; **link** 12.096px / 500. +- **icon tiles**: amber squares with a dark icon for Menu and Order Now. +- **card**: beige, 2px radius. + +## Design System Architecture +No public design system or brand guidelines were found; the markup of the home page has no brand, press or design link. The de-facto system is a Webflow style set with three named color variables (`--biege`, `--primary`, `--dark`) and a Plyr video player theme variable (`--plyr-color-main`). + +## Do's and Don'ts +- Do keep the palette to sand `#d8cbb8`, charcoal `#2c2c2c` and amber `#d49653`. +- Do let dark, warm photography carry the mood. +- Do set menu rows with names left, prices right and a short description below. +- Do keep corners at 2px to 4px. +- Don't use bright or cool colors; none are measured. +- Don't treat the video player shadows as card elevation. + +## Responsive Behavior +Not measured as a layout. The 390px pass returned only a "Menu" label (14.82px / 500 in `#d8cbb8`), which indicates that the navigation is represented by a "Menu" control at that width; no other mobile values were recorded. + +## Iteration Guide +1. Start from beige canvas, charcoal ink and amber primary. +2. Use charcoal for header and for the column behind the menu card. +3. Set body copy small and tight; reserve very large serif type for section words. +4. Menu rows follow name, price and description with hairline dividers. +5. Verify new values against `web/data/extracted/amrit-palace.json`. + +## Imagery and Voice +Photography is dim and cinematic: a long banquet table with candles, a smoky tandoori platter in foil beside a drink, and overhead curry pots with cilantro. Copy is warm and short: "At Amrit Palace, every dish is a tribute to tradition and every moment is crafted for today. We bring together the warmth of Indian hospitality, the richness of timeless flavors, and the pace of modern life." and "Every item on our menu reflects decades of tradition - recipes passed down, refined through experience, and thoughtfully adapted for today's palate." The page lists working hours (Tue-Fri 11 AM to 10 PM; Sat-Sun 12 AM to 10 PM; Mon closed) and offers "Book" links for each location. Menu entries include Variety Tray, Butter Chicken, Lamb Curry, Palak Paneer, Chicken Tandoori, Chicken Tikka Masala, Gobhi Manchurian (V) and Aloo Gobhi (V). + +## Booking and Navigation Patterns +Reservation and ordering are location-aware. The header's "Reserve a Table" entry opens a "Choose restaurant" chooser with two actions, "Book - Ocala" and "Book - Gainesville"; the "Order Now" tile opens the same chooser with the two restaurant names, "Amrit Palace Ocala" and "Amrit Palace Gainesville", and a "Close" control. A full-screen "Menu" overlay repeats the links in lowercase (home, catering, gift card, store, about, contact, reserve a table) next to the working hours and both street addresses. The pattern is a stack of choice lists rather than a single global button, so every action in the interface is a text link or an icon tile and there is no filled call-to-action button. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ana/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ana/DESIGN.md new file mode 100644 index 0000000..89f2dd1 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ana/DESIGN.md @@ -0,0 +1,270 @@ +--- +version: alpha +name: ANA (All Nippon Airways) — US English site +category: "Airlines" +description: "ANA's US English home page measured live — a #f1f1f1 grey page with white #ffffff panels, ANA navy #00146e for every action, #333333 text, a pale booking blue #ccd4ea, and a Myriad Pro stack (Segoe UI, Helvetica, Arial fallbacks) set at 14px body with 600-weight headings; pill buttons at 18px and 100px radii, 15px and 20px card corners." +colors: + canvas: "#f1f1f1" + page-largest: "#ffffff" + ink: "#333333" + primary: "#00146e" + on-primary: "#ffffff" + surface-booking: "#ccd4ea" + ink-muted: "#6e6e6e" + ink-subtle: "#525252" + border-strong: "#949499" + css-red: "#d91829" +typography: + display: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 16px + fontWeight: 600 + lineHeight: 24px + heading: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 28px + fontWeight: 600 + lineHeight: 36.4px + subheading: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 24px + fontWeight: 600 + lineHeight: 31.2px + body-md: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + body: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 18px + button: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 12px + fontWeight: 600 + lineHeight: 18px + button-fare: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 14px + fontWeight: 600 + lineHeight: 21px + letterSpacing: -0.28px + nav: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 14px + fontWeight: 700 + lineHeight: 21px + input: + fontFamily: >- + "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans + CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif" + fontSize: 14px + fontWeight: 600 + lineHeight: 16.1px +rounded: + xs: 2px + sm: 3px + md: 14.5px + lg: 15px + xl: 16.5px + 2xl: 17px + 3xl: 18px + 4xl: 20px + fare: 100px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 5px + s4: 8px + s5: 11.03px + s6: 12px + s7: 14px + s8: 16px + s9: 17px + s10: 19px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 8px 16px + height: 34px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.3xl}" + padding: 8px 16px + height: 34px + button-fare: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button-fare}" + rounded: "{rounded.fare}" + padding: 12px 16px + height: 45px + chip-outlined: + textColor: "{colors.ink}" + typography: "{typography.body}" + rounded: "{rounded.2xl}" + border: "1px solid #333333" + padding: 4px 24.4px 4px 12px + height: 28px + link: + textColor: "{colors.ink}" + typography: "{typography.body}" + nav: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.ink}" + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + padding: 0px 0px 24.0625px + text-input: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.primary}" + typography: "{typography.input}" + height: 58px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.lg}" + padding: 18px + tile-card: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.ink}" + typography: "{typography.display}" + rounded: "{rounded.4xl}" +--- + +## Overview + +This document describes the US English home page of All Nippon Airways at `https://www.ana.co.jp/en/us/`, measured live on 2026-10-17 (desktop 1280px wide, 7,361px tall, plus a mobile pass). It is a booking-first airline portal rather than a marketing landing page. The top of the page is a stack of dated service notices on the pale booking blue #ccd4ea, followed by a white header carrying the "ANA Inspiration of JAPAN" logo (an SVG, 260 × 24px), a short utility row ("USA ・English", "Join", "Login") and four primary navigation entries — Plan and Book, Travel Information, The ANA Experience, ANA Mileage Club. + +Below the header a full-width promotional carousel ("Find your Fukuoka" sweepstakes in the capture) sits above the booking widget, which is the real centre of gravity: Reservations / Flight Status / My Booking / Check-in tabs, then Tickets / Flight Awards / Hotel / Car Rentals, a Round Trip / One Way toggle and From/To airport fields. A row of six icon shortcuts (Guide, Baggage Information, Information for Online Check-in, Special Assistance, Paid Services EMD Search, Japan Domestic Fares) completes the utility zone. + +The long grey body (#f1f1f1, 4,677px tall on desktop) then alternates content modules on white panels: "Information from ANA", the "ANA Fare Lineup" grid of eight city cards (Los Angeles-Tokyo, New York-Tokyo, Seattle-Tokyo and others) each with a navy "Check fares" pill, "Recommendations for Enjoying Your Destination", "Recommended Hotels" in a carousel, a full-bleed "Explore Japan your way" banner, "ANA's Services", and the "ANA Mileage Club App" block. A white "Notices from ANA" list, accordion rows for Topics and Information, and a grey social/footer band close the page. + +The tone is calm, institutional and dense with information: navy is the only action colour, photography carries the emotion (city skylines, snow monkeys, hotel exteriors, Mount Fuji), and the type is a quiet humanist sans at small sizes. + +## Colors + +The palette is narrow and almost entirely measured from rendered elements: + +- **canvas #f1f1f1** — the body background (`desktop.roles.body.backgroundColor`) and the long content band behind the fare and recommendation modules. It covers 22% of the capture. +- **page-largest #ffffff** — the largest painted area (weight 11,187 in `backgroundColorsByArea`, 53% of the capture): header, booking widget, module panels and the notices list. +- **ink #333333** — the most-read text colour (7,287 characters), used for headings h2/h3, paragraphs, links and the outlined chip border. +- **primary #00146e** — ANA navy. It fills every measured CTA (Login, Join, Check fares), colours the selected airport values in the booking inputs, and is published on the page as the CSS custom property `--color-booking-primary`. It is also the second most-read text colour (369 characters), used for small navy labels such as "Notices from ANA". +- **on-primary #ffffff** — the text on navy buttons. +- **surface-booking #ccd4ea** — the notice strip at the top and booking accents, published as `--color-booking-secondary` (a lighter `--color-booking-secondary-lighten` #dde5fb is also declared in rootVars but was not measured as a painted area). +- **ink-muted #6e6e6e** and **ink-subtle #525252** — secondary text greys for captions, dates and metadata. +- **border-strong #949499** — the second most frequent border colour on rendered elements; it also appears 307 times in the stylesheet corpus. +- **css-red #d91829** — a red that appears 162 times in the site's stylesheets. Its rendered role was not measured; it is recorded so it is not lost, not as an action colour. + +There is no gradient system in the measurements, and no shadows were recorded on rendered elements (`boxShadows` is empty), although the stylesheet corpus declares `0 0 10px rgba(0, 0, 0, 0.16)` 272 times. + +## Typography + +Every measured element uses the same family stack beginning with **Myriad Pro**, followed by Segoe UI, Helvetica, Arial, Verdana, Roboto, Droid Sans and a long list of Japanese system faces (Hiragino Sans, Hiragino Kaku Gothic ProN, Noto Sans CJK JP, Meiryo, Osaka, MS PGothic). The extraction's `loadedFonts` lists only the `asw-icon` icon font, so no Myriad Pro webfont was downloaded during the measurement; the face used is whatever the visitor's machine resolves from that stack. Substitutes, if Myriad Pro is unavailable: the stack's own Segoe UI / Helvetica / Arial fallbacks, or an open humanist sans such as Source Sans 3. + +Measured scale: + +- **display** 16px / 600 / 24px — the role detected as h1 is the "Reservations" tab label, a span in navy; the page has no larger visible h1. +- **heading** 28px / 600 / 36.4px — section titles such as "Information from ANA", centred. +- **subheading** 24px / 600 / 31.2px — route titles like "Los Angeles-Tokyo". +- **body-md** 14px / 400 / 21px — the body default and the most-read size (5,468 characters). +- **body** 12px / 400 / 18px — fare footnotes and fine print, the paragraph size the extractor recorded. +- **button** 12px / 600 / 18px — header Login/Join. +- **button-fare** 14px / 600 / 21px with -0.28px tracking — "Check fares". This is the only measured letter-spacing besides 20px / -0.4px. +- **nav** 14px / 700 / 21px. +- **input** 14px / 600 / 16.1px in navy. + +Weights by characters are 400 (5,336), 600 (2,354), 900 (500) and 700 (52). There is no uppercase styling on measured roles. + +## Layout + +Desktop content runs between x=55 and x=1194 at 1280px, centred. The extractor's bands: a 158px #ccd4ea notice strip, a 111px white header, a 360px media carousel with three visible columns (the active slide flanked by neighbours), the 4,677px grey content band with up to six columns, a 1,466px white notices band, a 376px grey social band and a 214px white footer. + +Inside the grey band, modules are white panels with headings centred above them. The fare lineup is a four-column grid of image cards (two rows of four in the capture); recommendations and services are four-up rows; hotels run as a carousel with pagination dots. Measured paddings cluster at 16px, 12px, 8px and 24px, with 22.5px recurring; gaps are small (5px, 12px, 14px). The spacing tokens are the measured paddings and gaps; the page does not follow a strict 4px or 8px grid. + +## Elevation & Depth + +No box shadows were recorded on rendered elements in the desktop pass, so depth comes from tone: white panels on the #f1f1f1 canvas, and #ccd4ea for the booking-related strip. The stylesheet corpus does declare soft, centred shadows — `0 0 10px rgba(0, 0, 0, 0.16)` (272 declarations), `0 0 10px rgba(0, 0, 0, 0.1)` (66) and `0 0 4px rgba(0, 0, 0, 0.3)` (20) — which belong to states or components not visible in the measurement. If you need elevation, use one of those declared values, never a hard drop shadow. + +## Shapes + +ANA's shape language is rounded but not playful. Measured radii: 20px is the most frequent (25 elements — the white shortcut tiles and panels), 50% for carousel dots and round icons, 100px for the "Check fares" pills, 30px, 18px for the header Login/Join pills, 17px for outlined chips, 15px for the grey booking cards, 14.5px and 16.5px for small toggles, and 2px/3px for tiny tags. The stylesheet corpus is dominated by 30px (179) and 27px (160), confirming that capsule shapes are the house default for controls. Photography inside cards is clipped to the card's rounded top corners in the capture. + +## Components + +- **Header pills (button-primary / button-secondary)** — Login and Join: navy #00146e fill, white 12px/600 text, 8px 16px padding, 34px high, 18px radius. +- **Fare button (button-fare)** — "Check fares": navy fill, white 14px/600 text with -0.28px tracking, 12px 16px padding, 45px high, 100px radius; a smaller 37px variant uses 8px 16px padding. Each pill carries a right-pointing chevron in the capture. +- **Outlined chip** — "All 7" filter: #333333 12px text, 1px solid #333333 border, 17px radius, 28px high, asymmetric 4px 24.4px 4px 12px padding to leave room for a trailing icon. +- **Booking input** — white field, 58px high, navy 14px/600 value text, square corners on the input itself, sitting inside rounded pill containers in the capture. +- **Booking card** — grey #f1f1f1 card with 15px radius and 18px padding holding departure date/time selectors. +- **Shortcut tile** — white list tile, 20px radius, 152px high, icon above a 16px/600 label. +- **Navigation** — a white 65px header; nav links 14px/700 #333333. +- **Hover** — the only recorded hover is a carousel dot filling from white to #333333. + +## Design System Architecture + +ANA's group site publishes its brand values — "Anshin, Attaka, Akaruku-genki!" (peace of mind, heartwarming, cheerful and energetic) — at https://www.ana.co.jp/group/en/about-us/brand/, but that page describes behaviour and mission, not visual specifications. No public visual design system, token package or brand guideline for the website was found on the pages opened. + +The de-facto system is visible in the shipped CSS. The root declares a small booking token set — `--color-booking-primary` (#00146e), `--color-booking-secondary` (#ccd4ea), `--color-booking-secondary-lighten` (#dde5fb) and `--booking-cell-size` (36px) — which scopes the navy/blue pair to the reservation module. Icons are served as a private icon font, `asw-icon` (`/common-layout2/css/fonts/asw-icon.ttf`), and shared layout assets live under `/common-layout2/`, indicating a common header/footer layer reused across country sites. Breakpoints in the CSS centre on 767/768px (77 and 50 declarations) and 1024/1025px, with secondary queries at 600px, 1159/1160px and 375px. Motion declarations favour 300ms and 500ms with ease-in-out. + +## Do's and Don'ts + +**Do** +- Reserve #00146e navy for actions and booking values; it is the only fill colour on measured buttons. +- Keep the page on #f1f1f1 with white #ffffff panels for modules. +- Use capsule shapes for controls (18px header pills, 100px fare pills) and 15–20px corners for cards. +- Set body copy at 14px and fine print at 12px in #333333; headings in 600 weight, not 700 or bold display sizes. +- Let photography of destinations carry colour and emotion. + +**Don't** +- Don't introduce a second accent colour for buttons; the stylesheet red #d91829 was not measured on any action. +- Don't add hard drop shadows; measured depth is tonal. +- Don't set large display headlines — the largest measured heading is 28px. +- Don't document the cookie/consent modal (`ensModalWrapper`, hidden during measurement) as brand UI. +- Don't replace Myriad Pro's fallback stack with a geometric sans; the stack is humanist throughout. + +## Responsive Behavior + +Measured on the mobile pass (content between x=12–16 and x=374–376): + +- The section heading "Information from ANA" drops from 28px / 36.4px on desktop to 20px / 28px on mobile. +- The primary CTA detected on mobile is the "Check fares" pill: 14px / 600, 12px 16px padding, 45px high, 100px radius — identical to desktop. +- The notice strip measures 174px high on mobile (158px on desktop); the header measures 112px. +- The grey content band runs 7,359px on mobile against 4,677px on desktop; the extractor recorded at most two columns in it on mobile versus six on desktop, and nine maximum card columns on mobile versus 17 on desktop. +- The most-read mobile font size is still 14px; 12px, 16px, 20px and 18px follow. + +The CSS declares breakpoints at 767px/768px and 1024px/1025px. Navigation behaviour on mobile (menu toggle) was not measured: the extractor recorded no visible menu toggle. + +## Iteration Guide + +1. Start from `canvas` #f1f1f1 and white panels; add the #ccd4ea strip only for notices or booking context. +2. Build every action as a navy capsule: `button-primary` for compact header actions, `button-fare` for content CTAs. +3. Typeset with the full Myriad Pro stack; use `heading` 28px for section titles, `subheading` 24px for card titles, `body-md` 14px for copy. +4. Use 20px radius on tiles and 15px on grey booking cards. +5. When adding a new colour, check `web/data/extracted/ana.json` first; the stylesheet corpus contains more hues (#d91829, #012f64, #c52431) whose rendered roles have not been measured. +6. Re-run the extractor before changing any value; this page rotates its carousel and notices. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ananda-development/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ananda-development/DESIGN.md new file mode 100644 index 0000000..1fd9ba8 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ananda-development/DESIGN.md @@ -0,0 +1,160 @@ +--- +version: alpha +name: Ananda Development +category: "Thai Brands" +description: "Ananda Development English home page: cobalt blue #0032c8 pills and #0032c6 header, white canvas, Kanit and DB Helvethaica X Thai type, 8px cards, 20px See more button and per-project pastel card colors." +colors: + canvas: "#ffffff" + ink: "#000000" + primary: "#0032c8" + on-primary: "#ffffff" + surface-lavender: "#e0e7fc" + surface-footer: "#202020" + ink-placeholder: "#9b9b9b" + brand-blue-header: "#0032c6" + ink-grey: "#666666" + ink-blue-light: "#87a2f3" + text-input-bg: "#003dff" + card-blue-tint: "#cfdcff" +typography: + display: + fontFamily: kanit_medium + fontSize: 26px + fontWeight: 400 + display-mobile: + fontFamily: kanit_medium + fontSize: 24px + fontWeight: 400 + body: + fontFamily: kanit_light + fontSize: 19px + fontWeight: 400 + lineHeight: 42px + button: + fontFamily: kanit_medium + fontSize: 18px + fontWeight: 400 + nav: + fontFamily: db_helvethaica_xregular + fontSize: 16px + fontWeight: 400 +rounded: + xs: 5px + sm: 6px + md: 7px + lg: 8px + xl: 15px + 2xl: 20px + 3xl: 100px + pill: 9999px +spacing: + s1: 3px + s2: 4px + s3: 5px + s4: 6px + s5: 10px + s6: 12px + s7: 15px + s8: 18px + s9: 19px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.2xl}" + padding: 4px 19px + height: 35px + nav: + backgroundColor: "{colors.brand-blue-header}" + textColor: "{colors.canvas}" + text-input: + backgroundColor: "{colors.text-input-bg}" + textColor: "{colors.canvas}" + typography: "{typography.body}" + rounded: "{rounded.lg}" + padding: 21px 15px + height: 70px + borderColor: "{colors.text-input-bg}" + boxShadow: rgb(255, 255, 255) 0px 0px 0px 0px + card: + backgroundColor: "{colors.card-blue-tint}" + textColor: "{colors.brand-blue-header}" + rounded: "{rounded.lg}" + transform: matrix(1, 0, 0, 1, 0, 0) + footer: + backgroundColor: "{colors.surface-footer}" + textColor: "{colors.canvas}" +--- + +# Ananda Development + +## Overview +The measured page is the English home page of Ananda Development, a Thai residential developer, at ananda.co.th/en/home (title "Condos near BTS, Houses & Townhomes | Ananda Development"). It is a real-estate marketplace home page in a saturated cobalt blue: a blue header bar (75px tall) with the white winged ANANDA wordmark, three uppercase links (CONDOMINIUM, HOUSE, TOWNHOME), an "ENG" language selector, a search icon and a menu icon; a full-width promotional banner for the "Ananda Max Deal" campaign in vivid blue, magenta, green and yellow with Thai headlines; a "Search by Residential Projects" block with three blue tab buttons and a large blue search bar; quick-filter chips ("Condos Ready to Move", "Condos Near BTS/MRT", "Luxury Condo", "City view condo", "House for sale", "Townhome"); a "Recommended Projects" carousel of project cards; a "See more" pill; and a "Recommended Promotion" band on a pale lavender background. + +Floating elements in the capture, a LINE official-account promo graphic at the left and a round winged chat button at the right, are third-party and promotional widgets and are not documented as brand UI. + +## Colors +- **canvas** `#ffffff`: the dominant background (9819 area weight). +- **ink** `#000000`: headings and body text on white (803 characters); **ink-placeholder** `#9b9b9b` (1038 characters, the most-used text color, used for muted secondary copy) and **ink-grey** `#666666` (104). +- **primary** `#0032c8`: Ananda cobalt blue; the fill of the "See more" pills. **on-primary** `#ffffff`. +- **brand-blue-header** `#0032c6`: the header bar fill and the blue text on project cards (109 characters); an adjacent measured background is `#0c27c5` (688 area weight), and the search bar and field use **text-input-bg** `#003dff`. +- **surface-lavender** `#e0e7fc`: the pale periwinkle behind "Recommended Promotion" (1566 area weight); `#edf1fb` and `#e3f9fc` are lighter blue tints (383 and 473). +- **card-blue-tint** `#cfdcff`: the project card color for one project; the other projects use `#e3d3c4` (beige) and `#fffccb` (pale yellow), and the capture also shows aqua card bodies, so the card color follows each project's own palette. +- **surface-footer** `#202020`: the dark footer fill (1492 area weight). +- **ink-blue-light** `#87a2f3`: a light blue text color (71 characters). +- `#0b6b60`: a deep teal (344 area weight), measured on the green promotion tile. +`#0000ee` appeared as a link color; it is the browser default and is not a brand color. + +## Typography +Thai-capable families: Kanit (loaded as kanit_light 300, kanit_regular, kanit_medium 500) for headings, buttons and body, and DB Helvethaica X (regular, medium and bold) for navigation and many labels. +- **display** kanit_medium 26px / 400 ("Search by Residential Projects"); on the 390px pass the h2 "Recommended Projects" measures kanit_medium 24px (**display-mobile**). +- **body** kanit_light 19px / 400 / 42px (the search placeholder "Serach for project", as spelled on the site). +- **button** kanit_medium 18px / 400. +- **nav** db_helvethaica_xregular 16px / 400; the header text measures kanit_regular 14px / 400 / 40px, uppercase. +By characters: db_helvethaica_xregular 1298, kanit_regular 1008, kanit_medium 283, kanit_light 226. Sizes: 20px (1433), 17px (525), 16px (169), 15px (162), 18px (153), 19px (106), 24px (86), 23px (61), 17.1px (51). Prices in the cards are set larger than their labels ("Starting price 4.19 MB"). + +## Layout +Measured at 1280px wide; the header is 75px high. The h1 block is 500px wide and the "Recommended Projects" heading band 1166px wide with 15px vertical padding. The search bar is 860px wide by 70px high. Project cards are 375px by 630px in a three-up carousel with a blue progress line beneath; promotion cards sit three across on the lavender band. Spacing tokens come from measured paddings and gaps: 3, 4, 5, 6, 10, 12, 15, 18, 19, 20px; the "See more" pill uses 4px 19px padding. + +## Elevation & Depth +Soft shadows are used on the quick-filter chips and cards: `0 0 5px 0 rgba(0,0,0,.75)`, `0 2px 5px 0 rgba(0,0,0,0.4)` and `0 2px 10px rgba(0,0,0,.3)`; a white glow `0 0 1em #fff` is also measured. Depth otherwise comes from stacked flat color blocks. + +## Shapes +Measured radii: 8px (16 uses), 6px (15), 5px (13), 8px on top corners only (9, project card images), 50% (4), 20px (4), 8px on bottom corners only (3), 100px (2), 15px and 7px. The "See more" button is 20px (rounded 2xl) at 35px high; a secondary "See more" measured 15px at 31px; the search input is 8px; the project cards are 8px. + +## Components +- **button-primary**: `#0032c8` fill, white text, kanit_medium 18px, radius 20px, padding 4px 19px, height 35px ("See more"). +- **text-input**: `#003dff` fill with a 1px same-color border, white 19px text, radius 8px, padding 21px 15px, height 70px, a magnifier icon at the left. +- **nav**: `#0032c6` bar with white uppercase links. +- **card**: project card with photograph, a black "READY TO MOVE IN" tag over the photo's lower edge, an outlined "CONDOMINIUM" tag, "Starting price" figure in MB (million baht), then icon lines for distance to BTS stations and perks ("Fully Furnished*", "Free Furniture*", "Last Unit"). +- **filter chip**: white pill-like button with a soft shadow. +- **footer**: `#202020` with white text. + +## Design System Architecture +No public design system or brand guideline was found: the home page markup contains no brand, press or design link. Root variables expose only the Swiper carousel (`--swiper-theme-color` `#007aff`, `--swiper-navigation-size` 44px), a third-party default and not a brand color. The de-facto system is a cobalt blue chrome with campaign-colored promotional artwork and per-project card colors. + +## Do's and Don'ts +- Do use cobalt blue `#0032c8` and `#0032c6` for chrome, tabs, search and pills; white for text on them. +- Do let each project card carry its own pastel color while keeping blue text. +- Do state price as "Starting price N MB" with the number larger than the label. +- Do set uppercase Kanit for the primary navigation. +- Don't use Swiper's default blue or the browser link blue. +- Don't document floating LINE or chat widgets as components. + +## Responsive Behavior +Measured at 390px: the "Recommended Projects" heading is kanit_medium 24px (box 390px wide by 65px high), the search placeholder is kanit_light 15px / 400 / 42px, and the detected primary control is the "CONDOMINIUM" tab, `#0d2ac3` fill with white kanit_light 15px text, radius 6px, padding 10px 10px 5px, 118px by 68px. Column counts and menu behavior were not measured. + +## Iteration Guide +1. Use white canvas, cobalt blue chrome and black ink. +2. Build project cards at 8px radius with a pastel body, price figure and icon lines. +3. Use pill buttons (20px) for "See more" and 8px radius for inputs. +4. Keep the footer `#202020`. +5. Verify new values against `web/data/extracted/ananda-development.json`. + +## Imagery and Voice +Imagery is architectural renderings of towers beside BTS trains and skylines, set against loud campaign art: collage banners with Thai display lettering, neon green, magenta and yellow blocks, and illustrated characters. The campaign copy is Thai ("ยกขบวน โปรเต็มMAX!"), while the English interface copy is plain and functional: "Search by Residential Projects", "Recommended Projects", "Recommended Promotion", "READY TO MOVE IN", "350 meters from Phra Khanong BTS station", "Fully Furnished*". Prices are in MB with two decimals (4.19, 9.90, 3.99). + +## Page Sequence +The capture runs in this order: header, a campaign hero in the full page width, the project search block, the recommended projects carousel with each project's logo and name above its card (for example Ideo Sukhumvit-Rama 4, Ashton Silom, Ideo Mobi Sukhumvit Eastpoint), a "See more" pill centered under a blue progress rule, and a lavender band with three promotion cards whose captions sit on solid blue or green panels with white text ("Ananda Max Deal", "Ananda Housing - Max Deal", "RIGHT PRICE RIGHT NOW"). Project names above the cards are set in blue and aligned to alternating sides. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/anantara/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/anantara/DESIGN.md new file mode 100644 index 0000000..73dbc14 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/anantara/DESIGN.md @@ -0,0 +1,174 @@ +--- +version: alpha +name: Anantara Hotels & Resorts +category: "Thai Brands" +description: "Anantara Hotels & Resorts: warm sand canvas #f9f5f3, taupe accent #a48e82, charcoal text #4a4a4a, Raleway ultra-light 100-weight display at 50px with Oswald letterspaced uppercase buttons, 2px corners, luxury resort portfolio." +colors: + canvas: "#f9f5f3" + ink: "#4a4a4a" + primary: "#a48e82" + on-primary: "#ffffff" + surface-sand: "#ede8e6" + ink-muted: "#999999" + on-dark-soft: "#ffffffe6" + hairline: "#707070" +typography: + display: + fontFamily: Raleway, Helvetica, Arial, sans-serif + fontSize: 50px + fontWeight: 100 + lineHeight: 62.5px + letterSpacing: 1px + subheading: + fontFamily: Oswald, "Arial Narrow", sans-serif + fontSize: 12px + fontWeight: 400 + lineHeight: 18px + letterSpacing: 3px + textTransform: uppercase + body: + fontFamily: Raleway, Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 400 + button: + fontFamily: Oswald, "Arial Narrow", sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + letterSpacing: 4.2px + textTransform: uppercase + nav: + fontFamily: Raleway, Helvetica, Arial, sans-serif + fontSize: 11.2px + fontWeight: 700 + lineHeight: 16.8px + textTransform: uppercase + input: + fontFamily: Raleway, Helvetica, Arial, sans-serif + fontSize: 14px + fontWeight: 300 + lineHeight: 24px + letterSpacing: 0.7px +rounded: + xs: 2px + sm: 4px + pill: 9999px +spacing: + s1: 3px + s2: 5px + s3: 9px + s4: 10px + s5: 12px + s6: 15px + s7: 16px + s8: 20px + s9: 21px + s10: 25px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 9px 20px + height: 60px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 9px 20px + height: 39px + link: + textColor: "{colors.on-primary}" + typography: "{typography.nav}" + padding: 3px + nav: + textColor: "{colors.on-primary}" + nav-link: + textColor: "{colors.on-primary}" + typography: "{typography.nav}" + padding: 3px + text-input: + textColor: "{colors.on-primary}" + typography: "{typography.input}" + padding: 10px + height: 50px + borderColor: "{colors.hairline}" + footer: + backgroundColor: "{colors.ink}" + textColor: "{colors.on-primary}" +--- + +## Overview + +Anantara's English home page (anantara.com/en) is a destination directory for a worldwide hotel and resort collection. The measured page is 1280px wide and 5662px tall. The first screen is a full-bleed photographic hero under a dark header strip that carries a row of language links (Thai, Simplified Chinese, Japanese, Arabic, German, Spanish, French, Italian, Hebrew, Korean, Dutch, Portuguese, Russian, Vietnamese), a centered logo, "My Booking", "Log in", "Sign up", a "Book now" button and a menu row. Below it a sand-colored panel headed "Begin your journey in..." lists every country, city and property in four columns. The remainder alternates full-bleed photography (sunset over a river lodge, a Maldives sailing scene, a Vespa in Italy, manta rays) with sand-colored text bands, and ends in a charcoal footer. + +The character is calm and unhurried: very light display type, wide letter-spacing on small uppercase labels, muted taupe as the only accent, and photography doing most of the emotional work. The capture also shows a cookie-consent dialog over the hero. That dialog is a third-party consent layer and is not documented here as brand UI; the tokens in this file come from the page behind it (the extractor reports the canvas confirmed against capture pixels). + +## Colors + +The palette is small and warm. `canvas` is {colors.canvas} (#f9f5f3), the sand background that carries about 8900 units of measured area weight, the largest of any background. `surface-sand` ({colors.surface-sand}, #ede8e6) is a slightly deeper sand used for secondary bands. `ink` ({colors.ink}, #4a4a4a) is the most-read text color on the page, and the same value is the footer background. `primary` ({colors.primary}, #a48e82) is a taupe that fills the "View all hotels and resorts" button, the country labels in the destination list and the large "Begin your journey in..." heading. `on-primary` is white. `ink-muted` is #999999 for quiet captions, `on-dark-soft` is a 90% white (#ffffffe6) used for text over photography, and `hairline` is #707070, the border color of the text input. + +Other measured values are present in the page CSS but not promoted to tokens: the stylesheet declares `--textLinkColor: #a48e82` (the same taupe), `--button-default-hover-bg-color: #7f8288` for button hover, and per-property accent variables such as `--mn_naladhu_color`. A black (#000000) and a translucent charcoal (#323232f2) appear as backgrounds; the latter belongs to the consent dialog. + +## Typography + +Two families are loaded: Raleway (weights 100, 300, 600, 700 reported by the font loader) and Oswald 400. Raleway carries 4994 measured characters and Oswald 338. + +- `display`: Raleway 100 at 50px with 62.5px line height and 1px letter spacing, in taupe. On this page it is the "Begin your journey in..." heading (the extractor took the largest hero text, an h2, because the page has no visible h1). +- `subheading`: Oswald 400, 12px, 18px line height, 3px tracking, uppercase, charcoal ("ANANTARA SIGNATURE EXPERIENCES"). +- `body`: Raleway 400 at 16px. +- `button`: Oswald 400, 14px, 21px line height, 4.2px letter spacing, uppercase. +- `nav`: Raleway 700, 11.2px, 16.8px line height, uppercase. +- `input`: Raleway 300, 14px, 24px line height, 0.7px tracking. + +Raleway and Oswald are both open-source families, so no substitute is needed. The generic fallbacks measured in the stack are Helvetica, Arial and "Arial Narrow". + +## Layout + +The page is a single 1280px-wide column of full-width bands. The destination panel is a four-column list; the extractor measured a maximum of 5 card columns on desktop. Spacing values measured on the page are small and irregular (3, 5, 9, 10, 12, 15, 16, 20, 21 and 25px); there is no single base unit. Photography bands run edge to edge, with centered white text and a single button laid over the image. The signature-experience grid is a two-by-two mosaic of full-bleed photos, and a social grid of nine square photos follows. + +## Elevation & Depth + +Depth is almost entirely photographic. The page CSS contains a few shadows: `0 -1px 0 transparent, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24)` (11 uses), `0 15px 19px 1px rgba(0,0,0,.15)` (5 uses), and Bootstrap-style inset shadows (`inset 0 1px 1px rgba(0,0,0,0.075)`, 8 uses). Most elements (31 declarations) use no shadow. Surfaces are separated by flat color changes between sand, deeper sand and charcoal. + +## Shapes + +Corners are nearly square. The primary button uses {rounded.xs} (2px). The CSS corpus also contains 4px (49 uses, the most common), 3px, 6px, 10px and 80px radii, and the token set keeps `sm` at 4px and `pill` at 9999px. Hairline borders in the input use 1px solid #707070. Images are rectangular and edge to edge. + +## Components + +- `button-primary`: taupe fill {colors.primary}, white text, Oswald uppercase with 4.2px tracking, 2px radius, padding 9px 20px, 60px tall (measured on "View all hotels and resorts"). +- `button-secondary`: same fill and type, 39px tall, 2px radius. +- `text-input`: 50px tall, 10px padding, 1px #707070 border, Raleway 300 at 14px. +- `nav-link` / `link`: Raleway 700, 11.2px uppercase, white on the dark header strip. +- `footer`: charcoal {colors.ink} background with white text. + +The other visible patterns are the destination list (a taupe uppercase country label, a bold city line and indented property links with a chevron), the 10/10 Exclusives promotion with left and right arrows and pagination dots, and the "Minor DISCOVERY" loyalty band. These are described qualitatively; no per-element sizes were measured for them. + +## Design System Architecture + +No public design system or brand-guidelines page was found linked from the home page that was opened, so this file describes the de-facto system. The page ships its own CSS with named custom properties: `--button-default-bgcolor`, `--button-default-textcolor`, `--button-default-hover-bg-color`, `--button-revert-*` (an outline variant that is transparent with a taupe border) and `--button-text-size: 12px`, plus `--textColor`, `--titleColor`, `--textLinkColor` and `--white`. The root also declares property-level brand colors such as `--mn_navy`, `--an`, `--av`, `--nc`, `--nh`, `--oaks` and `--ti`, which indicates that the shared stylesheet serves multiple brands of the same group; only the taupe and charcoal values are measured on this home page. Breakpoints in the CSS corpus include min-width 1025px, max-width 1024px, max-width 766px and min-width 767px. + +## Do's and Don'ts + +- Do use the light Raleway 100 weight only for large display headings; the measured size is 50px. +- Do set buttons and small labels in Oswald uppercase with wide tracking (3px to 4.2px). +- Do keep corners at 2px on buttons. +- Do let photography carry sections and keep text over images white. +- Don't introduce a second accent next to taupe #a48e82 on the home page. +- Don't use heavy shadows; the page relies on flat sand and charcoal surfaces. +- Don't treat the consent dialog, language strip or scrim as part of the brand component set. + +## Responsive Behavior + +Not measured. The extractor's 390px mobile pass returned an access-denied page ("Sorry, you have been blocked") rather than the real home page, so no mobile typography, navigation or layout values are recorded for the page. The only responsive evidence is the list of media-query breakpoints found in the desktop CSS (1025px, 1024px, 766px, 767px, 768px); what changes at each breakpoint was not measured. + +## Iteration Guide + +1. Start from the sand canvas {colors.canvas} and charcoal ink {colors.ink}; add taupe {colors.primary} only for buttons, labels and the one large heading. +2. Copy the button exactly: Oswald 14px, 4.2px tracking, uppercase, 2px radius, 9px 20px padding. +3. Set display headings in Raleway 100 at 50px / 62.5px with 1px tracking. +4. Re-measure on the mobile page with a non-blocked session before writing any mobile rule. +5. Run `node web/scripts/verify-designs.mjs --slug=anantara` after any token rename. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/anime-js/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/anime-js/DESIGN.md new file mode 100644 index 0000000..32aaa14 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/anime-js/DESIGN.md @@ -0,0 +1,190 @@ +--- +version: alpha +name: Anime.js +category: "Tech & AI" +description: "Anime.js: warm near-black canvas #252423, stone text #b4b1af, DIN 800 display and 64px 700 hero, uppercase Mono labels, lime #b7ff54 accent, square-cornered buttons with 1px hairline borders; a JavaScript animation engine site." +colors: + canvas: "#252423" + ink: "#b4b1af" + primary: "#2a2928" + on-primary: "#b4b1af" + accent-lime: "#b7ff54" + ink-soft: "#d5d3d1" + code-fg: "#abb2bf" + code-blue: "#61aeee" + code-green: "#98c379" + surface-input: "#353432" + hairline: "#615e5b" + nav-link-text: "#f6f4f2" +typography: + display: + fontFamily: DIN, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 40px + fontWeight: 800 + lineHeight: 38px + letterSpacing: "-0.5px" + display-mobile: + fontFamily: DIN, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 32px + fontWeight: 800 + lineHeight: 30.4px + letterSpacing: "-0.4px" + heading: + fontFamily: DIN, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 64px + fontWeight: 700 + lineHeight: 55.36px + body: + fontFamily: DIN, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 20px + fontWeight: 600 + lineHeight: 25px + button: + fontFamily: Mono, monospace + fontSize: 12px + fontWeight: 600 + lineHeight: 24px + letterSpacing: 0.12px + textTransform: uppercase + nav: + fontFamily: DIN, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 12px + fontWeight: 600 + letterSpacing: 0.12px + textTransform: uppercase + link: + fontFamily: DIN, "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 16px +rounded: + xs: 4px + sm: 12px + md: 20px + lg: 50px + none: 0px + pill: 9999px +spacing: + s1: 1px + s2: 4px + s3: 7.37px + s4: 8px + s5: 12px + s6: 14px + s7: 16px + s8: 24px + s9: 28px + s10: 32px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 0px 8px 0px 40px + height: 48px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 0px 8px 0px 40px + height: 48px + link: + textColor: "{colors.ink}" + typography: "{typography.link}" + rounded: "{rounded.none}" + nav: + textColor: "{colors.ink}" + rounded: "{rounded.none}" + padding: 0px 24px + nav-link: + textColor: "{colors.nav-link-text}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + text-input: + backgroundColor: "{colors.surface-input}" + textColor: "{colors.nav-link-text}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 12px + height: 44px + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.hairline}" + rounded: "{rounded.none}" + padding: 0px 24px 24px +--- + +## Overview + +animejs.com is the home page of Anime.js, a JavaScript animation library, and it presents the product the way a toolmaker would: a dark, warm-gray page with an all-caps monospace header (Docs, Easings, Learn, Examples, GitHub, Discord, Sponsor, plus a version switcher listing 4.0.0, 3.2.2 and 2.1.0), a hero reading "All-in-one animation engine." and "A fast and flexible JavaScript library to animate the web.", an `npm i animejs` install line with a "Learn more" button, a "Sponsored by" strip, and feature sections titled "The complete animator's toolbox", "Intuitive API", "Per property parameters", "Flexible keyframes system", "Built-in easings" and "Enhanced transforms". The measured page is 1280px wide and 18842px tall. + +The page is a live demo of its own library: sections are animated demonstrations rather than screenshots. The stored full-page capture for this site is almost entirely black, so it shows only a preloader arc; every value in this file comes from the DOM measurement instead of the image, and nothing here is read off the capture. + +## Colors + +The page is built on a stepped warm-gray scale. `canvas` is {colors.canvas} (#252423), the dominant background (measured area weight 706). `primary` ({colors.primary}, #2a2928) is the fill of the main button, a hair lighter than the canvas. `surface-input` is #353432, the fill of text inputs. `ink` is #b4b1af, the most-read text color, and `ink-soft` is #d5d3d1 for body paragraphs. `nav-link-text` is #f6f4f2, near white, used for navigation links and the hero heading. `hairline` is #615e5b, the border color of buttons and inputs. On hover the measured "LEARN" link goes from #b4b1af to #f6f4f2, and the "LEARN MORE" button text goes from #93908d to #b4b1af with its border from #615e5b to #93908d. + +The single saturated brand accent is `accent-lime` ({colors.accent-lime}, #b7ff54). Code samples use a separate syntax palette that appears in the measured text colors: `code-fg` #abb2bf, `code-blue` #61aeee, `code-green` #98c379. The stylesheet declares a large `--hex-*` custom-property scale (lime, turquoise, cyan, sky, king blue, indigo, purple, magenta, pink, red, corail, orange, yellow, citrus, green, each with steps 1 to 8, plus bg, fg, black and white grays) so demos and syntax highlighting can pick tinted dark backgrounds; the h1 text itself is #302e2d, a color a single step above the canvas, so the large "The complete animator's toolbox" heading reads as a ghosted watermark rather than as high-contrast type. + +## Typography + +Two faces are loaded: "DIN" (variable, weight range 100 to 900, with an oblique axis) and "Mono". All display and body copy is DIN with Helvetica Neue, Helvetica and Arial as fallbacks; all labels and buttons are Mono. + +- `display`: DIN 800, 40px, 38px line height, -0.5px tracking (the "complete animator's toolbox" heading). +- `heading`: DIN 700, 64px, 55.36px line height (the hero "All-in-one animation engine."). +- `body`: DIN 600, 20px, 25px line height. +- `link`: DIN 400, 16px. +- `button` and `nav`: 12px, weight 600, 0.12px tracking, uppercase; buttons use Mono with a 24px line height, nav links use DIN. + +Headings are set with line height below the font size (38px on 40px, 55.36px on 64px), a tight, poster-like setting. The `--text-*` scale in the stylesheet runs .75rem (xxxs), 1rem (s), 1.25rem (l), 1.5rem (xl), 2rem (xxl), 2.5rem (xxxxl). "DIN" and "Mono" are the site's own loaded files; they are not substituted here. + +## Layout + +The page is a long single scroll with a fixed-width docs-style grid of 12-rem demo tiles (`--docs-demo-height: 12rem`, `--docs-sidebar-width: 14rem` for the documentation area). The stylesheet also declares a rem margin scale starting at .25rem (`--margin-xxxs`), 1rem (`--margin-s`) and 3rem (`--margin-xxl`). Spacing values measured on the page are 1, 4, 7.37, 8, 12, 14, 16, 24, 28 and 32px. The nav strip is 71px tall with 24px horizontal padding. + +## Elevation & Depth + +There is almost no elevation. The measured shadows are `none` (2 uses) and 1px ring shadows in solid colors (`0 0 0 1px #ff0`, `red`, `green`, `#ff320080`) that belong to demo elements, not to the interface. `--shadowColor` is #212121 in the root. Depth is created with tint steps of the warm gray and with the animated demos themselves. + +## Shapes + +The generated tokens keep `none` (0px) for buttons, nav and footer, 4px (`xs`) for inputs, and also 12px, 20px, 50px and 9999px values that come from the page's CSS. The CSS corpus lists radii 0px (4 uses), 10px, 50px, 20px, 3px and 16px, one use each. The stylesheet defines `--br-xs: .125rem`. The measured hover capture records the "LEARN MORE" button with a 4px radius while the main-button token is 0px; both values are as measured and the difference is not resolved here. + +## Components + +- `button-primary` / `button-secondary`: {colors.primary} fill, {colors.ink} Mono text 12px uppercase, 48px tall, padding 0px 8px 0px 40px, 1px #615e5b border in the hover capture. +- `nav-link`: DIN 600 12px uppercase in {colors.nav-link-text}, nav padding 0px 24px. +- `text-input`: {colors.surface-input} fill, Mono 12px, 4px radius, 12px padding, 44px tall. +- `link`: DIN 16px in {colors.ink}. +- `footer`: canvas background, hairline-gray text, padding 0px 24px 24px. + +I removed the generated `card` token, because it paired the lime fill with identical lime text and a pill radius and was taken from an animated demo element mid-transform. + +## Design System Architecture + +Anime.js publishes documentation at animejs.com/documentation and a GitHub link appears in the header, but no separate design-system or brand-guidelines page was opened, so this file describes the de-facto system from the shipped CSS: custom properties for colors (`--hex--`), type (`--text-xxxs` to `--text-xxxxl`, `--font-body`), spacing (`--margin-*`) and radius (`--br-xs`). Source: the shipped page at [animejs.com](https://animejs.com/) (the stylesheet and inline script were read from the home page itself). The page exposes its asset locations in an inline `window.paths` object (demos, easings JSON, sponsor lists). + +The practical consequence for a reproduction is that the system is a token ladder rather than a component kit: every gray, tint and size is a named custom property, and the interface chrome (header, buttons, inputs, footer) uses only a handful of them. Anything that needs a hue beyond lime, for example a chart or a demo tile, should be pulled from the same `--hex-*` scale at its darker steps (6 to 8) when it needs to sit on the canvas, and at its lighter steps (1 to 3) when it is a foreground mark. Those scale steps are published in the page's root and can be cited from it; no usage rule for them was found, so none is stated here. + +## Do's and Don'ts + +- Do keep the near-black warm-gray canvas and use lime only as the single accent. +- Do set labels and buttons in uppercase Mono at 12px. +- Do use DIN at heavy weights (700 to 800) with line height tighter than the font size for large headings. +- Don't add a second saturated accent next to lime; the tinted `--hex-*` steps are for demos and code. +- Don't use rounded pill buttons; buttons are square. +- Don't rely on the stored capture for design values; it is black. + +## Responsive Behavior + +Measured at 390px: the display heading drops from 40px to 32px (line height 30.4px, -0.4px tracking), and the hero heading from 64px to 40px (34.6px line height). Navigation, layout columns and spacing at mobile width were not measured; the extractor recorded no mobile layout block for this page. + +## Iteration Guide + +1. Start from canvas #252423 and ink #b4b1af; use #f6f4f2 for emphasis. +2. Use lime #b7ff54 once per view. +3. Type: DIN 800 40px/38px for section titles, DIN 700 64px for the hero, Mono 12px uppercase for controls. +4. Use 1px #615e5b outlines on controls and lighten them to #93908d on hover. +5. Re-run `node web/scripts/verify-designs.mjs --slug=anime-js` after renames. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ant-group/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ant-group/DESIGN.md new file mode 100644 index 0000000..3773691 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ant-group/DESIGN.md @@ -0,0 +1,147 @@ +--- +version: alpha +name: Ant Group +category: "Banking & Insurance" +description: "Ant Group (蚂蚁集团) corporate site: white canvas, #666666 body text, #333333 headings, Ant blue #1677ff for the active tab, deep navy #0c1f3a footer, AlibabaPuHuiTi display at 48px, full-bleed photography, 24px-radius ghost buttons." +colors: + canvas: "#ffffff" + ink: "#666666" + primary: "#1677ff" + surface-soft: "#f7f8fa" + surface-navy: "#0c1f3a" + on-dark-72: "#ffffffa6" + on-dark-64: "#ffffffa3" + ink-strong: "#333333" + ink-muted: "#999999" +typography: + display: + fontFamily: AlibabaPuHuiTiRegular + fontSize: 48px + fontWeight: 600 + display-mobile: + fontFamily: AlibabaPuHuiTiRegular + fontSize: 22px + fontWeight: 500 + heading: + fontFamily: AlibabaPuHuiTiRegular + fontSize: 28px + fontWeight: 500 + lineHeight: 46px + subheading: + fontFamily: AlibabaPuHuiTiRegular + fontSize: 20px + fontWeight: 500 + lineHeight: 28px + body: + fontFamily: "-apple-system, blinkmacsystemfont, \"Helvetica Neue\", helvetica, \"segoe ui\", arial, roboto, \"PingFang SC\", miui, \"Hiragino Sans GB\", \"Microsoft Yahei\", sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + link: + fontFamily: "-apple-system, blinkmacsystemfont, \"Helvetica Neue\", helvetica, \"segoe ui\", arial, roboto, \"PingFang SC\", miui, \"Hiragino Sans GB\", \"Microsoft Yahei\", sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 28.287px +rounded: + xs: 4px + sm: 5px + md: 8px + lg: 24px +spacing: + s1: 28px + s2: 30px + s3: 48px + s4: 80px + s5: 100px + s6: 130px +components: + button-secondary: + textColor: "{colors.canvas}" + typography: "{typography.link}" + rounded: "{rounded.lg}" + height: 48px + borderColor: "{colors.canvas}" + link: + textColor: "{colors.canvas}" + typography: "{typography.link}" + rounded: "{rounded.lg}" + borderColor: "{colors.canvas}" + footer: + backgroundColor: "{colors.surface-navy}" + textColor: "{colors.canvas}" + padding: 130px 0px 40px +--- + +## Overview + +The measured page is antgroup.com, the Simplified Chinese home of Ant Group (蚂蚁集团), 1280px wide and 8026px tall. The document language is zh. The first screen is a full-bleed photograph (snow mountains under blue sky) carrying the white headline of a sustainability report with a ghost "了解更多" button, a pagination dot pair, and a transparent header (logo at left; 关于我们, 业务发展, 科技创新, ESG, 最新动态, 加入我们 and a language switcher showing 简). Below the hero is a white sub-navigation strip (最新动态, 使命和愿景, 公司简介, 公司历程, 加入我们) whose active item is blue, then a "最新动态" news section laid out as a five-card photographic mosaic with white titles over a bottom gradient, then a "我们的使命" / "我们的愿景" panel over a grayscale photo collage, and a dark navy footer. + +The tone is institutional and warm: documentary photography of people (fishermen, volunteers, office staff), a calm hierarchy and little decoration. The mission line is "让天下没有难做的生意" and the vision text speaks of building digital infrastructure for future services. + +## Colors + +`canvas` is {colors.canvas} (#ffffff). `ink` ({colors.ink}, #666666) is the most-read body color; `ink-strong` is #333333 for headings and hovered navigation; `ink-muted` is #999999. `primary` ({colors.primary}, #1677ff) is Ant's blue and is measured on the active sub-navigation tab (low text weight: 4 characters), not on a filled button; the stylesheet also declares it as `--adm-color-primary` and as the wave shadow color. `surface-soft` is #f7f8fa, a pale gray band, and `surface-navy` ({colors.surface-navy}, #0c1f3a) is the footer. Text on dark and on photography uses two translucent whites, `on-dark-72` (#ffffffa6) and `on-dark-64` (#ffffffa3). A translucent dark (#050a1a33) and a white at 80% (#ffffffcc) are present as backgrounds in the mission panel and header. + +The root custom properties come from the Ant Design Mobile token set (`--adm-*`): danger #ff3141, success #00b578, warning #ff8f1f, border #eeeeee, box #f5f5f5, and so on. Those status colors are declared by the library on this page; no status UI was seen in the capture, so they are not promoted to tokens. + +## Typography + +The only loaded webfont is AlibabaPuHuiTiRegular (400), used for every heading. Body and nav text fall back to the system stack `-apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, "segoe ui", arial, roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif`, which carries the most measured characters. Sizes by use: + +- `display`: AlibabaPuHuiTi 600 at 48px (the hero headline, in white). +- `heading`: 500 at 28px with 46px line height ("我们的使命"). +- `subheading`: 500 at 20px with 28px line height (white news-card titles). +- `body`: system stack 400 at 16px with 24px line height. +- `link`: 400 at 18px with 28.287px line height (the ghost button label). + +The page's character-weighted size distribution is 12px (224), 18px (209), 16px (151), 20px (126), 48px, 28px and 36px. The loaded family is AlibabaPuHuiTiRegular as named in the font loader; if it is unavailable, the fallback chain already declared on the page (PingFang SC, Hiragino Sans GB, Microsoft Yahei) is the measured substitute order. + +## Layout + +The content column in the capture is a centered block with roughly equal outer gutters, holding a mosaic of five cards in two rows (a wide card and a narrow card above, three equal cards below). Measured spacing values are 28, 30, 48, 80, 100 and 130px, which describe section gaps rather than a small base grid: the footer has padding 130px 0px 40px. Photography fills the hero edge to edge and the mission panel sits on a full-width grayscale collage. + +## Elevation & Depth + +Shadows on this page are soft and cool: `0 2px 12px rgba(216,218,224,.5)` (89 uses, the most common) gives the news cards and sub-nav strip their lift; a layered `0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05)` appears 13 times (the Ant Design popover shadow); focus rings are `0 0 0 2px rgba(22,119,255,.2)` and, for error, `0 0 0 2px rgba(255,77,79,.2)`. 69 declarations use no shadow. News cards darken toward the bottom with a gradient so white titles stay legible. + +## Shapes + +The measured radii are 5px (361 uses), 2px (219), 8px (100), 4px (77), 100px (26), 32px (7) and 1px (6). The token set keeps 4, 5, 8 and 24px. Photo cards use the mid radii, the ghost "了解更多" pill uses {rounded.lg} (24px) and the mission panel is a rounded white card over the collage. + +## Components + +- `button-secondary`: a ghost pill, 48px tall, 24px radius, white 1px border and white {typography.link} text on the hero photograph. No filled primary button was detected on the page, so no `button-primary` is declared. +- `link`: white 18px text with a white border and 24px radius where it is used as the same pill. +- Header navigation: transparent over the hero, white text; the measured hover state changes link color from #ffffff to #333333 (the header becomes white on hover). +- Sub-navigation strip: white bar, active label in {colors.primary}. +- `footer`: {colors.surface-navy} background, white text, padding 130px 0px 40px. + +The generated `nav` typography was 0px/0px and was dropped as an extraction artifact, along with the `nav` and `nav-link` components that referenced it. + +## Design System Architecture + +No public brand-guideline page was opened for Ant Group itself. The home page at [antgroup.com](https://www.antgroup.com/) ships the Ant Design Mobile variable set (`--adm-color-primary`, `--adm-radius-s/m/l` of 4, 8 and 12px, `--adm-font-size-1` to `10` from 9px to 18px, `--adm-color-text` #333333, `--adm-color-text-secondary` #666666, `--adm-color-weak` #999999, `--adm-color-border` #eeeeee) and its CSS bundle is served from alipayobjects.com. The page's actual body and heading colors (#666666, #333333, #999999) match those variables, so the corporate site is measured using values from that token set. Page-level styling (hero, mosaic, panel) is bespoke. + +The consequence is a two-layer system: library tokens decide the neutrals, text grays, borders and radii; the page layer adds the navy footer, the photographic hero and the translucent white overlays. A new page in this style should take its text and border colors from the library layer first and introduce the navy only for the footer. + +## Do's and Don'ts + +- Do use full-bleed documentary photography with white text on a bottom gradient. +- Do keep blue {colors.primary} for the active state of navigation and links, in small quantities. +- Do pair a 48px white headline with a ghost pill button on photography. +- Do use soft, cool, low-opacity shadows (`0 2px 12px rgba(216,218,224,.5)`) for card lift. +- Don't use saturated fills on large surfaces; large areas are white, pale gray or deep navy. +- Don't add status colors to marketing surfaces. +- Don't use sharp 0px corners on cards; the measured range is 2px to 8px. + +## Responsive Behavior + +Measured at 390px: the headline drops from 48px to 22px (weight 500, padding 0px 25px, in the narrow-width capture the carousel shows the headline "蚂蚁集团2025可持续发展报告"), the "我们的使命" heading is 19px at weight 600 with 29px line height, and body copy is 13px with a 20px line height in white at 80% opacity (#ffffffcc). The mobile page was measured as a full page; the extractor recorded no navigation-toggle or column-count data for mobile, so those are not measured. + +## Iteration Guide + +1. Start from the white canvas, #666666 body and #333333 headings. +2. Use AlibabaPuHuiTi (or a Chinese sans) at 48/28/20px with weights 600/500/500. +3. Build cards with 5px or 8px radii and the soft cool shadow. +4. Reserve #1677ff for the active tab; use #0c1f3a for the footer. +5. Re-run `node web/scripts/verify-designs.mjs --slug=ant-group` after renames. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ant/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ant/DESIGN.md new file mode 100644 index 0000000..fd197df --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ant/DESIGN.md @@ -0,0 +1,346 @@ +--- +version: alpha +name: "Ant Design" +category: "Frontend Frameworks" +description: "Ant Design (antd) is Alibaba's enterprise React design system: a white canvas with one brand blue #1677ff, alpha-black text (#000000e0 down to #00000040), 14px/22px base type in the system stack with AlibabaSans on the marketing site, 32px controls with 6px radius (8px on large buttons and cards), and a faint 2px offset button shadow." +colors: + canvas: "#ffffff" + ink: "#000000e0" + primary: "#1677ff" + on-primary: "#ffffff" + surface-tint: "#f5f8ff" + surface-footer: "#f0f3fa" + ink-tertiary: "#00000073" + ink-secondary: "#000000a6" + error: "#ff4d4f" + success: "#52c41a" + warning: "#faad14" + primary-tint: "#e6f4ff" + ink-disabled: "#00000040" + hairline: "#d9d9d9" + primary-hover: "#4096ff" +typography: + heading-docs: + fontFamily: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif + fontSize: 32px + fontWeight: 600 + lineHeight: 38.7368px + display: + fontFamily: AlibabaSans, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 76px + fontWeight: 900 + lineHeight: 92px + heading: + fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 16px + fontWeight: 500 + lineHeight: 24px + body: + fontFamily: AlibabaSans, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 24px + fontWeight: 400 + lineHeight: 37.7143px + button: + fontFamily: AlibabaSans, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 16px + fontWeight: 400 + lineHeight: 25.1429px + nav: + fontFamily: >- + Avenir, AlibabaSans, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color + Emoji", sans-serif + fontSize: 18px + fontWeight: 700 + lineHeight: 64px + letterSpacing: "-0.18px" + button-secondary: + fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 16px + fontWeight: 400 + lineHeight: 25.1429px + input: + fontFamily: AlibabaSans, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" + fontSize: 14px + fontWeight: 400 + lineHeight: 22px +rounded: + xs: 4px + sm: 6px + md: 8px + lg: 12px + xl: 16px + 2xl: 20px + 3xl: 32px + 4xl: 100px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 3px + s4: 4px + s5: 6px + s6: 7px + s7: 8px + s8: 11px + s9: 12px + s10: 14px +components: + button-default-size: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.input}" + rounded: "{rounded.sm}" + padding: 0px 15px + height: 32px + text-input: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.input}" + rounded: "{rounded.sm}" + borderColor: "{colors.hairline}" + height: 32px + tag: + textColor: "{colors.ink}" + rounded: "{rounded.xs}" + padding: 0px 8px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.md}" + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 0px 15px + height: 40px + boxShadow: rgba(5, 145, 255, 0.1) 0px 2px 0px 0px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-default: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 0px 15px + borderColor: "{colors.hairline}" + boxShadow: rgba(0, 0, 0, 0.02) 0px 2px 0px 0px + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + boxShadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 6px -1px, rgba(0, 0, 0, 0.03) 0px 2px 4px 0px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + padding: 0px 0px 0px 40px + search-input: + textColor: "{colors.ink}" + typography: "{typography.input}" + rounded: "{rounded.2xl}" + padding: 0px 12px 0px 32px + height: 32px + footer: + backgroundColor: "{colors.surface-footer}" + textColor: "{colors.ink-secondary}" + boxShadow: rgba(0, 0, 0, 0.14) 0px 106px 36px -116px inset +--- + +# Ant Design + +## Overview + +Ant Design (antd) is Alibaba/Ant Group's open-source enterprise React design system, and ant.design is both its documentation site and its showcase. The product is the component library: the homepage (see the capture) is a pale, airy page whose gradient wash of lilac, pink and sky blue sits behind a centred 76px / weight 900 "Ant Design" wordmark, a 24px grey tagline ("AI friendly design system that combines beauty and intelligence, making work full of inspiration and joy."), and two buttons: a filled blue "Getting Started" and an outlined "Design Language". + +Below the hero the page is a live demo of the library itself: a "Flexible theme customization" section with real inputs, selects, checkboxes, steps, progress bars, avatars and cards on a white canvas, then a horizontally scrolling "Rich components" carousel (Calendar, Tour, FloatButton, Splitter, Masonry). The microcopy is plain, product-oriented English ("Ant Design Pro V6 is out!", "Ant Design CLI is released", "Get Started", "Continue with Google") with a CJK language switch ("中") in the header. + +The overall feeling is functional, dense-when-needed enterprise UI wrapped in a soft, friendly marketing shell: one saturated brand blue (#1677ff), neutral translucent black text, hairline #d9d9d9 borders, small radii (4 to 8px) on controls and larger radii (12 to 32px) on showcase panels. + +Key characteristics: +- **One brand colour.** #1677ff ("Daybreak Blue" in the official palette) carries every primary action, link, focus ring and selected state. +- **Alpha-based neutrals.** Text is not a fixed grey but black at 88% (#000000e0), 65% (#000000a6), 45% (#00000073) and 25% (#00000040) alpha, so it adapts to any background. +- **14px base type** with 22px line height; 16px for buttons on the marketing hero; 32px/600 page titles in the docs. +- **6px default control radius**, 8px for large controls and cards; pills (9999px) and circles only for avatars, tags-as-chips and badges. +- **32px control height** as the unit for buttons, inputs and selects (40px for the large hero buttons). +- **Flat with a faint offset shadow.** Primary buttons carry a 2px-down tinted shadow rather than a blur. + +## Colors + +All hexes below were measured on ant.design (homepage and the component docs pages for button, input, select, tag, card) and cross-checked against the seed token file in the ant-design repository (`components/theme/themes/seed.ts`) and the colour spec at https://ant.design/docs/spec/colors. + +### Brand and action +- **Primary** `{colors.primary}` (#1677ff): background of the "Getting Started" and docs "Primary" buttons, links, selected states. The seed token `colorPrimary` is '#1677ff'. +- **On primary** `{colors.on-primary}` (#ffffff): label colour on primary buttons. +- **Primary hover** `{colors.primary-hover}` (#4096ff): measured on the hero button after hover. +- **Primary tint** `{colors.primary-tint}` (#e6f4ff): the light blue background of selected/tag-like states on the docs pages. + +### Neutrals +- **Canvas** `{colors.canvas}` (#ffffff): page and container background; the largest-area background on the homepage. +- **Surface tint** `{colors.surface-tint}` (#f5f8ff): the pale blue panel behind demo sections. +- **Surface footer** `{colors.surface-footer}` (#f0f3fa): footer and docs sidebar-grade surface, also the second most common docs background. +- **Ink** `{colors.ink}` (#000000e0): headings and body text. The official font spec lists "#000000E0" for both heading and body text. +- **Ink secondary** `{colors.ink-secondary}` (#000000a6): secondary text (spec: "Secondary Text #000000A6"). +- **Ink tertiary** `{colors.ink-tertiary}` (#00000073): the hero tagline and placeholder-grade copy. +- **Ink disabled** `{colors.ink-disabled}` (#00000040): disabled text (spec: "Disabled Text #00000040"). +- **Hairline** `{colors.hairline}` (#d9d9d9): default border (spec: "Default Border #D9D9D9"). + +### Functional +- **Error** `{colors.error}` (#ff4d4f): the Danger button, error states. Seed `colorError` is '#ff4d4f'. +- **Success** `{colors.success}` (#52c41a): measured as the tag border on the docs Tag page; seed `colorSuccess` is '#52c41a'. +- **Warning** `{colors.warning}` (#faad14): measured text colour on the homepage demo; seed `colorWarning` is '#faad14'. + +### Decorative (not tokens) +The homepage hero uses soft pastel gradient blobs and a few saturated demo swatches (a violet #5939dc, a cyan #00d6ff, a magenta) that belong to illustrations, not to the interface palette, so they are intentionally not declared. + +## Typography + +The default font stack is the system stack from the seed token: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif` plus the three emoji faces. On the marketing homepage the display, body, button and input roles use **AlibabaSans** first (it loads as a web font; the other text falls back to the system stack). + +| Role | Token | Size / weight / line | Notes | +|---|---|---|---| +| Hero wordmark | `{typography.display}` | 76px / 900 / 92px | "Ant Design" h1, AlibabaSans | +| Hero tagline | `{typography.body}` | 24px / 400 / 37.7143px | colour {colors.ink-tertiary} | +| Section title | `{typography.heading}` | 16px / 500 / 24px | "Resources" and similar h2s | +| Docs page title | `{typography.heading-docs}` | 32px / 600 / 38.7368px | h1 on component pages (Button, Input, Select, Tag, Card) | +| Button (hero) | `{typography.button}` | 16px / 400 / 25.1429px | 40px high buttons | +| Control text | `{typography.input}` | 14px / 400 / 22px | inputs, default-size buttons | +| Nav link | `{typography.nav}` | 18px / 700 / 64px, letter-spacing -0.18px | Avenir first | + +The official spec (https://ant.design/docs/spec/font) states: base size 14px with 22px line height, ten font sizes derived from a pentatonic scale, recommended weights 400 for body, 500 for emphasis and 600 for bold English text. The measured most-used sizes confirm it: 14px dominates (2439 characters), then 16px, 20px, 24px, 38px, 12px and 13px. + +### Font substitutes +AlibabaSans is served by the site; if it is unavailable, the system stack above renders the same metrics closely enough. There is no need to introduce another webfont. + +### Principles +- Keep the type scale to three to five sizes per screen (the spec explicitly recommends restraint). +- Use alpha-black ink tokens instead of fixed greys. +- Reserve weight 900 for the hero wordmark only; docs titles use 600 and emphasis uses 500. + +## Layout + +- The page is centred, with the hero content spanning a 1186px text column inside a 1280px viewport in the measurement (about 47px side gutters). +- Header: 64px tall (nav link line-height 64px), logo and search on the left, nav links (Design, Development, Components, Blog, Resources), a version selector (6.6.5), theme/language/GitHub icons on the right. The nav bar has a layered soft shadow. +- Hero stack: wordmark, tagline, button pair, then three equal announcement cards with a small "HOT" ribbon. +- Showcase sections alternate centred 38px-class section titles with a grid of live components laid out in three columns. +- The "Rich components" band is a horizontal scroller of fixed-width demo cards that bleed off the viewport edge to signal more content. +- Spacing is a 4px grid: the measured paddings and gaps are 1, 2, 3, 4, 6, 7, 8, 11, 12 and 14px; seed `sizeUnit` is 4 and `sizeStep` is 4. +- Control height unit is 32px (`controlHeight`), large 40px. + +## Elevation & Depth + +Ant Design is mostly flat. Depth comes from three tiers: + +1. **Button offset shadow.** Primary: `rgba(5, 145, 255, 0.1) 0px 2px 0px 0px`; default/outline: `rgba(0, 0, 0, 0.02) 0px 2px 0px 0px`. A faint hard 2px edge, no blur (these match the `primaryShadow`/`defaultShadow` tokens in `components/button/style/token.ts`). +2. **Header / card shadow.** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 6px -1px, rgba(0, 0, 0, 0.03) 0px 2px 4px 0px`. +3. **Popup shadow.** Dropdowns and modals use `rgba(0, 0, 0, 0.08) 0px 6px 16px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px -4px, rgba(0, 0, 0, 0.05) 0px 9px 28px 8px`. + +Footers use an inset gradient shadow (`rgba(0, 0, 0, 0.14) 0px 106px 36px -116px inset`). Separators are #0505050f hairlines. + +## Shapes + +Radius scale (all measured): 4px `{rounded.xs}`, 6px `{rounded.sm}`, 8px `{rounded.md}`, 12px `{rounded.lg}`, 16px `{rounded.xl}`, 20px `{rounded.2xl}`, 32px `{rounded.3xl}`, 100px `{rounded.4xl}`, and `{rounded.pill}` for fully round shapes. + +- The seed `borderRadius` is 6. The repo's `genRadius.ts` derives the rest from it: for a base of 6 the large radius is 8, the small radius is 4, the extra small is 2 and the outer radius is 4. +- Default controls (button, input, select) use 6px; large hero buttons and Card use 8px; Tag uses the small radius (4px) per `components/tag/style/index.ts`. +- Showcase panels use 12 to 32px; avatar and badge shapes use 50%. + +## Components + +### Buttons +- **Primary (hero):** `{components.button-primary}`: 40px high, padding 0 15px, 8px radius, 16px/400 label, #1677ff fill with white text, 2px tinted shadow. +- **Primary (docs default size):** `{components.button-default-size}`: 32px high, 6px radius, 14px label; this is the size shipped by default. +- **Hover:** fill shifts to {colors.primary-hover}. +- **Outlined/default:** `{components.button-default}`: white fill, {colors.hairline} border, ink label; the "Design Language" and "Cancel" buttons. +- **Danger:** outlined with {colors.error} border and text. The docs button page additionally shows dashed, text, link and gradient variants. + +### Text input / Select +- `{components.text-input}`: 32px high, 6px radius, 14px/22px text, #d9d9d9 border; hover and focus borders turn to the primary blue (measured border colours include #1677ff and #ff4d4f for the error state). The site's header search box is a rounded variant: `{components.search-input}`, 20px radius with a 32px left padding for the magnifier icon. +- Select shares the input metrics and opens a popup with the popup shadow above. + +### Tag +`{components.tag}`: 4px radius, 8px horizontal padding, small font size (`fontSizeSM`) with tinted preset backgrounds and borders (e.g. green tag border #52c41a4d). + +### Card +`{components.card}`: white, 8px radius with the soft layered shadow; header weight is strong, header size is `fontSizeLG`, body padding is `paddingLG` (card style source). The homepage announcement cards add a "HOT" corner ribbon. + +### Navigation and footer +`{components.nav}`: white bar with the layered shadow, 18px/700 links. `{components.footer}` uses {colors.surface-footer} with {colors.ink-secondary} text. + +### Component state reference + +| Component | Default | Hover | Notes | +|---|---|---|---| +| Primary button | fill #1677ff, white text | fill #4096ff | measured on the hero button before/after hover | +| Default button | white fill, #d9d9d9 border | not measured | 2px offset shadow rgba(0,0,0,0.02) | +| Danger button | white fill, #ff4d4f border | not measured | shadow rgba(255, 38, 5, 0.06) measured on the button page | +| Input | #d9d9d9 border, 6px radius | not measured | error border #ff4d4f measured | +| Tag | tinted preset fill with 4px radius | n/a | closable and checkable variants | +| Card | white, 8px radius | not measured | shadow `rgba(0, 0, 0, 0.06) 0px 2px 8px 0px` appears on the Card page | + +### Imagery and illustration +- The homepage uses no photography. Imagery is the product itself: real components rendered at their default sizes, plus small brand logos in a "Sponsors" row (YouMind, TRACTIAN, LobeHub, CodeRabbit). +- Avatars are circular (50%) and overlap in a stack with a "+5" overflow chip. +- Pastel radial gradient blobs (lilac, pink, sky blue) float behind the hero and section transitions to add warmth without competing with the blue. +- Icons are outlined glyphs at roughly 14 to 16px, tinted with the current text colour. + +### Microcopy voice +- Short, verb-first labels: "Getting Started", "Get Started", "Continue with Google", "Resend", "Cancel", "OK". +- Announcement cards use a bold one-line headline, one to three lines of description in {colors.ink-tertiary}, and an ISO date at the bottom (for example 2026-05-08). +- Badges are one word: "HOT", "Update", "New". + +### Density +The measured docs pages are dense: 14px text at 22px line height inside 32px controls with 8 to 12px gaps. The marketing hero is the only place with generous air (24px copy, 40px buttons, wide section padding). + +## Design System Architecture + +Ant Design is the component library, so the system is defined in public source. + +- **Docs and spec:** https://ant.design/docs/spec/colors (12 base palettes with ten shades; functional colours success, warning, error, info; neutrals via alpha) and https://ant.design/docs/spec/font (font family, 14/22 base, ten sizes, weights, text colours with light/dark values). +- **Customization:** https://ant.design/docs/react/customize-theme. Version 5 and later use CSS-in-JS design tokens passed via `ConfigProvider`'s `theme`; three preset algorithms (default, dark, compact). +- **Token layers:** Seed tokens (the root decisions, such as `colorPrimary`, `fontSize`, `borderRadius`, `sizeUnit`) produce Map tokens through algorithms, which produce Alias tokens; each component can then override its own component tokens. The seed file is https://github.com/ant-design/ant-design/blob/master/components/theme/themes/seed.ts: `colorPrimary: '#1677ff'`, `colorSuccess: '#52c41a'`, `colorWarning: '#faad14'`, `colorError: '#ff4d4f'`, `fontSize: 14`, `lineWidth: 1`, `borderRadius: 6`, `sizeUnit: 4`, `sizeStep: 4`, `controlHeight: 32`. +- **Neutral generation:** `components/theme/themes/default/colors.ts` computes text and fills as alpha of the base text colour: 0.88, 0.65, 0.45, 0.25 for text; 0.15, 0.06, 0.04, 0.02 for fills; border colours as solids derived from the background. +- **Radius generation:** `components/theme/themes/shared/genRadius.ts` (see Shapes). +- **Per-component tokens:** e.g. `components/button/style/token.ts` (font weight 400, shadows computed from outline tokens) and `components/tag/style/index.ts`, `components/card/style/index.ts`. + +## Do's and Don'ts + +### Do +- Use #1677ff for the single primary action on a view and white text on it. +- Express text hierarchy with the four alpha-black levels. +- Keep the 32px control height and 6px radius; step up to 40px / 8px for hero or large forms. +- Use 14px/22px as the base text pair. +- Use the tinted 2px offset shadow on buttons and the layered soft shadow on floating panels. +- Use the functional colours (success, warning, error) only for status. + +### Don't +- Don't introduce a second brand hue next to the blue; the decorative pastel gradients are illustration only. +- Don't use fixed hex greys for text; they break on tinted surfaces. +- Don't use weight 900 outside the hero wordmark. +- Don't round standard controls past 8px; reserve pills for badges and avatars. +- Don't use blurred drop shadows on buttons. +- Don't mix more than five font sizes on one screen. + +## Accessibility Notes + +- The official font spec says text colours maintain contrast against their backgrounds (it cites WCAG AAA 7:1 for the neutral set); ink #000000e0 on #ffffff meets that comfortably. +- Disabled text (#00000040) is intentionally below normal contrast; never use it for information that must be read. +- Focus: seed token `focusOutline: true` enables a visible outline. +- Motion: the seed defines `motion: true` with named easings (for example `motionEaseOut: cubic-bezier(0.215, 0.61, 0.355, 1)`) and a `motionUnit` of 0.1; provide a reduced-motion path when copying. +- Dark mode is a first-class algorithm; the spec lists dark values for each text and border colour (for example heading #FFFFFFD9, default border #424242). + +## Responsive Behavior + +- The extraction recorded both desktop (1280px) and mobile viewports; the site is responsive and the docs mobile mode is reachable with a `?mobile` query. +- Mobile header and announcement card layout were not measured. +- The component showcase scrolls horizontally rather than reflowing. +- Control height stays 32px (touch-friendly large size is 40px); do not shrink it below that on mobile. +- Hero type scales down from 76px; keep the weight 900 and tight line height ratio (92/76). + +## Iteration Guide + +1. Start from the seed values: #1677ff, 14px, 6px radius, 4px size unit, 32px control height. +2. Derive neutrals as alpha black rather than picking greys. +3. Build the button first (32px, 6px radius, 2px tinted shadow), then input and select at the same height so they align in forms. +4. Add Card at 8px radius with the layered shadow and a strong 16px header. +5. For a marketing page, wrap the same components in a pastel gradient field and use a 76px/900 wordmark. +6. Check each addition against the colour spec (https://ant.design/docs/spec/colors) and the font spec before inventing a value. +7. For themes, override seed tokens only; let algorithms derive hover, active and disabled states. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/anthropic/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/anthropic/DESIGN.md new file mode 100644 index 0000000..52dfab0 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/anthropic/DESIGN.md @@ -0,0 +1,151 @@ +--- +version: alpha +name: Anthropic +category: "AI" +description: "Anthropic home: ivory canvas #faf9f5 with oat page band #f0eee6, near-black ink #141413, Anthropic Sans 700 headlines at 57.7px, Anthropic Serif body and 71px display, oat #e3dacc cards with 24px radius, dark pill buttons." +colors: + canvas: "#faf9f5" + page-body: "#f0eee6" + ink: "#141413" + primary: "#141413" + on-primary: "#faf9f5" + primary-hover: "#3d3d3a" + ink-faint: "#b0aea5" + ink-hover: "#5e5d59" + surface-card: "#e3dacc" + ink-meta: "#21211e99" + hairline: "#1414131a" +typography: + display: + fontFamily: "\"Anthropic Sans\", Arial, sans-serif" + fontSize: 57.7306px + fontWeight: 700 + lineHeight: 63.5037px + display-mobile: + fontFamily: "\"Anthropic Sans\", Arial, sans-serif" + fontSize: 40.2939px + fontWeight: 700 + lineHeight: 44.3233px + heading: + fontFamily: "\"Anthropic Serif\", Georgia, sans-serif" + fontSize: 71.04px + fontWeight: 400 + lineHeight: 82.1933px + letterSpacing: "-1.0656px" + subheading: + fontFamily: "\"Anthropic Sans\", Arial, sans-serif" + fontSize: 24px + fontWeight: 600 + lineHeight: 31.2px + body: + fontFamily: "\"Anthropic Serif\", Georgia, sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 25.2px + link: + fontFamily: "\"Anthropic Serif\", Georgia, sans-serif" + fontSize: 18px + fontWeight: 600 + lineHeight: 25.2px +rounded: + xs: 8px + sm: 16px + md: 24px +spacing: + s1: 4px + s2: 8px + s3: 9.95px + s4: 12px + s5: 16px + s6: 22.4px + s7: 28px + s8: 30.96px + s9: 44.87px + s10: 71.64px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + rounded: "{rounded.xs}" + card: + backgroundColor: "{colors.surface-card}" + textColor: "{colors.ink}" + rounded: "{rounded.md}" + footer: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" +--- + +## Overview + +anthropic.com presents Anthropic's research and products with the restraint of a publication. The measured page is 1280px wide and 3130px tall. A top bar carries the logo mark, a menu (Research, Policy, Commitments, Learn, News) and a split dark "Try Claude" button with a dropdown segment. The hero is an oat-colored band with the headline "AI research and products that put safety at the frontier" in bold sans at left (the words "research" and "products" are underlined) and a serif paragraph at right: "AI will have a vast impact on the world. Anthropic is a public benefit corporation dedicated to securing its benefits and mitigating its risks." Below it comes an ivory feature block announcing a model release in a large serif title with a hand-drawn-looking arc beneath it and a dark "Read more" pill; then "Latest releases" as three oat cards, each with a serif title, a short paragraph, a three-row mono-labelled metadata table (DATE, CATEGORY, DETAILS) and a dark "Read announcement" button; then a statement ("At Anthropic, we build AI to serve humanity's long-term well-being.") beside a ruled list of articles with category labels at right; then a near-black footer with a logo and four link columns (Products, Solutions, Resources, Company). + +The overall voice is editorial and calm: generous whitespace, warm neutrals, no gradients, no stock illustration. Product names are set large in serif, supporting metadata in small monospace. + +## Colors + +The palette is warm paper-and-ink. `canvas` is {colors.canvas} (#faf9f5, called ivory-light in the page's swatch variables) and `page-body` is {colors.page-body} (#f0eee6, ivory-medium), which covers the largest background area (weight 4093). `surface-card` is #e3dacc (the page's "oat" swatch) and fills the release cards. `ink` is {colors.ink} (#141413, "slate-dark") for headlines and body; it is also the footer background and the button fill. `ink-hover` is #5e5d59 (slate-light), the measured hover color of text links, which also underline. `ink-faint` is #b0aea5 (cloud-medium, named `--swatch--text-agate`), the most frequent text color by characters (weight 1228), used for footer links and quiet labels. `ink-meta` is #21211e99 and `hairline` is #1414131a (slate-faded-10, the theme border), the 10% ink line that separates list rows and metadata rows. + +Primary is reassigned from the generated gray to the dark button fill. The page's own theme variables, read from the root, define the button roles directly: `--_color-theme---button-primary--background` is slate-dark #141413, its text is ivory-light #faf9f5, and its hover background and border are slate-medium #3d3d3a. These are recorded as `primary`, `on-primary` and `primary-hover`. The generated value #b0aea5 is kept as `ink-faint`. + +The stylesheet also declares a broad family of named swatches (clay #d97757, accent #c6613f, kraft #d4a27f, fig #c46686, plum #827dbd, olive #788c5d, mineral #629987, sky #6a9bcc, poppy #de6262, pencil #f0ac54 and pastel tints). They are part of the shipped palette but are not seen on this home page, so they are not promoted to tokens here. + +## Typography + +Three proprietary families are loaded as variable fonts (weights 300 to 800): Anthropic Sans (the most-used by characters, weight 2119), Anthropic Serif (592) and Anthropic Mono (57). The fallbacks measured in the stacks are Arial for sans and Georgia for serif. + +- `display` (h1): Anthropic Sans 700, 57.7306px, 63.5037px line height. +- `heading`: Anthropic Serif 400, 71.04px, 82.1933px line height, -1.0656px tracking (the release title). +- `subheading`: Anthropic Sans 600, 24px, 31.2px line height. +- `body`: Anthropic Serif 400, 18px, 25.2px line height. +- `link`: Anthropic Serif 600, 18px. + +The size distribution by characters is 12px (1331, the monospace metadata), 16px, 18px, 24px, 15px, 57.7306px, 22.4px, 71.04px and 20px. The three families are loaded as the site's own font files. As substitutes use a geometric grotesque such as Inter or Arial for Sans, Georgia for Serif and a standard monospace for Mono, which are the fallbacks the page itself declares for the first two. + +## Layout + +The layout is a wide single column with an asymmetrical two-column opening (headline left, paragraph right), a centered feature block, a three-column card row and a two-column statement-plus-list block. The root carries a spacing scale of `--size--*` and `--_spacing---space--*` variables (rem values and clamp() formulas, for example `--size--2rem` is clamp(1.75rem, ..., 2rem)). Measured spacing values are 4, 8, 9.95, 12, 16, 22.4, 28, 30.96, 44.87 and 71.64px. Sections alternate between the oat band, the ivory block and the near-black footer rather than being separated by lines, and the card row sits on the oat band. + +## Elevation & Depth + +Cards are flat; depth comes from tonal contrast (oat card on a lighter oat band, ivory block between oat bands). The CSS contains very soft layered shadows, `0 2px 2px #00000003, 0 4px 4px #00000005, 0 16px 24px #0000000a` (8 uses) and a taller stack of low-alpha shadows from 4px to 150px blur; the largest alpha is #0000000d. Neither is visible as an obvious edge in the capture, and `none` is also present. Dividers are the 10% ink hairline. + +## Shapes + +The measured radii are 24px (4 uses), 3px, 2px, 1600px (2 uses), 4px, 12px and 8px. The tokens keep `xs` 8px, `sm` 16px and `md` 24px. The split "Try Claude" button has an 8px radius on its left corners (reported as `8px 0px 0px 8px`); release cards use the 24px radius; the dark action buttons in the capture have fully rounded ends. + +## Components + +- `button-primary`: {colors.primary} fill, {colors.on-primary} text, {colors.primary-hover} on hover, 8px radius token (measured on the split nav button). The "Read more" and "Read announcement" buttons carry an arrow glyph after the label. +- `card`: {colors.surface-card} fill, 24px radius, a serif title, serif paragraph and a three-row mono-labelled table with hairline rules. +- Text links: serif 18px, {colors.ink} underlined, shifting to {colors.ink-hover} on hover (measured on "research" and "products" in the headline). +- Article list: rows ruled with the hairline, a bold sans title at left, a gray category label at right. +- `footer`: {colors.ink} background, {colors.canvas} text, link columns in muted type. + +Generated link, nav and nav-link tokens were dropped: they came from a skip link with a transform and from the h1, and did not describe real components. + +## Design System Architecture + +No public brand-guidelines or design-system page was readable: /brand returned 404 and the press-kit page returned HTML with no readable guideline text in the response (the page is rendered client-side). The shipped site is a Next.js build. Its CSS exposes a layered theme system: raw swatches (`--swatch--slate-dark`, `--swatch--ivory-light`, ...) are mapped to semantic theme variables (`--_color-theme---background`, `---text`, `---border`, `---card`, `---link--text`, `---button-primary--background`, and secondary and tertiary button variants, each with `-hover` states), and to type and spacing variables (`--_typography---*`, `--_text-style---*`, `--_spacing---*`, `--size--*`). Source: the page at [anthropic.com](https://www.anthropic.com/). Button variants in the variable set are primary (dark fill), secondary (transparent with dark border, dark fill on hover) and tertiary (transparent, border on hover). + +## Do's and Don'ts + +- Do set headlines in bold sans and product titles and reading text in serif. +- Do keep the surface colors to ivory, oat and near-black, and use the 10% ink hairline for dividers. +- Do use dark pill buttons with ivory text for primary actions. +- Do put metadata in small monospace with uppercase labels. +- Don't use saturated brand swatches (clay, poppy, sky and the others) as page fills on this style of page. +- Don't add heavy shadows; cards are flat tonal blocks. +- Don't use the generated gray #b0aea5 as a button fill. + +## Responsive Behavior + +Measured at 390px: the h1 drops from 57.7306px to 40.2939px (line height 44.3233px, weight 700), and the serif release title drops from 71.04px to 47.94px (line height 50.337px, tracking -0.7191px). The extractor recorded no mobile navigation or column data for this page, so menu behavior and the card row at narrow width are not measured. + +## Iteration Guide + +1. Set the page ground to #faf9f5 with #f0eee6 bands and #141413 ink. +2. Headlines: sans 700 at 57.7306px / 63.5037px; product titles: serif 400 at 71.04px / 82.1933px, -1.0656px tracking. +3. Buttons are #141413 with #faf9f5 text and #3d3d3a on hover. +4. Cards are #e3dacc with a 24px radius and hairline rules at #1414131a. +5. Run `node web/scripts/verify-designs.mjs --slug=anthropic` after changes. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ants/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ants/DESIGN.md new file mode 100644 index 0000000..19973e3 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ants/DESIGN.md @@ -0,0 +1,182 @@ +--- +version: alpha +name: ANTS +category: "Thai Brands" +description: "ANTS (Advance Network Technology and Services), a Thai SMS, LINE and MarTech platform company: white #ffffff canvas, deep navy #19164f ink and buttons, orange #f26622 kicker labels, Poppins with Kanit for Thai, 64px hero headings, pill buttons with a 0 2px 10px shadow and 16px to 54px rounded cards on a calm, photo-led layout." +colors: + canvas: "#ffffff" + page-largest: "#19164f" + ink: "#19164f" + primary: "#19164f" + on-primary: "#ffffff" + surface-muted: "#f1f1f1" + surface-charcoal: "#504f52" + ink-black: "#000000" + accent-orange: "#f26622" + ink-dark: "#212529" + ink-light: "#f8f9fa" + nav-bg: "#ffffffcc" + card-bg: "#f3f3f6" +typography: + display: + fontFamily: Poppins, "Poppins Fallback", Kanit, "Kanit Fallback", sans-serif + fontSize: 64px + fontWeight: 500 + stat-number: + fontFamily: Poppins, sans-serif + fontSize: 48px + fontWeight: 600 + lineHeight: 64px + subheading: + fontFamily: Poppins, "Poppins Fallback", Kanit, "Kanit Fallback", sans-serif + fontSize: 24px + fontWeight: 500 + body: + fontFamily: Poppins, "Poppins Fallback", Kanit, "Kanit Fallback", sans-serif + fontSize: 24px + fontWeight: 400 + button: + fontFamily: Kanit, sans-serif + fontSize: 20px + fontWeight: 300 + lineHeight: 24px + nav: + fontFamily: Poppins, sans-serif + fontSize: 16px + fontWeight: 500 +rounded: + xs: 10px + sm: 16px + md: 30px + lg: 50px + xl: 54px + pill: 9999px +spacing: + s1: 5px + s2: 8px + s3: 10px + s4: 12px + s5: 13px + s6: 15px + s7: 16px + s8: 20px + s9: 24px + s10: 25.59px +components: + button-primary: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 15px 30px + height: 56px + boxShadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px + button-secondary: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 15px 30px + height: 54px + boxShadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px + link: + textColor: "{colors.ink-light}" + typography: "{typography.button}" + nav: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.page-largest}" + rounded: "{rounded.lg}" + padding: 0px 64px + nav-link: + textColor: "{colors.page-largest}" + typography: "{typography.nav}" + card: + backgroundColor: "{colors.card-bg}" + textColor: "{colors.page-largest}" + rounded: "{rounded.md}" + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.accent-orange}" + padding: 64px 64px 25.5938px +--- + +## Overview + +ANTS (ants.co.th) is the website of Advance Network Technology and Services Co., Ltd., a Thai technology company. Its home page presents integrated SMS, LINE Official and marketing-technology platforms, with a hero line "I′m possible" and the Thai sub-line "สร้างความเป็นไปได้ใหม่อย่างยั่งยืน" (create sustainable new possibilities). It lists strategic partners dtac, AIS, LINE and TRUE, and company stats of 90+ headcounts, 300+ clients, 100+ successful projects and 10+ years in business. Products named on the page include a communication platform (SMS, email, voice, MMS), marketing technology (Customer Data Platform, Chat Center, Social Listening) and a set of AI products. + +The visual language is that of a confident B2B platform vendor that still feels human. The first screen is a full-width photograph of a smiling woman looking at her phone under a dark overlay, with the centred white headline, a small "Digital Transformation" kicker and an outlined pill button "ติดต่อเรา". Below it a row of partner logos sits in light rounded chips, then a floating rounded navigation bar, a row of four stat tiles on pale grey, and large rounded panels alternating between deep navy `#19164f` and charcoal `#504f52`, each with an orange label ("Product", "Service"), a bold English title and a Thai description beside a photograph. + +The page scrolls to 7191px at 1280px width and the document title is Thai ("ANTS - แพลตฟอร์ม SMS, LINE, Email Marketing ครบวงจร"). Copy is bilingual: English words for product names and Thai for explanation. + +## Colors + +- **Canvas `#ffffff`** is the page background; light surfaces are `#f1f1f1` (surface-muted) and `#f3f3f6` (card tiles). +- **Navy `#19164f`** is the brand colour and the largest filled background area (weight 2622). It is also the text colour of headings and the primary button fill. The stylesheet declares it as `--primary-color: #19164f`. +- **Charcoal `#504f52`** fills the secondary large panels. +- **Orange `#f26622`** is the accent: panel kicker labels and the footer text (165 characters). +- **Text neutrals:** `#000000`, `#212529` and `#f8f9fa` for link text on dark. +- **Navigation `#ffffffcc`** is white at 80 percent alpha for the floating nav bar. + +Bootstrap defaults in the root variables (`--bs-primary: #0d6efd`, `--bs-orange: #fd7e14` and so on) are framework defaults and not brand colours. The green LINE chat widget at the bottom right (`#06c756ad` background and a green glow shadow) is a third-party control and is excluded. + +## Typography + +**Poppins** (400, 500, 600, 700) carries 1625 measured characters and **Kanit** (300 to 600) carries 877; Kanit is also the Thai fallback and the button face. Both families are loaded as webfonts with their fallback metrics faces. + +- Display: Poppins 500, 64px, for the white hero headline "I′m possible" (95px high box, 388px wide). +- Stat number: Poppins 600, 48px/64px ("90+", "300+"). +- Subheading: Poppins 500, 24px; body: 24px at weight 400 (1003 characters at 24px). +- Button: Kanit 300, 20px/24px. +- Nav: Poppins 500, 16px. +- Mobile: hero heading 36px, stat number 48px, body 16px, button 20px. + +Substitute any geometric sans for Poppins and any Thai sans for Kanit if they are not available. + +## Layout + +The layout is a centred stack of full-width blocks with a side margin of 64px: the root footer padding measures `64px 64px 25.5938px`, and the nav has `0px 64px` padding. Stat tiles sit in a four-column row; the product and service panels are two-column (copy left, photograph right, then reversed). Section intros use a two-column split with a large bold Thai headline on the left and a short paragraph plus button on the right. Measured paddings by frequency are 12px, 8px, 5px, 16px, 30px and 15px. + +## Elevation & Depth + +Depth is soft and uniform. The shadow `rgba(0, 0, 0, 0.2) 0px 2px 10px 0px` (declared as `--shadow-2`) is measured on 9 elements: buttons and similar raised pieces. A second, green glow `rgba(6, 199, 85, 0.45) 0px 6px 20px 0px` belongs to the third-party chat widget. The hero uses a dark photographic overlay to make the white headline legible; cards rely on tonal contrast (`#f3f3f6` on white, navy on white) rather than borders. + +## Shapes + +Shapes are generously rounded. The most frequent radii are 800px (11 elements, the pill buttons) and 50% (11, circular icon buttons such as the carousel arrows and back-to-top), then 16px (6), 10px (5), 54px (4), 30px (4) and 50px (2). Large panels and stat tiles use the 16px to 30px range; the floating nav bar uses 50px; the pill token is 9999px. + +## Components + +- **Primary button ("ดูบริการทั้งหมดของเรา"):** navy `#19164f` fill, white text, Kanit 300 at 20px, padding 15px 30px, height 56px, pill radius, with the `0px 2px 10px` shadow and a trailing diagonal-arrow icon. It measures 273px wide. Other "read more" buttons repeat the same style at 54px or 44px high. +- **Hero button:** an outlined white pill with a phone icon over the photograph. +- **Navigation:** a floating bar with `#ffffffcc` background, 50px radius, the orange ANTS logo at left, a hamburger icon at right and navy Poppins 16px links. +- **Stat tile:** `#f3f3f6` rounded tile with a 48px navy number and a Poppins label. +- **Panel card:** navy or charcoal rounded panel with an orange label, a large white title and a photograph. +- **Partner chip:** light pill containing a partner logo (dtac, AIS, LINE, true). +- **Utility controls** (round orange back-to-top arrow and green LINE chat chip) are not brand components. + +## Design System Architecture + +No public ANTS design system, brand guideline or press kit was found: https://www.ants.co.th/about and https://www.ants.co.th/brand both returned HTTP 404. The shipped CSS reveals the de-facto system: Bootstrap 5 variables (`--bs-body-font-size: 1rem`, `--bs-body-font-weight: 400` and the Bootstrap colour names), Font Awesome 6 icons, Swiper for carousels (a `swiper-icons` font is loaded), and a thin custom layer: `--primary-color: #19164f`, `--shadow-2: 0px 2px 10px rgba(0,0,0,0.2)` and `--hover-bg-color: #19164f2f`. Source: https://www.ants.co.th/. + +## Do's and Don'ts + +- Do anchor pages in white and navy `#19164f`, with orange `#f26622` for small labels only. +- Do use pill buttons with the shared soft shadow and an arrow icon. +- Do pair Poppins Latin with Kanit Thai and keep body copy at regular weight. +- Do show real, warm photography of people using devices. +- Don't use Bootstrap's default blue or orange as brand colours. +- Don't treat the LINE chat chip or the back-to-top button as part of the brand button set. +- Don't use hard borders on cards; use tonal fills and rounded corners. + +## Responsive Behavior + +The extractor measured a 390px viewport as well as 1280px. The hero heading drops from 64px to 36px, the stat number stays 48px, body copy from 24px to 16px, and the button label stays 20px. The navigation is a compact bar with a hamburger icon in the measured desktop capture. Narrow-screen layout of stat tiles and two-column panels was not measured; only the type-size changes were. + +## Iteration Guide + +1. Start from `canvas #ffffff`, `ink #19164f` and `primary #19164f` with white button text. +2. Use Poppins for Latin text and Kanit for Thai, display at 64px and body at 24px on desktop. +3. Build buttons as 56px-high pills with 15px 30px padding and the `0 2px 10px` shadow. +4. Alternate navy and charcoal panels with 30px-ish radii; label them in `#f26622`. +5. Show stats in `#f3f3f6` tiles at 48px/600. +6. Re-measure with the extractor if the site changes; never lift colours from Bootstrap defaults. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/anuc-home/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/anuc-home/DESIGN.md new file mode 100644 index 0000000..1ba62e5 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/anuc-home/DESIGN.md @@ -0,0 +1,173 @@ +--- +version: alpha +name: Anuc Home +category: "Architecture & Interiors" +description: "Anuc Home: Spanish-language interior design and Feng Shui studio; white canvas, #f0f0ef stone bands, ink #1a1a1e, Instrument Serif 68.5px display, Instrument Sans 17.5px body, five Feng Shui element accents, square-cornered stone-gray buttons." +colors: + canvas: "#ffffff" + page-largest: "#f0f0ef" + ink: "#1a1a1e" + primary: "#d0ceca" + on-primary: "#1a1a1e" + surface-stone: "#e7e6e4" + ink-brown: "#4d4942" + accent-fire: "#976751" + accent-wood: "#707455" + accent-water: "#4a626f" + accent-earth: "#9a682c" + error: "#e62c17" +typography: + display: + fontFamily: "\"Instrument Serif\", \"Instrument Serif Fallback\", ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif" + fontSize: 47.6408px + fontWeight: 400 + lineHeight: 52.4049px + display-mobile: + fontFamily: "\"Instrument Serif\", \"Instrument Serif Fallback\", ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif" + fontSize: 24.3918px + fontWeight: 400 + lineHeight: 26.831px + heading: + fontFamily: "\"Instrument Serif\", \"Instrument Serif Fallback\", ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif" + fontSize: 68.5061px + fontWeight: 400 + lineHeight: 68.5061px + subheading: + fontFamily: "\"Instrument Sans\", \"Instrument Sans Fallback\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 14.9551px + fontWeight: 400 + lineHeight: 17.9461px + textTransform: uppercase + body: + fontFamily: "\"Instrument Sans\", \"Instrument Sans Fallback\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 17.4776px + fontWeight: 400 + lineHeight: 20.9731px + nav: + fontFamily: "\"Instrument Sans\", \"Instrument Sans Fallback\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" + fontSize: 16px + fontWeight: 500 + lineHeight: 19.2px + textTransform: uppercase +rounded: + none: 0px + pill: 9999px +spacing: + s1: 1px + s2: 1.5px + s3: 2px + s4: 4px + s5: 8px + s6: 12px + s7: 24px + s8: 40px + s9: 64px + s10: 96px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.ink}" + typography: "{typography.subheading}" + rounded: "{rounded.none}" + padding: 0px 24px + height: 64px + button-secondary: + textColor: "{colors.ink}" + typography: "{typography.subheading}" + rounded: "{rounded.none}" + padding: 0px 8px + height: 36px + borderColor: "{colors.page-largest}" + link: + textColor: "{colors.ink}" + typography: "{typography.subheading}" + rounded: "{rounded.none}" + padding: 0px 8px + borderColor: "{colors.page-largest}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.none}" + padding: 0px 8px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + footer: + textColor: "{colors.ink}" + rounded: "{rounded.none}" +--- + +## Overview + +anuchome.com is the Spanish-language home page of Anuc Home, an interior-design and Feng Shui practice (the header reads "ANUC HOME (CHI)" and the opening copy is "Transformamos espacios, conectamos emociones"). The measured page is 1280px wide and 8551px tall, with the document language set to es. The page opens on four large black arch and half-arch shapes forming the logotype, each sitting above one of four equal columns that carry the main menu (HOME, NOSOTROS, SERVICIOS, CONTACTO) set in serif capitals; beneath the shapes is a photographic row of interiors with the white serif headline over the second column and a stone-gray "AGENDAR VALORACIÓN GRATUITA" button with a round arrow glyph in the fourth. The rest of the scroll is a four-column grid with hairline vertical rules: a small uppercase label ("DOCTORES DE ESPACIOS"), a very large serif statement ("En ANUC utilizamos los espacios como herramienta de gestión emocional para mejorar la forma en que vives, sientes y trabajas."), then three numbered services (01 Interiorismo + Feng Shui, 02 Servicio "Hazlo tú mismo", 03 Consultoría estratégica Feng Shui), each with a small photograph and a short sans paragraph. + +The voice is quiet and editorial: lots of white, thin rules, tall condensed serif for statements, small uppercase sans for labels, and calm photography of lived-in rooms. + +## Colors + +The neutrals come from a "stone" scale declared in the stylesheet as RGB triplets. `canvas` is {colors.canvas} (#ffffff) and `page-largest` is {colors.page-largest} (#f0f0ef, base-stone-20), the largest background by area (weight 1892). `surface-stone` is #e7e6e4 (stone-50) and `primary` is {colors.primary} (#d0ceca, stone-100), the fill of the "AGENDAR VALORACIÓN GRATUITA" button, with {colors.on-primary} (#1a1a1e, base-black) text. `ink` is #1a1a1e for nearly all text (weight 1380) and `ink-brown` is #4d4942 (base-brown) for body paragraphs. A translucent ink (#1a1a1e33) covers the photo row under the headline, so the headline reads in white. + +Five accent colors are declared as Feng Shui elements: `accent-fire` #976751, `accent-wood` #707455, `accent-water` #4a626f, `accent-earth` #9a682c and `accent-metal` #c1c2bd (declared; metal is the page's default accent, `--accent-color: metal`). Fire and wood appear as text colors (the "01/02/03" numbering and small markers); earth (#9a682c), water (#4a626f), wood (#707455) and fire (a translucent #97675133) each appear among the measured background colors with small area weights (10, 10, 10 and 16); in the capture, a thin blue-gray bar sits above the contact column. `error` #e62c17 is declared as `--color-error`; no error state was seen in the capture. + +## Typography + +Two families are loaded: Instrument Serif (400) and Instrument Sans (400 and 500), each with a metrics-matched "Fallback" face and generic stacks (ui-serif, Georgia, Cambria, Times New Roman; ui-sans-serif, system-ui). By characters Instrument Serif carries 1032 and Instrument Sans 845. + +- `display` (h1): Instrument Serif 400, 47.6408px, 52.4049px line height. +- `heading` (h2): Instrument Serif 400, 68.5061px with line height equal to size (68.5061px) for the large statement. +- `subheading`: Instrument Sans 400, 14.9551px, 17.9461px line height, uppercase (labels and button text). +- `body`: Instrument Sans 400, 17.4776px, 20.9731px line height. +- `nav`: Instrument Sans 500, 16px, 19.2px line height, uppercase; the menu in the capture is set in serif capitals. + +The tight line-height-equals-size setting on the large statement makes it read as a dense block of text. Both families are the ones loaded by the site, so no substitute is required. + +## Layout + +The layout is a four-column grid; the header, shapes, photo row and body sections all align to the same four columns, with 1px vertical hairlines running through the page. Text blocks start at the second column and span two to three columns. Measured spacing values are 1, 1.5, 2, 4, 8, 12, 24, 40, 64 and 96px; `--header-height` is 3.3rem. The primary button is 64px tall with 0px 24px padding. The shapes at the top are full-column-width flat black forms with no outline. + +## Elevation & Depth + +There is no elevation. The measured shadows are `none` and a Tailwind ring placeholder (`var(--tw-ring-offset-shadow,0 0 #0000), ...`) that resolves to nothing. Hierarchy comes from scale (68.5px serif against 15px sans labels), full-bleed photography and column hairlines. + +## Shapes + +All measured corners are square (0px); the only non-zero radius in the CSS is 9999px (one use), the round arrow badge inside the button. The four black shapes at the top use large semicircular tops and bottoms rather than rectangles, which is the brand's one rounded motif. Photos are rectangular and unframed. + +## Components + +- `button-primary`: {colors.primary} fill, {colors.on-primary} text, subheading type (uppercase 14.9551px), 0px radius, padding 0px 24px, 64px tall, with a small circular arrow at the right edge. +- `button-secondary` and `link`: ink text in the subheading style, 0px 8px padding, 36px tall, with a {colors.page-largest} border. +- `nav` / `nav-link`: transparent on white, uppercase, ink text; in the capture each menu item has a small colored square marker at the column's right edge (fire for NOSOTROS, a gray for SERVICIOS, and so on). +- Service block: a numbered label (01 to 03) in an accent color, an uppercase sans title, a photograph, a short {colors.ink-brown} paragraph. +- `footer`: ink text on the page background; its contents were not examined in the capture. + +## Design System Architecture + +No public design-system or brand-guideline page was found in the page's links; the home page is a Tailwind build (`--tw-*` variables are present) and its theme variables are the system. Colors are RGB triplets named `--color-base-black` (26 26 30), `--color-base-white`, `--color-base-white-off` (251 251 251), `--color-base-brown` (77 73 66), `--color-base-stone-20`, `-50`, `-100` and the five `--color-accent-*` values (fire 151 103 81, wood 112 116 85, water 74 98 111, earth 154 104 44, metal 193 194 189), with `--accent-color` selecting one. Fonts are exposed as `--font-instrument-serif` and `--font-instrument-sans`. Source: the page at [anuchome.com](https://www.anuchome.com/). + +## Content and Imagery + +The photography is warm, daylight interior imagery: a boucle sofa with a green cushion, a marble coffee table with an open art book and a plant, a leather-and-steel armchair, a wicker mirror being hung over a sofa, a woman on a laptop in an armchair. The images are shown at natural proportions in square-ish crops, never masked by the arch shapes. The microcopy is Spanish, uses first-person plural ("Transformamos", "utilizamos", "Descubrimos"), and puts the emotional claim in the large serif statement and the practical offer in the small sans paragraph beneath each numbered service. + +## Do's and Don'ts + +- Do set big statements in Instrument Serif with line height equal to the font size. +- Do use uppercase Instrument Sans at about 15px for labels and buttons. +- Do keep all rectangles square and reserve rounding for the arch motif and the arrow badge. +- Do use the stone scale for surfaces and one element accent per marker. +- Don't add shadows or gradient fills; photography carries depth. +- Don't use accent colors for large fills. +- Don't break the four-column rhythm: text starts at a column line. + +## Responsive Behavior + +Measured at 390px: the h1 drops from 47.6408px to 24.3918px (line height 26.831px), the large h2 to 36.5388px, and body text is 16.0245px on 19.2294px line height in {colors.ink-brown}. The mobile header text lists "MENU" and "CLOSE" labels alongside the menu entries, so a menu toggle exists at that width; the extractor recorded no column count or other layout data for mobile, which is therefore not measured. + +## Iteration Guide + +1. Start with a white page and #f0f0ef bands; text #1a1a1e, paragraphs #4d4942. +2. Statements: Instrument Serif 68.5061px with 68.5061px line height; labels: Instrument Sans 14.9551px uppercase. +3. Use #d0ceca for the one call-to-action button, square corners, 64px tall. +4. Use thin vertical rules and a four-column grid. +5. Run `node web/scripts/verify-designs.mjs --slug=anuc-home` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/anytype/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/anytype/DESIGN.md new file mode 100644 index 0000000..5de9ae3 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/anytype/DESIGN.md @@ -0,0 +1,195 @@ +--- +version: alpha +name: Anytype +category: "Productivity & SaaS" +description: "Anytype (anytype.io), \"a safe haven for digital collaboration\": a stark black-and-white grid site. Riccionets serif display type from 88px to 120px with tight negative tracking, Inter 300 18px/26px body, a #000000 6px-radius Download button, 1px #5b5b5b grid lines on black bands, and #ff6a7b coral and #3cd9b3 mint accents." +colors: + canvas: "#ffffff" + page-largest: "#000000" + ink: "#000000" + primary: "#000000" + on-primary: "#ffffff" + ink-muted: "#808080" + ink-subtle: "#666666" + accent-mint: "#3cd9b3" + accent-coral: "#ff6a7b" + hairline: "#5b5b5b" +typography: + display: + fontFamily: riccionets, Helvetica, sans-serif + fontSize: 96px + fontWeight: 400 + lineHeight: 90px + letterSpacing: "-2.4px" + display-mobile: + fontFamily: riccionets, Helvetica, sans-serif + fontSize: 44px + fontWeight: 400 + lineHeight: 40px + letterSpacing: "-0.8px" + heading: + fontFamily: riccionets, Helvetica, sans-serif + fontSize: 88px + fontWeight: 400 + lineHeight: 76px + letterSpacing: "-2.4px" + subheading: + fontFamily: riccionets, Helvetica, sans-serif + fontSize: 120px + fontWeight: 400 + lineHeight: 100px + letterSpacing: "-3.2px" + body: + fontFamily: inter, Helvetica, sans-serif + fontSize: 18px + fontWeight: 300 + lineHeight: 26px + letterSpacing: "-0.28px" + button: + fontFamily: inter, Helvetica, sans-serif + fontSize: 14px + fontWeight: 500 + lineHeight: 20px + letterSpacing: "-0.12px" + nav: + fontFamily: inter, Helvetica, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 26px + letterSpacing: "-0.28px" + link: + fontFamily: inter, Helvetica, sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 26px + letterSpacing: "-0.28px" +rounded: + xs: 6px + sm: 16px +spacing: + s1: 1px + s2: 8px + s3: 10px + s4: 16px + s5: 18px + s6: 20px + s7: 32px + s8: 40px + s9: 48px + s10: 52px +components: + button-primary: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.xs}" + padding: 0px 16px + height: 36px + link: + textColor: "{colors.canvas}" + typography: "{typography.link}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.canvas}" + nav-link: + textColor: "{colors.canvas}" + typography: "{typography.nav}" + padding: 1px 0px 0px + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.ink-muted}" +--- + +# Anytype + +## Overview + +Anytype is a local-first, encrypted workspace for notes, chats and databases, and anytype.io (title "Anytype — A safe haven for digital collaboration") presents it as an editorial, almost print-like site. The page scrolls inside an inner container (9201px of content in a 2400px-tall window, 1280px wide). The structure is a ruled grid: sections are boxed by thin lines, and the page alternates pure white and pure black bands. + +The header is minimal: the lowercase "anytype" wordmark at the left, a centred announcement link ("Run your company on Anytype · Encrypted, Swiss-based, yours →"), a black "Download" button with an Apple logo and a two-line menu icon at the right. The hero sets "A safe haven" in a black sans beside "for digital collaboration" in large coral serif, next to a pixel-style black line illustration of a desktop (photo frame, calendar "31", smiling laptop, inbox tray). A soft peach-to-pink gradient glows at the hero's lower right. Below, a four-cell row reads "Private & Secure", "Offline & Online", "Work & Play" and a black "Watch Chat Introduction" video tile. + +The black band that follows is headed "discuss, organize, remember" in white serif, with three cells (Private Chats, Private Documents, Private Databases) that show dark UI fragments — chat bubbles, a "My Idea" page card, and a list of Pages / Lists / Tasks / Bookmarks rows — and a full-width "Read more" row. Later sections use very large serif statements ("Enjoy true privacy", "Never lose access", "Trust, not believe", "Compose beautifully", "Think Fast") beside sans-serif explanations, with a floating "WHAT / WHY / WHO" pill switcher. The voice is confident and principled. + +## Colors + +- **canvas `#ffffff`** — white bands and the header. +- **page-largest `#000000`** — the largest painted area (9529 vs 5211 for white): black feature bands, the testimonial band and the footer. +- **ink `#000000`** — text on white (1093 characters); white `#ffffff` is the most-read text overall (1234 characters) because of the black bands. +- **primary `#000000` / on-primary `#ffffff`** — the Download button. On hover its fill becomes `oklab(0 none none / 0.9)`, a 90% black. +- **accent-coral `#ff6a7b`** — the serif hero words "for digital collaboration" (26 characters). +- **accent-mint `#3cd9b3`** — a second accent used on 27 characters of text. +- **ink-muted `#808080`** — footer text and secondary copy on black (306 characters). +- **ink-subtle `#666666`** — secondary text on white (112 characters). +- **hairline `#5b5b5b`** — the most frequent border colour (9 elements), the grid lines; `#3c3c3c` is the darker line on black (4 elements). A translucent `#45434366` is measured as a small background area. + +The pastel glow in the hero and the colour in UI fragments (blue, indigo, green and orange icons) are imagery, not interface colours. The CSS declares `--swiper-theme-color: #007aff`, which is the Swiper library default and not a brand colour. + +## Typography + +Two self-hosted families, declared as `--font-primary: "inter", Helvetica, sans-serif` and `--font-secondary: "riccionets", Helvetica, sans-serif`. + +- **Riccionets 400** — the display serif, used only for very large statements (81 characters in total). Display: 96px / 90px with -2.4px tracking (the coral hero words). Heading: 88px / 76px, -2.4px ("discuss, organize, remember"). Statement: 120px / 100px, -3.2px ("Enjoy true privacy"). Line heights are below the font size, so stacked lines nearly touch. 80px with -5.2px and 88px with -5.2px are also measured. +- **Inter 300 / 400 / 500** — everything else (2717 characters). Body: 300, 18px / 26px, -0.28px (the most common size, 1380 characters). Nav: 400, 16px / 26px. Links: 400, 18px / 26px. Button: 500, 14px / 20px, -0.12px. Larger Inter sizes are measured too: 48px with -2.4px tracking (360 characters; the testimonial band headings measure 48px), 36px/-1.6px (500 weight, "Offline-first"), 28px/-0.64px and 22px/-0.48px. The hero's "A safe haven" is measured at 88px weight 300. + +Every size carries negative tracking. **Substitutes:** Riccionets is a custom face; a high-contrast serif such as Instrument Serif or Fraunces at 400 gives a similar feel. Inter is free. + +## Layout + +The page is a strict ruled grid inside a 16px outer margin: content runs from x=16 to x=1264, and boxes are separated by 1px lines (`#5b5b5b` on black, the same grey in the hero frame). The hero frame is a large box split into heading and illustration, over a row of four equal cells. The black feature band uses three columns with a full-width footer row. Later bands split 50/50 between a huge serif word and a sans explanation. The testimonial band measures six columns at its widest. + +Spacing is large and even. Gaps: 80px (most frequent), 16px, 120px, 8px. Paddings: 16px, 32px, 10px, 40px, 64px, 20px, 52px, 96px and section paddings of 124px–172px. The 120px statement block uses 80px 64px padding. The CSS declares `--offset-desktop: 16rem` and `--offset-mobile: 10rem`. + +## Elevation & Depth + +The site is flat. No box shadows were measured on rendered elements. Depth comes from the contrast between white and black bands and from the 1px grid lines. The only soft effect is the pastel gradient glow in the hero corner and the translucent grey floating switcher. The stylesheet's shadows (`0 1px 2px #00000026` and the `--plyr-*` range-thumb shadows) belong to the Plyr video player. + +## Shapes + +Shapes are square. Grid cells, bands and frames have 0px radius. Only two radii appear on rendered elements: 6px on the Download button and 16px (2 elements). The floating switcher is a rounded pill in the capture. The illustration style is black pixel-edged line art. The wordmark is lowercase "anytype" in a dark sans. + +## Components + +- **Download button** — `#000000` fill, white Inter 500 14px/20px with -0.12px tracking, 6px radius, 0px 16px padding, 36px tall, with an Apple logo; hover fill 90% black. +- **Announcement link** — centred in the header, Inter 14px black with an arrow. +- **Feature cell** — a ruled box with a centred Inter title ("Private & Secure") and three lines of centred copy. +- **Dark feature cell** — on black: a UI illustration at the top, a white Inter title ("Private Chats") and `#808080` copy. +- **List row** — dark rounded rows with a coloured icon, a white label and a chevron (Pages, Lists, Tasks, Bookmarks). +- **Read more row** — a full-width ruled cell with centred white Inter 18px text. +- **Statement block** — a Riccionets word set at 120px/100px beside a numbered step box and a sans heading. +- **Section switcher** — a floating translucent grey pill with "WHAT / WHY / WHO" uppercase labels. +- **Footer** — black, `#808080` Inter 14px/20px links (Download, Subscribe to updates, Anytype for Business, Use Cases…). + +## Design System Architecture + +No public Anytype marketing design system or brand page was found. https://anytype.io/press returned HTTP 404, and the anyproto GitHub organisation (https://github.com/anyproto) lists the clients (anytype-ts for desktop, anytype-swift for iOS) but no design-system, brand or UI-kit repository. The website's de-facto system is small and visible in its CSS: two font variables (`--font-primary` Inter, `--font-secondary` Riccionets), `--font-weight-thin: 100`, layout offsets (`--offset-desktop: 16rem`, `--offset-mobile: 10rem`), a Tailwind CSS base (`--default-transition-timing-function: cubic-bezier(.4,0,.2,1)`), Swiper for carousels and Plyr for video. Everything else is expressed directly: black and white bands, 1px grey rules, a single black button and two accent colours used sparingly in text. + +## Do's and Don'ts + +**Do** +- Alternate pure white and pure black bands and divide content with 1px grey rules. +- Set big statements in Riccionets at 88px–120px with line height below the size and negative tracking. +- Set all reading text in Inter 300 18px/26px with -0.28px tracking. +- Keep the only button black with a 6px radius. +- Use coral `#ff6a7b` (or mint `#3cd9b3`) for a single highlighted phrase. +- Illustrate with black pixel line art and dark UI fragments. + +**Don't** +- Don't add shadows or rounded cards; the grid is square and flat. +- Don't use Riccionets for body text or small headings. +- Don't use colour for buttons or backgrounds. +- Don't use positive letter-spacing. +- Don't treat the Swiper `#007aff` default as a brand colour. + +## Responsive Behavior + +The extractor's 390px mobile pass recorded: the coral hero words at Riccionets 44px / 40px with -0.8px tracking (328px wide), and the "discuss, organize, remember" heading at the same 44px / 40px. Body copy drops to Inter 300 16px / 24px with -0.2px tracking. The Download button is unchanged (black, 14px/20px, 6px radius, 0px 16px padding, 36px tall). The header measures 60px tall on mobile (80px on desktop) with "Download" as the only detected item. The layout probe recorded 1 visible header link on mobile and 2 on desktop, and a maximum of 1 card column on mobile versus 4 on desktop. Mobile font sizes measured: 16px, 14px, 28px, 18px, 22px, 44px, 40px and 64px. CSS breakpoints: 480px, 768px, 1024px, 1240px and 1440px. The arrangement of the grid lines at mobile width was not measured. + +## Iteration Guide + +1. Start with a white band framed by a 1px grey box, 16px from the viewport edge. +2. Pair a sans phrase with a Riccionets serif phrase in coral `#ff6a7b` at 96px/90px, beside black line art. +3. Add a row of equal ruled cells with centred Inter titles and short copy. +4. Follow with a black band: a white Riccionets 88px heading and three ruled dark cells with UI fragments, `#808080` copy and `#5b5b5b` lines. +5. Keep reading text Inter 300 18px/26px; keep every tracking value negative. +6. Use one black Download button (6px radius, 36px tall) as the only button style. +7. Space sections with 80px–120px gaps and finish on a black footer. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/aot/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/aot/DESIGN.md new file mode 100644 index 0000000..0729072 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/aot/DESIGN.md @@ -0,0 +1,181 @@ +--- +version: alpha +name: Airports of Thailand PLC (AOT) +category: "Thai Brands" +description: "Airports of Thailand PLC (AOT) English home: white canvas, navy #032d5d headings, royal-blue #2f4791 menu band and Search button, deep navy #182852 footer, Kanit and Noto Sans Thai type, navy news cards with 25px radius." +colors: + canvas: "#ffffff" + page-largest: "#182852" + ink: "#032d5d" + primary: "#2f4791" + on-primary: "#ffffff" + on-dark: "#f8fbff" + sky-light: "#a9d8f8" + sky-link: "#b4d6fa" + ink-black: "#000000" + text-input-text: "#555555" +typography: + display: + fontFamily: "\"Noto Sans Thai\", sans-serif" + fontSize: 20px + fontWeight: 600 + lineHeight: 20px + display-mobile: + fontFamily: "\"Noto Sans Thai\", sans-serif" + fontSize: 22px + fontWeight: 600 + lineHeight: 22px + heading: + fontFamily: "\"Noto Sans Thai\", sans-serif" + fontSize: 15px + fontWeight: 600 + lineHeight: 18px + subheading: + fontFamily: "\"Noto Sans Thai\", sans-serif" + fontSize: 20px + fontWeight: 500 + lineHeight: 24px + body: + fontFamily: Kanit, sans-serif + fontSize: 14px + fontWeight: 300 + lineHeight: 23.925px + button: + fontFamily: Poppins, Kanit, system-ui, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 16px + nav: + fontFamily: Kanit, sans-serif + fontSize: 14.5px + fontWeight: 400 + lineHeight: 23.925px + input: + fontFamily: Poppins, Kanit, system-ui, sans-serif + fontSize: 15px + fontWeight: 400 + lineHeight: 15px +rounded: + xs: 3px + sm: 25px + md: 100px + none: 0px + pill: 9999px +spacing: + s1: 5px + s2: 5.6px + s3: 6px + s4: 8px + s5: 9px + s6: 10px + s7: 11px + s8: 12px + s9: 14px + s10: 16px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.none}" + padding: 0px 16.6667px + height: 50px + link: + textColor: "{colors.canvas}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + nav: + textColor: "{colors.canvas}" + rounded: "{rounded.none}" + nav-link: + textColor: "{colors.canvas}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + text-input: + textColor: "{colors.text-input-text}" + typography: "{typography.input}" + rounded: "{rounded.xs}" + padding: 0px 16.6667px + height: 50px + card: + backgroundColor: "{colors.ink}" + textColor: "{colors.on-dark}" + rounded: "{rounded.sm}" + boxShadow: rgba(0, 0, 0, 0.15) 0px 0px 10px 0px + footer: + backgroundColor: "{colors.page-largest}" + textColor: "{colors.canvas}" + rounded: "{rounded.none}" +--- + +## Overview + +The measured page is the English home of Airports of Thailand PLC (airportthai.co.th/en/homeen/), 1280px wide and 2007px tall, with the document language en-GB. The header is a thin deep-navy utility strip (Sitemap, Web Accessibility, Contact Us and a Thai/English language switch), then a white row with the AOT logo, the company name "Airports of Thailand PLC" with its Thai name beside it, and a search field with a royal-blue "Search" button. Underneath is a full-width royal-blue menu band with two rows of items and dropdown carets (Our Airports, About AOT, Good Corporate Governance, Transparency (ITA), Business & Sustainability, News & Activities, Services & Participation, Investor Relations). A wide hero photograph of Suvarnabhumi Airport at dusk follows, then a row of six rounded-square airport thumbnails with underlined three-letter codes (BKK, DMK, HKT, CNX, CEI, HDY) and airport names, a "NEWS UPDATES" block of navy cards with underlined titles and monospaced dates, and a deep-navy footer with four columns (company description, contact, quick links, website information) and a copyright line. + +The page is a government-company information portal: dense, blue throughout, underlined links, and utility-first. Two overlays are present in the capture, a floating "Light" theme-switch button at the left and an accessibility icon at the top right; they are third-party widgets and are not described as brand UI in this file. + +## Colors + +`canvas` is {colors.canvas} (#ffffff). The two navies carry the page: `page-largest` {colors.page-largest} (#182852) is the footer and utility strip and has the largest background area (weight 783), and `ink` {colors.ink} (#032d5d) is both the heading text color and the background of the news cards. `primary` {colors.primary} (#2f4791) is the royal blue of the menu band and the Search button; `on-primary` is white. `on-dark` (#f8fbff) is the near-white text on navy, `sky-light` (#a9d8f8) is used for dates and copyright text on navy, and `sky-link` (#b4d6fa) for light link text. `ink-black` is #000000. The extractor also recorded #666e8b (36 characters of footer-adjacent text), #cc3366 (15 characters), and #216073, #232323 and #f1f2f3 as small-area backgrounds; they are measured but not promoted to tokens. The stylesheet carries a WordPress design-system variable set (`--wpds-color-*`, for example #e6eaf4 for a weak brand active background and #470000 for an error foreground) and a gradient variable `--eb-gradient-primary-color`; these are WordPress/plugin defaults and are not documented as AOT brand colors. + +## Typography + +Fonts in the measured page: Kanit (loaded at 300, 400, 500), Poppins (400), IBM Plex Mono (400, 500), and Noto Sans Thai, with Montserrat and Font Awesome 5 appearing in the CSS corpus. By characters Kanit carries 789, Noto Sans Thai 565, the system stack 78 and IBM Plex Mono 76. + +- `display` (the h1, "BKK"): Noto Sans Thai 600, 20px, 20px line height. +- `heading` (h2, airport names): Noto Sans Thai 600, 15px, 18px line height. +- `subheading`: Noto Sans Thai 500, 20px, 24px line height. +- `body`: Kanit 300, 14px, 23.925px line height. +- `nav`: Kanit 400, 14.5px, 23.925px line height. +- `button`: Poppins 400, 16px, 16px line height. +- `input`: Poppins 400, 15px, 15px line height. + +IBM Plex Mono is used for the small spaced labels ("CONTACT AOT", "QUICK LINKS", "WEBSITE INFORMATION") and for the card dates. The type scale is small: the "display" token is only 20px, since the page's largest text is the airport codes and the company name rather than a marketing headline. All fonts are web fonts loaded by the site. + +## Layout + +A full-width 1280px page with a roughly 1200px content width (the copyright line block measures 1200px wide). The menu band spans the container, the hero is a single wide photograph, and the airport row is six equal columns. News cards sit in a masonry-like arrangement of varying heights (three cards in the capture, of different lengths). Spacing values measured are 5, 5.6, 6, 8, 9, 10, 11, 12, 14 and 16px, a small-step set. The Search button and text input are 50px tall with 0px 16.6667px padding. + +## Elevation & Depth + +Shadows exist but are light: `0 0 10px rgb(0 0 0 / .1)` (14 uses), `0 .2rem .2rem rgba(0,0,0,.2)` (15), `0 2px 20px 0 rgb(0 0 0 / .07)` (12) and a stronger `rgba(50,50,93,.25) 0 6px 12px -2px, rgba(0,0,0,.3) 0 3px 7px -3px` (8); 50 declarations use no shadow. The navy news cards carry `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px`. The page otherwise separates areas with solid color blocks of navy, royal blue and white. + +## Shapes + +Measured radii in the CSS are 4px (66 uses), 2px (62), 5px (57), 10px (42), 25px (37), 3px (30), 20px (25) and larger. The Search button is square (0px) and the text input uses {rounded.xs} (3px); the news cards use {rounded.sm} (25px); airport thumbnails are rounded squares in the capture. The menu band, footer and header are square-cornered. + +## Components + +- `button-primary`: {colors.primary} fill, white text, Poppins 400 at 16px, square corners, 50px tall, padding 0px 16.6667px ("Search"). +- `text-input`: Poppins 15px, color #555555, 3px radius, 50px tall, same horizontal padding. +- `card` (news): {colors.ink} fill, {colors.on-dark} text, 25px radius, shadow `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px`, an underlined title, a hairline rule and a mono date in {colors.sky-light}. +- `nav-link`: white Kanit 14.5px on the {colors.primary} band, each item with a dropdown caret. +- `footer`: {colors.page-largest} with white text and a 1px #ffffff38 rule above the copyright line. + +The generated secondary button (a "Light" theme switch with #eeeeee fill, #dddddd border and a heavy shadow) was removed because it belongs to a third-party widget. + +## Design System Architecture + +No AOT design-system or brand-guidelines page is linked from the home page that was opened, so the system is de facto. The site is a WordPress build: its root declares WordPress Design System tokens (`--wpds-*`) and `--wp--preset--*` variables (for example `--wp--preset--font-size--large: 36px`), plus plugin icon fonts (`trx_addons_icons`, Font Awesome 5). The AOT-specific look is expressed by the navy and royal-blue colors listed above applied through theme CSS. Source: the page at [airportthai.co.th](https://www.airportthai.co.th/en/homeen/). + +## Do's and Don'ts + +- Do use {colors.primary} for the main menu band and the single primary action, and {colors.page-largest} for the footer and utility strip. +- Do set small spaced mono labels (IBM Plex Mono) above link columns. +- Do keep body copy in Kanit 300 at 14px with a 23.925px line height. +- Do round news cards at 25px and keep action buttons square. +- Don't use the WordPress default tokens as brand colors. +- Don't document the theme-toggle or accessibility widgets as components. +- Don't promote the display size above what the page measures; the h1 is 20px. + +## Responsive Behavior + +Measured at 390px: the h1 is 22px with 22px line height, the h2 is 15px with 24px line height and 0.2px letter spacing, and the "Search" button keeps the same fill, 16px type and square corners. The extractor recorded no navigation-toggle or column-count data for mobile, so menu behavior and the six-column airport row at that width are not measured. + +## Iteration Guide + +1. Use white ground, #032d5d for headings, #2f4791 for the menu band and the Search button, #182852 for the footer. +2. Set body in Kanit 300 14px, headings in Noto Sans Thai 600, labels in IBM Plex Mono. +3. News cards: #032d5d, 25px radius, light shadow, underlined title. +4. Keep buttons square, 50px tall. +5. Run `node web/scripts/verify-designs.mjs --slug=aot` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ap-property-perfect/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ap-property-perfect/DESIGN.md new file mode 100644 index 0000000..5e285a2 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ap-property-perfect/DESIGN.md @@ -0,0 +1,154 @@ +--- +version: alpha +name: Property Perfect +category: "Thai Brands" +description: "Property Perfect (pf.co.th) residential developer site, Thai-language, set in aktiv-grotesk-thai 400/500/700 with navy #003767 / #004b8d headings and actions on a white #ffffff canvas, corner-cut radii (single rounded top-left corner of 10px to 14px) and a red #ee2e24 hotline pill." +colors: + canvas: "#ffffff" + page-body: "#fefefe" + ink: "#000000" + primary: "#004b8d" + on-primary: "#ffffff" + surface-subtle: "#f8f8f8" + navy: "#003767" + ink-navy: "#003768" + ink-muted: "#394550" + accent-red: "#ee2e24" +typography: + display: + fontFamily: aktiv-grotesk-thai, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 28px + fontWeight: 700 + lineHeight: 42px + display-mobile: + fontFamily: aktiv-grotesk-thai, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 24px + fontWeight: 700 + lineHeight: 36px + body: + fontFamily: aktiv-grotesk-thai, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 27.2px + button: + fontFamily: aktiv-grotesk-thai, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 20px + fontWeight: 400 + lineHeight: 28px + nav: + fontFamily: aktiv-grotesk-thai, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 18px + fontWeight: 400 + lineHeight: 30.6px +rounded: + xs: 2px + sm: 10px + md: 14px + lg: 22px + xl: 24px + 2xl: 50px + 3xl: 100px + none: 0px +spacing: + s1: 1px + s2: 4px + s3: 6px + s4: 8px + s5: 10px + s6: 16px + s7: 20px + s8: 24px + s9: 30px + s10: 32px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.none}" + height: 56px + link: + textColor: "{colors.navy}" + typography: "{typography.nav}" + rounded: "{rounded.none}" + nav-link: + textColor: "{colors.navy}" + typography: "{typography.nav}" + rounded: "{rounded.none}" +--- + +## Overview + +Property Perfect presents itself as a calm, navy-and-white residential brand. The measured homepage (https://www.pf.co.th/th/home, 1280px desktop pass, 6861px tall) opens with a transparent header over a hero image, followed by alternating half-width photographs and short Thai text blocks. The page title reads "บ้านเดี่ยว บ้านใหม่ คอนโด ทาวน์โฮม หลากหลายทำเล | Property Perfect". The capture shows the logo as a navy rectangle carrying the white "PROPERTY PERFECT" wordmark with a red underline, so navy and a single red accent are the identity pair on the page. + +Photography is lifestyle-led: couples walking or sitting in landscaped estates, a white circular pavilion by a water feature, a windmill-roofed house, resort and mountain-lake aerials, and a clock-tower shophouse block. Photographs are full-bleed halves of a two-column row, not framed cards, which keeps the page airy against the white canvas. Project names appear as grey wordmark logos in a grid (PENTON, LAKE LEGEND, SIGNATURE, PERFECT MASTERPIECE, VAVILA, LAKE VILLA, PERFECT PLACE, Park, LAKE FOREST, MODI VILLA), so each sub-brand keeps its own mark while the parent supplies the frame. + +The microcopy voice is warm and service-oriented Thai: "โครงการเพื่อคุณจากพร็อพเพอร์ตี้ เพอร์เฟค" (projects for you from Property Perfect) and "เลือกโครงการบ้านที่ใช่ ตอบโจทย์ทุกไลฟ์สไตล์ของคุณ" (choose the home that fits every lifestyle). The primary call to action in the extraction is "ดูโครงการทั้งหมด" (view all projects). The capture also contains a cookie notice with an accept button and a floating "ติดต่อเรา" chat pill; both are site utilities, not brand components, and no tokens are derived from them. + +The hero area in the capture is blank white under a grey top gradient, so no hero imagery or hero headline was measured; this document does not describe it. + +## Colors + +The extraction records a white #ffffff canvas and a #fefefe body background. The most-read text color is black #000000, followed by two navies that differ by one unit, #003768 and #003767, then a slate #394550 and white #ffffff. Background area is dominated by #ffffff, with #f8f8f8 as a faint panel tone, #003767 as a navy block color, #457b9d and #004b8d in small amounts, and #ee2e24 in the smallest amount. + +- **Primary navy #004b8d** is the measured fill of the detected primary button ("ดูโครงการทั้งหมด", white text #ffffff) and also appears as a 1px border on that button. +- **Navy #003767 / ink-navy #003768** carry headings, the outlined "รายละเอียด" button (text and 1px border #003767), nav links and body copy in the intro paragraphs. They are the dominant brand ink after black. +- **Ink #000000** is used for h3 project names such as "เบลล่า เดล มอนเต้ เขาใหญ่". +- **Ink-muted #394550** is a secondary slate text color measured at 531 characters. +- **Accent red #ee2e24** is the fill of a pill link labelled "1375" (white text, 24px radius, 16px/600 text), the hotline number. +- **Surface-subtle #f8f8f8** is a light panel background. + +Hover is measured only on navigation links: the border color moves from #003767 to #004f93 (rgb(0, 79, 147)) and the text from white to #dbdbdb (rgb(219, 219, 219)). The swiper library's default #007aff in rootVars is a framework default and is not a brand color. + +## Typography + +The only family loaded is **aktiv-grotesk-thai** in 400, 500 and 700, with a long system fallback stack (-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif). It is a grotesque with Thai support; if it is unavailable, a neutral Thai-capable sans such as Noto Sans Thai is the closest substitute for the proportions seen in the capture. + +The extractor's own h1 pick ("บ้านเดี่ยว", 20px) is a tab label, so the display role uses the real section heading (h2) instead: 28px, weight 700, line-height 42px on desktop, and 24px / 36px at the 390px mobile pass. Body is 16px / 400 / 27.2px. Buttons use 20px / 400 / 28px. Navigation links are 18px / 400 / 30.6px. The most frequent sizes by character count are 16px (1239), 18px (299), 14px (245), 20px (167) and 28px (161); weights in use are 700 (1205), 400 (1136), 500 (332) and 600 (69). No letter-spacing or text-transform was recorded, so Thai text is set at normal tracking and case. + +## Layout + +The desktop pass is 1280px wide with 21 header links visible and up to six card columns. Rows alternate image-left and image-right at half width each, with the text block centered vertically in its half and left-aligned. Category filter chips ("บ้านเดี่ยว", "ทาวน์โฮม", "คอนโดมิเนียม", "รีสอร์ท เรสซิเดนซ์", "อาคารพาณิชย์") sit under the second heading as outlined pills, with the active chip filled navy. Spacing values in the extraction are 1, 4, 6, 8, 10, 16, 20, 24, 30 and 32px; gaps seen are 8px (33 occurrences), 32px, 24px and 16px; paddings include 16px, 48px, 24px, 72px and 30px. Navigation has 24px vertical padding and a measured height of 90px. + +## Elevation & Depth + +The page is almost flat. The only recorded box-shadow is a fully transparent rgba(0, 0, 0, 0) 0px 3px 3px 0px on the nav, so there is no visible elevation system. Depth comes from photography and from the grey gradient at the top of the capture, which is a header scrim over the hero and is not a token. Separation between sections is by background change (#ffffff to #f8f8f8) and by whitespace. + +## Shapes + +Corners are mostly square, with a distinctive one-corner treatment. The measured primary anchor has radius 0px, while a button element carries "14px 0px 0px" (only the top-left corner rounded) and the outlined button "10px 0px 0px". The border-radius census lists 0px 0px 6px, 10px 0px 0px, 22px, 2px, 14px 0px 0px, 24px, 100px and 50px. Full pills (50px to 100px) appear on filter chips and the red hotline link. Borders are thin: #003767 (8 uses), #003768, #eaeaea and #004b8d at 1px. + +## Components + +- **button-primary**: fill #004b8d, white text, 20px / 400, height 56px, radius 0 on the anchor form; the button-element variant measured 16px 48px 10px padding, 1px solid #004b8d and a top-left radius of 14px. +- **Outlined button** ("รายละเอียด"): 15px / 400 text in #003767, 1px solid #003767, 10px 16px 6px padding, height 39px, top-left radius 10px. +- **Navigation**: link text 18px / 400 in #003767 on the white header; hover shifts the border to #004f93 and the text to #dbdbdb. A search icon and a language globe sit at the right end of the header in the capture. +- **Filter chips**: outlined pills in navy; the active one is filled navy with white text. +- **Hotline pill**: #ee2e24 fill, 24px radius, 8px 16px padding, 16px / 600 white text. + +## Design System Architecture + +No public design-system or brand-guideline page was opened for Property Perfect, and the research record in SOURCES.json is {none:true}. The de-facto system visible in the shipped page is: one web-font family (aktiv-grotesk-thai), a Font Awesome 6 icon stack declared in :root (--fa-font-* variables), and the Swiper carousel library (--swiper-navigation-size 44px, --swiper-theme-color #007aff, a library default). Brand colors are not exposed as CSS custom properties in :root; they were measured from computed styles, so any rebuild should treat the navy pair #003767 / #003768, #004b8d and #ee2e24 as measured constants. + +## Do's and Don'ts + +- Do use navy (#003767 / #003768) for headings and #004b8d for filled actions on white. +- Do pair large lifestyle photography with short Thai copy in alternating halves. +- Do keep the red #ee2e24 for the hotline pill only. +- Do round a single top-left corner (10px to 14px) on buttons when echoing the brand's corner-cut style. +- Don't introduce additional saturated hues; the extraction shows only navy, slate, red and neutrals. +- Don't use the Swiper default #007aff or browser default link blues as brand colors. +- Don't treat the cookie banner or the floating chat pill as part of the component library. + +## Responsive Behavior + +Measured at the 390px mobile pass: the section heading drops to 24px / 36px, body stays 16px / 27.2px, the primary button becomes 16px / 22.4px with height 45px and width 208px, a "Toggle Menu" control is visible, 16 header links are counted, and the maximum card columns fall from 6 to 2. The mobile nav measured 20px / 700 text with 16px 0px padding and height 60px. Tablet breakpoints, hover on touch and dark mode were not measured. + +## Iteration Guide + +1. Start from white #ffffff, set headings in aktiv-grotesk-thai 700 at 28px / 42px in #003768. +2. Build the primary action as #004b8d with white 20px text and 56px height. +3. Add outlined secondary actions in #003767 with a 1px border and a 10px top-left radius. +4. Alternate half-width photographs with text blocks; keep project wordmarks grey and uniform. +5. Verify mobile at 390px: 24px headings, two card columns, menu toggle visible. +6. Re-measure any new section before adding tokens; do not extend the palette from screenshots. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/ap-thailand/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/ap-thailand/DESIGN.md new file mode 100644 index 0000000..f3ac425 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/ap-thailand/DESIGN.md @@ -0,0 +1,180 @@ +--- +version: alpha +name: AP Thai +category: "Thai Brands" +description: "AP Thai (AP Thailand) Thai-language home: white canvas with #f5f5f7 bands, AP typeface, brand red #921d1e pill buttons at 9999px radius, 36px-radius project cards, gray #6b6b70 body text, warm #f5f0ea section surfaces, real-estate listings." +colors: + canvas: "#ffffff" + page-largest: "#f5f5f7" + ink: "#6b6b70" + primary: "#921d1e" + on-primary: "#ffffff" + surface-warm: "#f5f0ea" + ink-strong: "#000000" + ink-deep: "#222229" + price-red: "#c81e1e" + hairline: "#ededf1" + button-secondary-bg: "#921c1e" + card-border: "#00000014" +typography: + display: + fontFamily: AP, ui-sans-serif, system-ui, Arial, sans-serif + fontSize: 36px + fontWeight: 500 + lineHeight: 56px + display-mobile: + fontFamily: AP, sans-serif + fontSize: 32px + fontWeight: 700 + lineHeight: 40px + heading: + fontFamily: AP, ui-sans-serif, system-ui, Arial, sans-serif + fontSize: 30px + fontWeight: 400 + lineHeight: 45px + subheading: + fontFamily: AP, ui-sans-serif, system-ui, Arial, sans-serif + fontSize: 16px + fontWeight: 700 + lineHeight: 20px + body: + fontFamily: AP, ui-sans-serif, system-ui, Arial, sans-serif + fontSize: 12px + fontWeight: 400 + lineHeight: 16px + button: + fontFamily: AP, ui-sans-serif, system-ui, Arial, sans-serif + fontSize: 20px + fontWeight: 500 + lineHeight: 20px + nav: + fontFamily: AP, ui-sans-serif, system-ui, Arial, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + button-secondary: + fontFamily: AP, ui-sans-serif, system-ui, Arial, sans-serif + fontSize: 14px + fontWeight: 500 + lineHeight: 20px +rounded: + xs: 4px + sm: 10px + md: 16px + lg: 24px + xl: 25.4px + 2xl: 26px + 3xl: 28px + 4xl: 36px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 6px + s4: 7px + s5: 8px + s6: 10px + s7: 12px + s8: 16px + s9: 20px + s10: 24px +components: + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-strong}" + rounded: "{rounded.4xl}" + borderColor: "{colors.card-border}" + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 0px 16px + height: 40px + boxShadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(196, 82, 77, 0.3) 0px 4px 15px 0px + button-secondary: + backgroundColor: "{colors.button-secondary-bg}" + textColor: "{colors.page-largest}" + typography: "{typography.button-secondary}" + rounded: "{rounded.pill}" + padding: 10px 0px + height: 40px + link: + textColor: "{colors.ink-strong}" + typography: "{typography.nav}" +--- + +## Overview + +The measured page is apthai.com/th, the Thai-language home of AP (Thai) Public Company, a residential developer (house, townhome and condominium projects). The page is 1280px wide and 7773px tall. A consent dialog, scrim and promotional pop-up were present in the first capture; the extractor's second run hid them (it records `consentOverlaysHidden: scrim body`), so the values below come from the underlying page. From the top: a header with a menu button, the AP logo and an AI-assistant prompt "อยากได้บ้านแบบไหน...พิมพ์บอกเราที่นี่" with a search field and a red "ถามมาได้เลย" button; a large promotional hero ("LEADER'S DEAL No.1" with price call-outs); a deep-red "AP CODE" band ("หลักการ และ มาตรฐาน ในการทำงานแบบ AP") with a white "ดูเพิ่มเติม" button; the headline "AP ครบจบทุกความต้องการ / บ้านเดี่ยว ทาวน์โฮม หรือคอนโด" above pill-shaped filter tabs (โครงการใหม่, โครงการพร้อมอยู่, โครงการใกล้ฉัน, ใกล้รถไฟฟ้า, ใกล้ทางด่วน, ลงทุนปล่อยเช่า, ครอบครัว); a row of project cards (THE CITY, LIFE, ASPIRE, CENTRO and others) each with a rounded photo, project name, location, a red price line, three small icon-led facts, a red "ดูข้อมูลโครงการ" pill and a green LINE button; then a lifestyle section with arch-topped photographs, a promotions slider, a blog row and a mega-footer of project links. + +It is a busy, commercial property portal. Red is the one brand color, softened by pale gray and cream surfaces and generous rounded photography. + +## Colors + +`canvas` is {colors.canvas} (#ffffff). `page-largest` ({colors.page-largest}, #f5f5f7) is the largest background area (weight 2930), and `surface-warm` (#f5f0ea) is a cream band (991). A further cream (#f8f7f3) is measured with weight 513 and is not tokenized. `primary` is {colors.primary} (#921d1e, a deep red) with white text; a nearly identical #921c1e (`button-secondary-bg`) fills the secondary buttons. The measured text colors are `ink` #6b6b70 for most body text (4259 characters), `ink-strong` #000000 for headings and names, `ink-deep` #222229, `price-red` #c81e1e for the price lines, and #111827 and #333333cc in small amounts. `hairline` is #ededf1 and `card-border` is a 8%-alpha black (#00000014). Consent-dialog backgrounds (#00000080 scrim, #000000bf) are not brand colors and are not tokenized. The stylesheet declares Swiper's default theme color #007aff (`--swiper-theme-color`), which is a library default and is not used as a brand color here. + +## Typography + +One proprietary family, "AP", is loaded at weights 400, 500 and 700; the stack is `AP, ui-sans-serif, system-ui, Arial, sans-serif`. + +- `display` (h1): AP 500, 36px, 56px line height. +- `heading` (h2): AP 400, 30px, 45px line height. +- `subheading`: AP 700, 16px, 20px line height. +- `body`: AP 400, 12px, 16px line height (the card facts; 14px body at 20px line height is measured on paragraph text). +- `nav`: AP 400, 16px, 24px line height. +- `button`: AP 500, 20px, 20px line height; `button-secondary` 14px, weight 500. + +By characters, 12px dominates (4253), then 16px, 14px, 18px and 36px. The site specifies no substitute beyond the system stack. Display and heading line heights are 1.56 (56px on 36px) and 1.5 (45px on 30px) of the font size. + +## Layout + +The page uses a centered container with a tab row, a four-up card row and full-bleed promotional bands. Spacing values measured are 2, 4, 6, 7, 8, 10, 12, 16, 20 and 24px. Project cards are four equal columns, each a white rounded card with a photograph filling the top. The red AP CODE band and the footer span the whole width. Section backgrounds alternate between #f5f5f7, white and cream. + +## Elevation & Depth + +Cards are almost flat: a hairline border of #00000014 and a very light surface, with 4 shadow declarations of a soft red glow (`0 0 20px 4px #eb827880, 0 0 8px 2px #eb827859`). The Tailwind ring placeholders account for 66 of the shadow declarations and resolve to no visible shadow. The primary button has a tinted shadow `rgba(196, 82, 77, 0.3) 0px 4px 15px 0px` (measured on the "ถามมาได้เลย" button). + +## Shapes + +Shape is the signature: pill buttons and tabs (9999px, 40 uses), very round cards (36px, 15 uses, the `4xl` radius), and 4px, 16px, 24px and 32px radii elsewhere. Photographs inside cards are rounded to match; the lifestyle row uses arch-topped photographs. The secondary white button "ดูเพิ่มเติม" is the exception, with a 4px radius in the hover capture. + +## Components + +- `button-primary`: {colors.primary} fill, white AP 500 20px text, pill (9999px), 40px tall, padding 0px 16px, with the tinted shadow above. +- `button-secondary`: {colors.button-secondary-bg} fill, {colors.page-largest} text, AP 500 14px, pill, 40px tall, used as "ดูข้อมูลโครงการ" on cards. +- `card`: white fill, {colors.card-border} border, 36px radius, project photo, bold name (AP 700), location line, price in {colors.price-red}, icon-led facts at 12px. +- Filter tabs: pill outlines with a small icon; the active tab is red-outlined with a red label. +- `link`: {colors.ink-strong} AP 400 16px. + +The generated nav and nav-link tokens (white text with a transform matrix) were dropped because they describe the hidden mobile-menu overlay, and the generated card textColor (white on white) was replaced with {colors.ink-strong}, a measured heading color. + +## Design System Architecture + +No public design-system or brand-guideline page was found from the opened home page. The site is a Tailwind build (`--tw-*` variables) with Swiper sliders (`--swiper-navigation-size: 44px`). The brand look is carried by the custom AP typeface, the red #921d1e and the pill and 36px radius shapes. The AP CODE band shows the brand's own sub-identity ("THE CODE OF Living Quality"). Source: [apthai.com/th](https://www.apthai.com/th). + +## Content and Imagery + +The imagery is architectural and aspirational: rendered facades of detached houses and condominium towers, a pool-and-landscape aerial view of a project, a couple signing keys, and family scenes in a street of houses. Photographs are cropped with large radii inside cards and with arch-topped masks in the lifestyle row. Promotional banners are illustrated and bright red with gold numerals. Microcopy is Thai and direct: a question as the page prompt ("อยากได้บ้านแบบไหน"), prices stated as "ราคา" or "เริ่มต้น" with the amount in million baht, and a green LINE shortcut on every card for chat contact. + +## Do's and Don'ts + +- Do use the deep red #921d1e for the one primary action per section and for prices in #c81e1e. +- Do use pills for buttons and filters, and 36px for cards. +- Do keep body copy gray #6b6b70 and names black. +- Do use soft pale gray and cream bands to separate sections. +- Don't use the consent dialog's dark scrim or its buttons as brand components. +- Don't use the library blue #007aff. +- Don't use sharp corners on cards or main buttons. + +## Responsive Behavior + +Measured at 390px: the largest text is the 32px, weight 700 AI-prompt line "อยากได้บ้านแบบไหน...พิมพ์บอกเราที่นี่" (40px line height, color #222229); the AP CODE h2 drops from 30px to 24px (28.8px line height); body text is 14px on 20px line height in black. Navigation behavior, the card column count and spacing at mobile width were not measured in structured form. + +## Iteration Guide + +1. White and #f5f5f7 grounds; body #6b6b70; names #000000. +2. Primary: #921d1e pill, 40px tall, AP 500 20px, soft red shadow. +3. Cards: 36px radius, #00000014 border, red price line. +4. Headings in AP 500 36px / 30px with 1.5 line height for Thai. +5. Run `node web/scripts/verify-designs.mjs --slug=ap-thailand` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/apechain/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/apechain/DESIGN.md new file mode 100644 index 0000000..7c459f5 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/apechain/DESIGN.md @@ -0,0 +1,165 @@ +--- +version: alpha +name: ApeChain +category: "Tech & AI" +description: "ApeChain: electric blue #0054fa hero, pale sky canvas #e2f0ff, midnight #030a21 page band, manuka condensed uppercase display (120px hero), DM Sans body 16px, DM Mono 12px uppercase buttons with 16px radius and gradient outlines." +colors: + canvas: "#e2f0ff" + page-body: "#030a21" + ink: "#000000" + primary: "#0054fa" + on-primary: "#000000" + on-dark: "#ffffff" + button-ghost-fill: "#0000001a" +typography: + display: + fontFamily: manuka, "manuka Fallback" + fontSize: 32px + fontWeight: 400 + lineHeight: 35.84px + textTransform: uppercase + heading: + fontFamily: manuka, "manuka Fallback" + fontSize: 26px + fontWeight: 500 + lineHeight: 20.41px + textTransform: uppercase + body: + fontFamily: dmSans, "dmSans Fallback" + fontSize: 16px + fontWeight: 400 + lineHeight: 20.8px + letterSpacing: 0.24px + button: + fontFamily: "\"DM Mono\", \"DM Mono Fallback\"" + fontSize: 12px + fontWeight: 500 + lineHeight: 12px + letterSpacing: 1.2px + textTransform: uppercase +rounded: + xs: 2px + sm: 8px + md: 16px + pill: 9999px +spacing: + s1: 1px + s2: 5px + s3: 6px + s4: 8px + s5: 15px + s6: 16px + s7: 24px + s8: 28.44px + s9: 32px + s10: 44px +components: + button-primary: + backgroundColor: "{colors.button-ghost-fill}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.md}" + height: 42px + button-primary-hover: + textColor: "{colors.on-dark}" + button-secondary: + backgroundColor: "{colors.button-ghost-fill}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.md}" + height: 42px + link: + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.md}" + nav: + backgroundColor: "{colors.button-ghost-fill}" + textColor: "{colors.on-dark}" + padding: 24px + nav-link: + textColor: "{colors.ink}" + typography: "{typography.body}" + footer: + textColor: "{colors.on-dark}" +--- + +## Overview + +apechain.com is the home of ApeChain, a blockchain ecosystem; the measured page is 1280px wide and 4110px tall. The header holds a boxed uppercase logotype at left and a four-item condensed menu (EXPLORE, LEARN, BUILD, BRIDGE; the active item is brighter). The first screen is a saturated electric-blue field with a huge white condensed word ("BRIDGE") and a faint contour-line pattern; below it a dark blurred image band; then a pale-blue section titled "ApeChain Spotlight — WHERE DAPPS SHINE & YOU WIN" with explanatory paragraphs, two outlined buttons (GET STARTED, GO SPOTLIGHT) and a tilted dark card for a featured app (Clutch Markets); then an "ApeChain Apps" grid of dark rounded app cards with category chips (GAMES, INTELLECTUAL PROPERTY, COLLECTIBLES, FINANCE, INFRASTRUCTURE) and a "SEE ALL APPS" link. The app list on the page links to /apps/otherside, /apps/camelot, /apps/made-by-apes, /apps/ape-portal, /apps/clutch-market and others. + +The tone is loud and playful-technical: oversized condensed type, saturated blue, mono micro-labels, and emoji in the body copy. Web3 jargon appears in uppercase mono labels while longer copy is set in a friendly sans. + +## Colors + +Three surfaces alternate. `page-body` ({colors.page-body}, #030a21) is a deep navy that covers the most area (weight 5120); `canvas` ({colors.canvas}, #e2f0ff) is a pale sky blue (4338); and `primary` ({colors.primary}, #0054fa) is the electric blue of the hero (1201) and of the accent text (236 characters). Text is `ink` #000000 on the pale canvas (916 characters) and `on-dark` #ffffff on navy and blue (1107 characters). Buttons are transparent-black fills at 10% (`button-ghost-fill`, #0000001a) with black text, which turns white on hover (measured: "GET STARTED" goes from rgb(0,0,0) to rgb(255,255,255), and the border follows). A white-at-30% overlay (#ffffff4d) is also measured for chips. + +The page uses full-spectrum gradients as outlines around buttons and cards (pink-to-blue strokes appear in the capture), but only the solid colors above are measured as values, so the gradient hues are not listed. + +## Typography + +Three families are loaded: "manuka" (rendered as a tall condensed face in the capture), "dmSans" (400 and 700) and "DM Mono" (400), each with a "Fallback" metrics face. + +- `display`: manuka 400, 32px, 35.84px line height, uppercase (the h1 text on the measured page). +- `heading`: manuka 500, 26px, 20.41px line height, uppercase. +- `body`: dmSans 400, 16px, 20.8px line height, 0.24px letter spacing. +- `button`: DM Mono 500, 12px, 12px line height, 1.2px letter spacing, uppercase. + +By characters, DM Mono carries 924, manuka 720 and dmSans 615. By size, 12px dominates (963), then 16px (576), then 120px (508, the oversized hero word), 48px (141), 26px and 32px. The 120px and 48px sizes are measured but not part of the token set. The font files are the site's own; no external substitute is documented. + +## Layout + +The page uses a six-column grid (`--container-nb-columns: 6`) with a gutter of 0.5rem, container margin of 6.153846vw and a container max width of 87.6923vw; column width is computed from the viewport. Section widths therefore scale with the viewport rather than snapping at fixed widths. The app grid is a mosaic of tall and square cards of varied size that bleeds off the right edge. Spacing values measured: 1, 5, 6, 8, 15, 16, 24, 28.44, 32 and 44px. + +## Elevation & Depth + +No real shadows: the 8 non-"none" declarations are Tailwind ring placeholders that resolve to nothing. Depth is made with color planes, a tilted 3D-looking featured card, translucent overlays and blurred imagery, and by dark rounded cards sitting on the pale-blue canvas. + +## Shapes + +Buttons use {rounded.md} (16px, measured on "GET STARTED" and "GO SPOTLIGHT", 42px tall). Cards and chips use 12px, 8px, 6px, 5px and 2px radii (CSS corpus counts: 16px ×10, 12px ×8, 2px ×8, 9999px ×7). The boxed logotype and the "ApeChain Spotlight" label are rectangular with a thin outline in the capture. Pill chips are fully rounded. + +## Components + +- `button-primary` / `button-secondary`: {colors.button-ghost-fill} fill, black DM Mono 12px uppercase text with 1.2px tracking, 16px radius, 42px tall, outlined with a gradient stroke in the capture; white text on hover. +- `link`: DM Mono uppercase in {colors.ink}. +- `nav`: transparent-black fill over the blue hero, white text, 24px padding; `nav-link` in dmSans. +- App card: dark navy photographic tile with a category chip at top left, a condensed uppercase title and a mono subtitle. +- `footer`: white text. + +## Design System Architecture + +No public design-system or brand-guideline page was linked from the home page's anchors (it links to /apps and per-app pages). The site is a Next.js and Tailwind build (`--tw-*`) with Sanity-hosted images (cdn.sanity.io). Its layout variables define the grid (`--container-gutter-width`, `--container-margin`, `--container-nb-columns`), and custom cursors are declared (`--cursor`, `--cursor-pointer`, `--cursor-move`). Source: [apechain.com](https://apechain.com/). + +## Content and Imagery + +The page is built around app discovery. Each app card carries a category chip (GAMES, INTELLECTUAL PROPERTY, COLLECTIBLES, FINANCE, INFRASTRUCTURE), a title such as OTHERSIDE, MADE BY APES, APE EXPRESS, CAMELOT, APE PORTAL, BLEVER or CLUTCH MARKETS, and a one-line mono description (for example "WEB3-ENABLED VIRTUAL WORLDS ON APECHAIN"). The featured card shows a neon-lit logo on a dark tilted panel. The spotlight copy is conversational and uses an emoji at the end of the call to action ("Ready to make your mark?"). Photography is rendered 3D art and game stills rather than people or product shots, and imagery is blurred or tilted to create depth. + +## Page Rhythm + +Vertical sections change plane at every step: electric blue with a contour pattern, a dark blurred band, pale sky blue, then the app grid. Each section opens with one oversized or boxed label (the giant word, the boxed "ApeChain Spotlight" tag, the "ApeChain Apps" heading with a small icon) followed by body copy at 16px on a 20.8px line height. Calls to action come in pairs of equal outlined buttons rather than one filled button and one ghost, and the app grid reuses the same 16px corner language as the buttons so the whole page reads as one family of rounded rectangles on three flat planes. + +## Interaction + +The hover records show the two spotlight buttons keep a 42px height and 16px radius while flipping color from black text on a 10% black fill to white text and a white border. No other hover states were recorded, and focus states were not measured. The site declares custom cursor images for default, pointer and move states. + +## Do's and Don'ts + +- Do set display words in uppercase condensed manuka and make hero words very large. +- Do set controls and labels in DM Mono at 12px with 1.2px tracking. +- Do alternate navy, pale blue and electric blue planes. +- Do give buttons 16px corners and a ghost 10% black fill. +- Don't use soft drop shadows; depth is tonal. +- Don't set long copy in the condensed face; paragraphs are DM Sans. +- Don't add colors beyond the three planes and black or white text. + +## Responsive Behavior + +Measured at 390px: body copy is 14px on an 18.2px line height in black, and the h2 "EXPLORE" measures 64px (50.24px line height, manuka 500). The extractor's mobile h1 matches the desktop 32px. Navigation behavior and the card grid at narrow width were not measured. + +## Iteration Guide + +1. Pick the plane: #030a21 (dark), #e2f0ff (light) or #0054fa (hero). +2. Display in manuka uppercase; paragraphs in DM Sans 16px/20.8px. +3. Buttons: DM Mono 12px uppercase, 1.2px tracking, 16px radius, 42px tall. +4. Use oversized words for page headers. +5. Run `node web/scripts/verify-designs.mjs --slug=apechain` after edits. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/apollo/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/apollo/DESIGN.md new file mode 100644 index 0000000..d0b3259 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/apollo/DESIGN.md @@ -0,0 +1,238 @@ +--- +version: alpha +name: Apollo +category: "Product & SaaS" +description: "Apollo.io's apollo.io site: a white #ffffff content sheet with 24px corners set inside a warm grey #ccc9c6 frame, black #000000 seasonMix serif headlines (64px/550), abcDiatype body text, an acid yellow #ebf212 8px-radius 'Sign up for free' button (hover #fcffa8), black and outlined secondary buttons, warm #f7f5f2 image panels and 24px-radius cards with #e4e5d9 borders." +colors: + canvas: "#ffffff" + ink: "#000000" + ink-soft: "#1a1a1a" + ink-warm: "#47423d" + ink-muted: "#736f6c" + primary: "#ebf212" + on-primary: "#000000" + primary-hover: "#fcffa8" + frame-grey: "#ccc9c6" + panel-warm: "#f7f5f2" + chip-bg: "#efefeb" + chip-text: "#4d4d41" + hover-fill: "#e5e3e1" + nav-link-text: "#000000de" + card-text: "#252521" + card-border: "#e4e5d9" + border-grey: "#94918e" + stat-ink: "#3f3653" +typography: + display: + fontFamily: seasonMix, "seasonMix Fallback" + fontSize: 64px + fontWeight: 550 + lineHeight: 64px + letterSpacing: "-0.64px" + display-mobile: + fontFamily: seasonMix, "seasonMix Fallback" + fontSize: 44px + fontWeight: 550 + lineHeight: 44px + letterSpacing: "-0.44px" + heading: + fontFamily: seasonMix, "seasonMix Fallback" + fontSize: 56px + fontWeight: 550 + lineHeight: 58.8px + letterSpacing: "-0.56px" + card-title: + fontFamily: seasonMix, "seasonMix Fallback" + fontSize: 32px + fontWeight: 550 + lineHeight: 35.2px + letterSpacing: "-0.32px" + body: + fontFamily: abcDiatype, "abcDiatype Fallback" + fontSize: 20px + fontWeight: 400 + lineHeight: 24px + letterSpacing: "-0.2px" + button: + fontFamily: abcDiatype, "abcDiatype Fallback" + fontSize: 16px + fontWeight: 400 + lineHeight: 20.8px + button-small: + fontFamily: abcDiatype, "abcDiatype Fallback" + fontSize: 14px + fontWeight: 400 + lineHeight: 18.2px + nav: + fontFamily: soehne, "soehne Fallback" + fontSize: 18px + fontWeight: 400 + lineHeight: 27px + letterSpacing: 0.16884px + input: + fontFamily: soehne, "soehne Fallback" + fontSize: 16px + fontWeight: 400 + lineHeight: 16px +rounded: + xs: 6px + sm: 8px + md: 12px + lg: 16px + xl: 24px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 4px + s4: 6px + s5: 8px + s6: 10px + s7: 12px + s8: 16px + s9: 20px + s10: 24px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 0px 20px + height: 48px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + button-dark: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 0px 20px + height: 48px + button-outlined: + textColor: "{colors.ink}" + typography: "{typography.button-small}" + rounded: "{rounded.sm}" + padding: 0px 16px + height: 40px + border: "1px solid #000000" + button-outlined-hover: + backgroundColor: "{colors.hover-fill}" + chip: + backgroundColor: "{colors.chip-bg}" + textColor: "{colors.chip-text}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 4px 10px + height: 29px + link: + textColor: "{colors.ink}" + typography: "{typography.button}" + nav: + backgroundColor: "{colors.frame-grey}" + textColor: "{colors.ink}" + height: 72px + nav-link: + textColor: "{colors.nav-link-text}" + typography: "{typography.nav}" + text-input: + textColor: "{colors.ink-soft}" + typography: "{typography.input}" + padding: 0px 12px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.card-text}" + typography: "{typography.card-title}" + rounded: "{rounded.xl}" + padding: 20px 16px + borderColor: "{colors.card-border}" + footer: + backgroundColor: "{colors.frame-grey}" + textColor: "{colors.ink-soft}" +--- + +# Apollo — apollo.io + +## Overview + +Apollo.io's home page (https://www.apollo.io, title "The AI GTM System for Go-to-Market Teams | Apollo") presents its sales platform with an editorial, paper-like look. The whole page is a white sheet with rounded corners laid inside a warm grey `#ccc9c6` frame: the frame shows as the header bar, a thin margin around the sheet and the large footer. Inside, headlines are set in a bookish serif, body text in a neutral grotesque, small labels in a monospace, and a single acid yellow `#ebf212` marks the sign-up action. + +The header carries the yellow-spoked Apollo logo, Products, Solutions, Resources, Customers and Pricing, then Log in, an outlined **Get a demo** and a yellow **Sign up for free**. The hero is centred: "Grow revenue with one connected GTM system" in seasonMix 64px, a short subline ("…with the agentic system that works where you work: Apollo, Claude, ChatGPT, and more."), a black/white toggle (**Sign up for free** / Request a demo), "No credit card required", an email field with a yellow **Sign up for free**, and outlined Google and Microsoft sign-up buttons. A large warm `#f7f5f2` panel shows stacked integration cards (Claude, Salesforce, "Connected" in green) and a monospace caption "JOIN OVER 600,000 COMPANIES USING APOLLO" heads a grey logo row. Alternating two-column feature rows follow ("Run your go-to-market, your way", "Give every team the same source of truth", "Let AI handle the busywork"), each with icon bullets, underlined product links and an outlined "Explore our … layer" button opposite a product mock on a warm panel. Later: compliance badges (GDPR, SOC 2, CCPA, ISO/IEC 27001…), a giant "600K+" stat, customer cards by role, a full-bleed yellow-cyan-pink fluid gradient CTA ("It's time to run your GTM like a system, not a set of tools") with a black **Get started for free** button, and a dense grey footer with an oversized black logo mark. + +## Colors + +All values are measured in `web/data/extracted/apollo.json`. + +- **Canvas `#ffffff`** — the content sheet (52% of capture pixels); **frame grey `#ccc9c6`** — the header, page frame and footer (16%). +- **Ink `#000000`** — headlines and primary text; **ink soft `#1a1a1a`** — footer and inputs; **ink warm `#47423d`** — body paragraphs; **ink muted `#736f6c`** — captions and the Log in hover color. +- **Primary `#ebf212`** — acid yellow on Sign up for free with black text; hover lightens to **`#fcffa8`**. +- **Panel warm `#f7f5f2`** — image and mock panels; **chip bg `#efefeb`** with **chip text `#4d4d41`** — product chips. +- **Hover fill `#e5e3e1`** — the hover background of outlined buttons. +- **Card text `#252521`** and **card border `#e4e5d9`**; **border grey `#94918e`** on inputs; **stat ink `#3f3653`** — the dark violet of the "600K+" figure. +- **Nav link text `#000000de`** — 87% black. + +## Typography + +Four families are loaded: + +- **seasonMix** (weight 550) for headlines: hero 64px / 64px at -0.64px; section headline 56px / 58.8px at -0.56px ("It's time to run your GTM like a system…"); card titles 32px / 35.2px at -0.32px; 48px and 40px in other sections; a 146px size for the "600K+" figure. +- **abcDiatype** (400, 700) for body and UI: 20px / 24px at -0.2px for lead text, 16px / 20.8px for buttons, 14px / 18.2px for small buttons and footer, 700 for footer headings. +- **soehne** (variable 100–900) for nav menus at 18px / 27px with 0.16884px tracking, and inputs at 16px. +- **foundersGroteskMono** for small uppercase captions (role labels "SALES LEADER", badge captions, "JOIN OVER 600,000 COMPANIES USING APOLLO"). + +Measured sizes by character count: 16px, 14px, 20px, 12px, 24px, 32px, 48px, 56px, 64px, 40px, 146px. All four are commercial typefaces; when unavailable, pair a transitional serif for headlines with a neutral grotesque and a monospace, keeping the 550 headline weight. + +## Layout + +At 1280px the sheet's content spans x = 60 to x = 1225 and the extraction detected up to 8 columns in a single 9,665px media band. The hero is centred and narrow; feature rows alternate image-left / text-right and text-left / image-right, with the warm panel taking half the width. Headlines in feature rows sit at the top of the text column and buttons at the bottom, with generous empty space between. Gaps cluster at 8px, 16px, 12px and 24px, with 50px and 64px between blocks; paddings at 24px, 20px, 36px and 40px. + +## Elevation & Depth + +No box-shadows were measured. Depth comes from the sheet-in-frame construction (white sheet on `#ccc9c6`), from warm `#f7f5f2` panels behind product mocks, and from the stacked, slightly offset integration cards in the hero illustration. Cards are outlined with 1px `#e4e5d9` borders. + +## Shapes + +**8px** (`rounded.sm`) is by far the most frequent radius: all buttons, inputs and chips. Cards use **24px** (`rounded.xl`); panels **12px** and **16px**, including bottom-only `0px 0px 16px 16px` corners where panels attach to cards; small icons **6px**. Avatars sit in square, lightly rounded frames; compliance badges are drawn as circles, shields and diamonds. + +## Components + +- **Primary button** — `#ebf212`, black abcDiatype 16px, 8px radius, padding 0px 20px, 48px tall; hover `#fcffa8`. A 40px / 14px version sits in the header. +- **Dark button** — black fill, white 16px text, 8px radius, 48px tall ("Get started for free"). +- **Outlined button** — transparent, 1px black border, black 14px text, 8px radius, padding 0px 16px, 40px tall ("Get a demo", "Explore our Execution layer", Google/Microsoft sign-up); hover fills `#e5e3e1`. +- **Chip** — `#efefeb`, `#4d4d41` text, 8px radius, padding 4px 10px, 29px tall ("Apollo Anywhere", "Builder Studio", "GTM Harness"). +- **Email field** — white with a thin grey border, 8px radius, paired with a yellow button. +- **Feature card** — white, 24px radius, 1px `#e4e5d9` border, padding 20px 16px, 32px serif title. +- **Customer card** — monospace role label, square portrait, name, title, company wordmark. +- **Accordion** — rows separated by thin rules with a minus/plus control ("Stay secure", "Stay compliant"). + +## Design System Architecture + +No public design system or brand guideline was found: https://www.apollo.io/brand and https://www.apollo.io/press returned 404. The shipped site is a Tailwind build (`--tw-*` root variables) with a phone-input library's variables (`--PhoneInput-*`), neither of which carries Apollo brand values. The de-facto system is the measured set: the white-sheet-in-grey-frame layout, seasonMix headlines at 550 with -1% tracking, abcDiatype UI text, soehne nav and a mono caption face, one acid-yellow action color, black and outlined secondary buttons, 8px controls and 24px cards. + +## Do's and Don'ts + +**Do** +- Lay content on a white sheet inside a `#ccc9c6` frame. +- Use `#ebf212` with black text only for the sign-up action; use black or outlined buttons for everything else. +- Set headlines in seasonMix at 550 with tracking of -1% of the size. +- Keep controls at 8px radius and cards at 24px. +- Use monospace uppercase captions for labels and logo-row headings. + +**Don't** +- Don't use yellow for text or large areas, except the one fluid-gradient CTA band. +- Don't add drop shadows; separate with frames, panels and 1px borders. +- Don't round buttons into pills. +- Don't treat Tailwind or phone-input variables as brand colors. + +## Responsive Behavior + +The 390px mobile pass recorded the hero headline at 44px / 44px with -0.44px tracking, the lead quote text at 18px / 21.6px with -0.18px, a 59px `#ccc9c6` header band with two visible header links and no menu toggle detected, and a 6,214px white band with content from x = 20 to x = 370. Mobile font sizes by frequency: 16px, 14px, 18px, 12px, 20px, 10px, 28px, 36px, 40px, 44px. The stylesheet's main breakpoints are min-width 768px, 1024px, 1440px and 1920px. Other reflow behavior was not measured. + +## Iteration Guide + +1. Put a white sheet with rounded corners inside a `#ccc9c6` frame; header and footer live on the frame. +2. Centre a seasonMix 64px / 64px headline at 550 with -0.64px tracking and a 20px abcDiatype subline. +3. Offer sign-up as an email field plus a 48px `#ebf212` button (8px radius), with outlined Google/Microsoft buttons below. +4. Alternate feature rows with `#f7f5f2` mock panels and outlined "Explore…" buttons. +5. Close with a fluid gradient CTA band and a dense grey footer. +6. Measure anything not listed here before adding it. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/apple-music/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/apple-music/DESIGN.md new file mode 100644 index 0000000..7ae15c1 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/apple-music/DESIGN.md @@ -0,0 +1,500 @@ +--- +version: alpha +name: Apple Music +category: "Music & Audio" +description: "Apple Music marketing page (apple.com/apple-music): Apple's light gallery system — #f5f5f7 sections, #ffffff cards with an 18px radius, #1d1d1f text — set in SF Pro Display (128px/600 hero, -0.256px tracking) and SF Pro Text (17px/25px body, -0.374px). The action color is Apple Music red #fa243c on 980px pill buttons (11px 21px, 44px tall); the hero sits on a magenta-to-red gradient and links are #0066cc. The music.apple.com web player uses #d60017." + +colors: + primary: "#fa243c" + primary-hover-text: "#febdc5" + red-gradient-pink: "#ff4dc3" + red-gradient-red: "#fa233b" + red-gradient-deep: "#c00020" + red-gradient-plum: "#591962" + red-section: "#d6143a" + player-red: "#d60017" + canvas: "#f5f5f7" + surface: "#ffffff" + surface-secondary: "#fafafc" + surface-quaternary: "#e8e8ed" + surface-dark: "#1d1d1f" + immersive-dark: "#010b13" + black: "#000000" + ink: "#1d1d1f" + ink-secondary: "#6e6e73" + ink-tertiary: "#86868b" + ink-nav: "#000000cc" + ink-footer: "#0000008f" + ink-footer-strong: "#000000b8" + ink-on-dark: "#f5f5f7" + ink-on-dark-muted: "#ffffffcc" + link: "#0066cc" + link-on-dark: "#2997ff" + focus: "#0071e3" + border: "#d2d2d7" + paddle: "#424245b5" + button-dark-hover: "#272729" + +typography: + hero: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 128px + fontWeight: 600 + lineHeight: 128px + letterSpacing: -0.256px + headline-80: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 80px + fontWeight: 600 + lineHeight: 84px + letterSpacing: -1.2px + headline-72: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 72px + fontWeight: 600 + lineHeight: 72px + letterSpacing: -0.648px + headline-56: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 56px + fontWeight: 600 + lineHeight: 56px + letterSpacing: -0.28px + headline-48: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 48px + fontWeight: 600 + lineHeight: 52.0077px + letterSpacing: -0.144px + headline-40: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 40px + fontWeight: 600 + lineHeight: 44px + lockup: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 34px + fontWeight: 600 + lineHeight: 50px + letterSpacing: -0.374px + feature-title: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 32px + fontWeight: 600 + lineHeight: 36px + letterSpacing: 0.128px + card-title: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 28px + fontWeight: 600 + lineHeight: 32px + letterSpacing: 0.196px + hero-intro: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 24px + fontWeight: 600 + lineHeight: 28px + letterSpacing: 0.216px + localnav-title: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 21px + fontWeight: 600 + lineHeight: 24px + letterSpacing: 0.231px + body: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 17px + fontWeight: 400 + lineHeight: 25px + letterSpacing: -0.374px + button: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 17px + fontWeight: 600 + lineHeight: 20.0002px + letterSpacing: -0.374px + link-small: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 20.0003px + letterSpacing: -0.224px + button-small: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 14px + fontWeight: 600 + lineHeight: 18.0008px + letterSpacing: -0.224px + globalnav: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 12px + letterSpacing: -0.12px + footnote: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 12px + fontWeight: 400 + lineHeight: 16.0005px + letterSpacing: -0.12px + hero-mobile: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 48px + fontWeight: 600 + lineHeight: 48px + letterSpacing: -0.144px + +rounded: + tile-small: 8px + control: 10px + locale-select: 11px + card: 18px + gallery: 30px + large: 36px + pill: 980px + circle: 50% + +spacing: + xxs: 4px + xs: 8px + sm: 10px + md: 20px + lg: 24px + xl: 30px + xxl: 40px + section: 80px + globalnav-height: 44px + localnav-height: 52px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.surface}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 11px 21px + height: 44px + button-primary-hover: + textColor: "{colors.primary-hover-text}" + button-hero: + backgroundColor: "{colors.surface}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 17px 30px + height: 56px + button-hero-hover: + opacity: 0.8 + button-primary-mobile: + backgroundColor: "{colors.primary}" + textColor: "{colors.surface}" + typography: "{typography.button-small}" + rounded: "{rounded.pill}" + padding: 8px 15px + height: 36px + button-dark: + backgroundColor: "{colors.surface-dark}" + textColor: "{colors.surface}" + rounded: "{rounded.tile-small}" + height: 36px + button-dark-hover: + backgroundColor: "{colors.button-dark-hover}" + link: + textColor: "{colors.link}" + typography: "{typography.link-small}" + link-large: + textColor: "{colors.link}" + typography: "{typography.localnav-title}" + offer-card: + backgroundColor: "{colors.surface}" + textColor: "{colors.ink}" + rounded: "{rounded.card}" + width: 405px + height: 319px + gallery-paddle: + backgroundColor: "{colors.paddle}" + rounded: "{rounded.circle}" + size: 36px + globalnav: + textColor: "{colors.ink-nav}" + typography: "{typography.globalnav}" + height: 44px + localnav: + textColor: "{colors.black}" + typography: "{typography.localnav-title}" + height: 52px + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-footer}" + typography: "{typography.footnote}" + player-button: + backgroundColor: "{colors.player-red}" + textColor: "{colors.surface}" + rounded: 1000px + padding: 0px 16px + height: 36px +--- + +## Overview + +The Apple Music page is an apple.com product page, so it inherits Apple's marketing system: a 44px global nav, a +52px sticky local nav ("Apple Music" + a small red "Try it free*" pill), alternating light-grey and white bands, and +huge SF Pro Display headlines. What makes it Apple Music is color: the hero is a full-bleed glowing gradient that runs +from plum through crimson to hot pink and orange, and every action is Apple Music red `#fa243c`. + +The hero centers the Music lockup, a two-line 128px headline "For the love / of music." in white, a 24px intro paragraph +in 80% white, and a white pill "Try it free*" (56px tall). Below it, a `#f5f5f7` band titled "Start listening for free." +holds a horizontal carousel of white 18px-radius offer cards (New Subscriber, Family Plan, New Devices, Student Plan), +each with a red-gradient icon label, a 28px title, grey copy and a red pill CTA; round grey paddles page the carousel. +Then a big immersive gallery: rounded 30px+ media tiles with an artist photograph receding through framed layers, +captioned "Listening Experience / Music at its most immersive." in 80px white type. + +Density is low, imagery is product-photography grade, and copy is short declaratives with footnote superscripts +("Try it free*", "Spatial Audio.²"). + +**Key Characteristics:** +- Canvas `#f5f5f7` bands alternating with `#ffffff`; text `#1d1d1f` +- SF Pro Display for 21px and up, SF Pro Text below; weight 600 for every headline +- Negative tracking on big type (-0.256px at 128px, -1.2px at 80px), slight positive tracking at 21–32px +- Apple Music red `#fa243c` pill CTAs, radius 980px, padding 11px 21px, 44px tall +- Hover on red pills tints the label to `#febdc5`; the white hero pill fades to 0.8 opacity +- White offer cards, 18px radius, no shadow +- Links `#0066cc`; focus color `#0071e3` + +## Colors + +### Brand red family +- **Primary** `#fa243c`: every "Try it free*" pill on the marketing page. +- **Primary hover text** `#febdc5`: the label color of a hovered red pill (measured). +- **Gradient stops** `#ff4dc3` → `#fa233b` → `#c00020` → `#591962`: the gradient clipped into the offer-card labels + (`linear-gradient(90deg, rgb(255, 77, 195) -10%, rgb(250, 35, 59) 10%, rgb(192, 0, 32) 80%, rgb(89, 25, 98) 120%)`). +- **Red section** `#d6143a`: a large red background area measured on the page. +- **Player red** `#d60017`: the music.apple.com web player's "Sign In" and "Continue" buttons. + +### Surfaces +- **Canvas** `#f5f5f7` (`--sk-fill-tertiary`): the largest background area; section bands and footer. +- **Surface** `#ffffff` (`--sk-body-background-color`): body, offer cards, alternating bands. +- **Surface secondary** `#fafafc` (`--sk-fill-secondary`, `--r-globalnav-background-opened`). +- **Surface quaternary** `#e8e8ed` (`--sk-fill-gray-quaternary`): another section band. +- **Surface dark** `#1d1d1f`, **immersive dark** `#010b13`, **black** `#000000`: dark media sections. + +### Text +- **Ink** `#1d1d1f` (`--sk-body-text-color`, `--sk-headline-text-color`). +- **Ink secondary** `#6e6e73` (`--sk-glyph-gray-secondary`), **ink tertiary** `#86868b` (`--sk-glyph-gray-tertiary`). +- **Ink nav** `#000000cc`: global nav links. +- **Ink footer** `#0000008f` and **ink footer strong** `#000000b8`. +- **On dark** `#f5f5f7` and `#ffffffcc` (hero intro). + +### Links, focus, lines +- **Link** `#0066cc` (`--sk-body-link-color`); **link on dark** `#2997ff`. +- **Focus** `#0071e3` (`--sk-focus-color`, with `--sk-focus-offset: 1px`). +- **Border** `#d2d2d7` (`--sk-fill-gray-tertiary`). +- **Paddle** `#424245b5` (rgba(66,66,69,0.71)) carousel buttons. + +## Typography + +### Font Family +Apple serves its own web fonts: **SF Pro Display** (400, 600 loaded) and **SF Pro Text** (300, 400, 500, 600 loaded), +plus SF Pro Icons. Stack: `"SF Pro Display" | "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif`. +Localized pages switch families (SF Pro TH, SF Pro JP, SF Pro SC … are declared in the CSS). +The web player uses `-apple-system, system-ui, "SF Pro", …` instead. + +### Hierarchy + +| Token | Family | Size | Weight | Line height | Tracking | Use | +|---|---|---|---|---|---|---| +| hero | Display | 128px | 600 | 128px | -0.256px | "For the love of music." | +| headline-80 | Display | 80px | 600 | 84px | -1.2px | Gallery headline | +| headline-72 | Display | 72px | 600 | 72px | -0.648px | "Questions? Answers." | +| headline-56 | Display | 56px | 600 | 56px | -0.28px | "Choose the plan…" | +| headline-48 | Display | 48px | 600 | 52.0077px | -0.144px | "Start listening for free." | +| headline-40 | Display | 40px | 600 | 44px | — | "Working with Apple Music." | +| lockup | Text | 34px | 600 | 50px | -0.374px | Hero h1 lockup | +| feature-title | Display | 32px | 600 | 36px | 0.128px | Gallery tile labels | +| card-title | Display | 28px | 600 | 32px | 0.196px | Offer card titles | +| hero-intro | Display | 24px | 600 | 28px | 0.216px | Hero paragraph | +| localnav-title | Display | 21px | 600 | 24px | 0.231px | "Apple Music", "Compare plans" | +| body | Text | 17px | 400 | 25px | -0.374px | Body copy | +| button | Text | 17px | 600 | 20.0002px | -0.374px | Pill labels | +| link-small | Text | 14px | 400 | 20.0003px | -0.224px | "Learn more" | +| globalnav | Text | 12px | 400 | 12px | -0.12px | Global nav links | +| footnote | Text | 12px | 400 | 16.0005px | -0.12px | Footer and legal | + +### Principles +- Optical sizes: Display at 21px and above, Text below. +- Tracking shifts with size: negative on display sizes, slightly positive at 21–32px, negative again at body sizes. +- Headlines are 600, never bold 700; body is 400. +- 17px is the base reading size, matching Apple's platform default (HIG: iOS default text size 17pt). + +### Note on Font Substitutes +SF Pro is Apple's system font; Apple licenses it only to registered developers for UI mock-ups of Apple-platform +software (developer.apple.com/fonts). Outside Apple, use the page's own fallback chain — `"Helvetica Neue", Helvetica, Arial, sans-serif` +— and keep the measured sizes, weights and tracking. + +## Layout + +### Spacing System +Measured gaps: 8px, 10px, 20px, 30px, 80px. Paddings: 4px, 24px, 80px, 8px, 11px/21px (pills), 34px, 40px. +Navigation heights are tokenized: `--r-globalnav-height: 44px`, `--r-localnav-height: calc(52px * var(--r-localnav-text-zoom-factor))`. + +### Grid & Container +- Content is centered with wide side margins; the offer carousel shows three 405px cards and bleeds the fourth off the right edge. +- Section headers put the headline left and a 21px `#0066cc` "Compare plans ›" link right. +- Local-nav breakpoints are tokenized: small 320–833px, medium 834–1023px, large 1024px+. + +### Whitespace Philosophy +Very generous: 80px section padding, one idea per band, centered hero copy with a single CTA. + +## Elevation & Depth + +| Level | Treatment | Use | +|---|---|---| +| Flat | none | Cards, bands, buttons | +| Ring glow | `rgb(13, 22, 31) 0px 0px 0px 32px, rgb(10, 20, 28) 0px 0px 0px 80px, rgb(6, 15, 25) 0px 0px 0px 120px` | Concentric dark rings around a media frame | +| Web player cards | `rgba(0, 0, 0, 0.01) 0px 1px 1px 0px … rgba(0, 0, 0, 0.03) 0px 14px 14px 0px` (5 layers) | music.apple.com artwork | + +The marketing page gets depth from photography and the hero gradient, not from shadows. + +## Shapes + +| Token | Value | Use | +|---|---|---| +| tile-small | 8px | Locale "Continue" button | +| control | 10px | Most frequent radius on the page | +| locale-select | 11px | Country selector | +| card | 18px | Offer cards | +| gallery | 30px | Immersive media tiles | +| large | 36px | Large media tiles | +| pill | 980px | All CTA pills | +| circle | 50% | Carousel paddles, icon buttons | + +## Components + +### Buttons + +**Primary (red pill)** — "Try it free*" +- Background `#fa243c`, label `#ffffff`, SF Pro Text 17px / 600, line-height 20.0002px, tracking -0.374px +- Padding 11px 21px, height 44px, radius 980px +- Hover: label becomes `#febdc5`; background unchanged +- Local-nav variant is the same color at a smaller size (24px tall) + +**Hero (white pill)** — "Try it free*" on the gradient +- Background `#ffffff`, label `#1d1d1f`, 17px / 600, padding 17px 30px, height 56px, radius 980px +- Hover: opacity 0.8 + +**Mobile primary** — 14px / 600, padding 8px 15px, 36px tall (measured at 390px) + +**Dark** — the locale banner's "Continue": `#1d1d1f`, white label, radius 8px, 36px tall; hover `#272729`. + +### Links +`#0066cc`, 14px "Learn more ↗"; 21px / 600 "Compare plans ›" in section headers. + +### Offer cards +White, radius 18px, 405×319px, no border or shadow. Contents: a gradient-filled icon + 17px / 600 label +("New Subscriber"), a 28px / 600 title ("1 month free"), grey descriptive copy, and a red pill CTA at the bottom. + +### Carousel paddles +36px circles, `#424245b5` fill, `#ffffffc9` chevrons. + +### Navigation +- Global nav: 44px, Apple logo then Store / Mac / iPad / iPhone / Watch / Vision / AirPods / TV & Home / Entertainment / + Accessories / Support, search and bag icons; links 12px `#000000cc`, padding 0px 8px. +- Local nav: 52px, "Apple Music" 21px / 600 left, red "Try it free*" pill right. + +### Footer +`#f5f5f7` background, 12px / 16.0005px text in `#0000008f`, legal footnotes first, then the site directory. + +### Web player (music.apple.com) +Left sidebar on translucent `#f5f5f78c`, 13px base text, 34px / 700 page title, `#d60017` 36px pill "Sign In" +(radius 1000px, padding 0px 16px), artwork tiles with a 7px radius and a five-layer soft shadow. + +## Design System Architecture + +Apple does **not publish the web design system** behind apple.com. The official, public Apple design system is the +[Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/color), which governs native +platform apps; the marketing page's CSS follows its own token set (below). Brand rules for Apple Music itself are limited +to the [Apple Music Identity Guidelines](https://marketing.services.apple/apple-music-identity-guidelines) for badges and icons. + +### Token architecture (observed on the page) +- **Semantic fills and glyphs** prefixed `--sk-`: `--sk-body-text-color: rgb(29,29,31)`, `--sk-body-link-color: rgb(0,102,204)`, + `--sk-fill-tertiary: rgb(245,245,247)`, `--sk-fill-gray-quaternary: rgb(232,232,237)`, `--sk-glyph-gray-secondary: rgb(110,110,115)`, + `--sk-focus-color: #0071e3`, `--sk-productred: rgb(175,30,45)`, with alpha twins (`--sk-glyph-gray-secondary-alpha: rgba(0,0,0,0.56)`). +- **Layout/navigation** prefixed `--r-`: `--r-globalnav-height: 44px`, `--r-localnav-height`, `--r-localnav-viewport-*-min-width`. +- **Typographic rhythm**: `--sk-headline-plus-first-element-margin: 0.8em`, `--sk-paragraph-plus-headline-margin: 1.6em`, + `--sk-footnote-font-size: 0.6em`. +No primitive palette tier is exposed; values are written directly into the semantic tokens. + +### Theming +The page defines both `--r-globalnav-background-opened: #fafafc` and `--r-globalnav-background-opened-dark: #161617`, +i.e. the nav has a dark variant. The HIG requires native apps to support light, dark and increased-contrast appearances +([HIG Color](https://developer.apple.com/design/human-interface-guidelines/color)). + +### Type & spacing systems +SF Pro with optical sizes (Display ≥ 21px, Text below) — SF Pro has "variable optical sizes for optimal legibility" +([Apple Fonts](https://developer.apple.com/fonts/)). Responsive behavior is handled by three viewport bands (320 / 834 / 1024px). + +### Component model +Observable components: global nav, local nav with CTA, gallery carousel with paddles, offer cards, immersive media tiles, +FAQ section ("Questions? Answers."), footer with footnotes. + +### Accessibility +The [HIG Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) guidance cites WCAG +AA: 4.5:1 for text up to 17pt, 3:1 for 18pt+ or bold; default iOS control size 44×44pt (minimum 28×28pt). The web page's +focus color is `#0071e3` with a 1px offset (`--sk-focus-offset-container: 3px` for containers). + +### Delivery +Not public for the web. SF Pro and the Apple Design Resources are distributed through developer.apple.com. + +## Do's and Don'ts + +### Do +- Alternate `#f5f5f7` and `#ffffff` bands; put white cards on the grey band. +- Use SF Pro Display 600 for every headline, with the measured tracking. +- Use `#fa243c` pills (980px radius) for every "Try it free" action. +- Keep the hero to lockup, headline, one paragraph and one white pill on the gradient. +- Use `#0066cc` for text links with a trailing chevron or arrow. +- Use footnote superscripts for offer conditions. + +### Don't +- Don't use the web player's `#d60017` on the marketing page; it uses `#fa243c`. +- Don't add shadows to offer cards. +- Don't bold headlines to 700. +- Don't square off buttons — CTAs are always pills. +- Don't fill text links with color backgrounds. +- Don't create or alter Apple Music badges; use Apple's artwork (Identity Guidelines). + +## Responsive Behavior + +### Breakpoints +Local nav: small 320–833px, medium 834–1023px, large ≥ 1024px. + +### Measured at 390px +- Hero headline drops from 128px to 48px (600, line-height 48px, tracking -0.144px). +- Lockup h1 stays 34px / 600. +- Body stays 17px / 25px. +- Primary pill becomes 14px / 600, padding 8px 15px, 36px tall. + +### Touch targets +44px desktop pills; 36px on mobile; 36px paddles. + +### Collapsing strategy +The offer cards sit in a horizontal carousel paged by paddles; other collapse behavior was not measured. + +## Iteration Guide + +1. Body `#ffffff`, bands `#f5f5f7`, text `#1d1d1f`. +2. SF Pro Display/Text (fallback Helvetica Neue, Helvetica, Arial). +3. Global nav 44px with 12px links; local nav 52px with a red pill. +4. Gradient hero with the 128px / 600 headline, 24px intro in `#ffffffcc`, white 56px pill. +5. "Start listening for free." 48px band with 18px-radius white offer cards and red pills. +6. Immersive media tiles (30–36px radius) with 80px white headlines. +7. Footer on `#f5f5f7` with 12px `#0000008f` text. + +### Quick Reference +``` +canvas #f5f5f7 · surface #ffffff · ink #1d1d1f · secondary #6e6e73 / #86868b +primary #fa243c (hover label #febdc5) · link #0066cc · focus #0071e3 +hero 128px/600/128px -0.256px · body 17px/25px -0.374px +pill: 980px · 11px 21px · 44px · 17px/600 +card: #ffffff · 18px radius +``` diff --git a/skills/scd-uiux/data/vendor/design-systems/library/apple/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/apple/DESIGN.md new file mode 100644 index 0000000..67ca295 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/apple/DESIGN.md @@ -0,0 +1,302 @@ +--- +version: alpha +name: "Apple" +category: "Media & Consumer Tech" +description: "apple.com is a cinematic product-tile gallery: alternating black #000000 and light #f5f5f7 tiles, SF Pro Display 56px/600 headlines with -0.28px tracking, SF Pro Text 17px buttons, a single blue #0071e3 on 44px full-pill (980px) CTAs, a 44px translucent nav #1d1d1fcc, and almost no shadow or border chrome." +colors: + canvas: "#000000" + page-body: "#ffffff" + ink: "#f5f5f7" + primary: "#0071e3" + on-primary: "#ffffff" + surface-tint: "#f4f8fb" + ink-footer-muted: "#0000008f" + ink-footer-soft: "#000000b8" + ink-on-light: "#1d1d1f" + ink-footer-strong: "#000000e0" + link-on-light: "#0066cc" + link-on-dark: "#2997ff" + surface-light: "#f5f5f7" + surface-dark: "#161617" + ink-tertiary: "#6e6e73" + primary-hover: "#0076df" + nav-bg: "#1d1d1fcc" + nav-link-text: "#ffffffcc" +typography: + display: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 56px + fontWeight: 600 + lineHeight: 60px + letterSpacing: "-0.28px" + display-mobile: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 32px + fontWeight: 600 + lineHeight: 36px + letterSpacing: 0.064px + subheading: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 40px + fontWeight: 600 + lineHeight: 44px + body: + fontFamily: "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 21px + fontWeight: 400 + lineHeight: 25px + letterSpacing: 0.231px + button: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 17px + fontWeight: 400 + lineHeight: 20.0002px + letterSpacing: "-0.374px" + nav: + fontFamily: "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" + fontSize: 17px + fontWeight: 600 + lineHeight: 21.0012px + letterSpacing: "-0.374px" +rounded: + xs: 8px + sm: 11px + pill: 9999px +spacing: + s1: 4px + s2: 8px + s3: 9px + s4: 9.6px + s5: 11px + s6: 12px + s7: 14px + s8: 15px + s9: 17px + s10: 18px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.page-body}" + typography: "{typography.button}" + rounded: "{rounded.pill}" + padding: 11px 21px + height: 44px + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + link-dark: + textColor: "{colors.link-on-dark}" + typography: "{typography.button}" + nav: + backgroundColor: "{colors.nav-bg}" + textColor: "{colors.nav-link-text}" + nav-link: + textColor: "{colors.nav-link-text}" + typography: "{typography.nav}" + padding: 0px 8px + footer: + backgroundColor: "{colors.surface-light}" + textColor: "{colors.ink-footer-muted}" +--- + +# Apple + +## Overview + +apple.com is a product-launch gallery. The capture (a Thai-locale visit, so a country-picker banner with Thai copy and a "ต่อไป" button sits above the nav) shows a vertical stack of full-width "tiles", each one a single product: a 56px / 600 name ("iPhone 18 Pro"), a one-line tagline at 28px ("Pro further."), a pair of pill buttons, and then a huge hero photograph or render that takes most of the tile. Tiles alternate between pure black (#000000) and light grey (#f5f5f7), and two half-width tiles appear side by side lower down (Watch Ultra 4 on black, MacBook Air on a pale blue #f4f8fb wash). + +The feeling is cinematic and restrained: almost no ornament, no borders, no card chrome. Product photography is the decoration; typography is SF Pro in tight, confident weights; the only chromatic UI colour is one blue (#0071e3). Copy is short and declarative ("Pro further.", "Hello, hello.", "Now supercharged by M5.", "A battery you can't outrun."), with price/date information in small grey type beneath. + +Key characteristics: +- **Alternating tiles.** Black #000000 and light #f5f5f7 backgrounds, almost edge to edge, 580px-class hero content height (`--hero-content-height: 580px`). +- **One interactive blue.** #0071e3 fills the primary pill; #0066cc is the link blue on light, #2997ff the link blue on dark. +- **Pill buttons.** Radius 980px (a pill) on 44px high buttons, 17px SF Pro Text label. +- **Translucent global nav.** 44px high, background #1d1d1fcc with white 80% links. +- **SF Pro everywhere.** Display cut for headlines, Text cut for UI, an Icons cut for glyphs, and SF Pro TH for Thai. +- **No elevation system.** One soft shadow (`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`) appears in the measurement; the layout relies on contrast between tiles instead of shadows. + +Important note: Apple's own trademark guidelines (https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html) state that you "may not imitate the distinctive Apple packaging, web site design, logos, or typefaces". This document describes the site for analysis; it is not a licence to reproduce it. + +## Colors + +All hexes are measured on apple.com (homepage) and cross-read against the site's own CSS custom properties (the `--sk-*` and `--r-*` variables on `:root`). + +### Surfaces +- **Canvas** `{colors.canvas}` (#000000): the dominant tile background in the capture (about 47% of pixels) and the largest-area background in the DOM. +- **Page body** `{colors.page-body}` (#ffffff): the `` background and `--sk-body-background-color` (rgb(255, 255, 255)); visible between and below tiles. +- **Surface light** `{colors.surface-light}` (#f5f5f7): light tiles and the footer (second largest background; `--sk-fill-tertiary` rgb(245, 245, 247)). +- **Surface tint** `{colors.surface-tint}` (#f4f8fb): the pale blue backdrop of the MacBook Air tile. +- **Surface dark** `{colors.surface-dark}` (#161617): dark nav-open background (`--r-globalnav-background-opened-dark`). +- **Nav background** `{colors.nav-bg}` (#1d1d1fcc): global nav, 80% opaque over the page. + +### Ink +- **Ink** `{colors.ink}` (#f5f5f7): headline and body text on black tiles. +- **Ink on light** `{colors.ink-on-light}` (#1d1d1f): headline text on light tiles (`--sk-headline-text-color` rgb(29, 29, 31)). +- **Ink tertiary** `{colors.ink-tertiary}` (#6e6e73): secondary text on light (`--sk-glyph-gray-secondary`). +- **Footer ink** `{colors.ink-footer-muted}` (#0000008f), `{colors.ink-footer-soft}` (#000000b8), `{colors.ink-footer-strong}` (#000000e0): alpha-black text levels in the footer; the two most-read text colours on the page. +- **Nav link text** `{colors.nav-link-text}` (#ffffffcc): white at 80%. + +### Action +- **Primary** `{colors.primary}` (#0071e3) with **on primary** `{colors.on-primary}` (#ffffff): the "Learn more" pills. `--sk-focus-color` is the same #0071e3. +- **Primary hover** `{colors.primary-hover}` (#0076df): measured after hovering "Learn more". +- **Link on light** `{colors.link-on-light}` (#0066cc): `--sk-body-link-color` and the border colour of outlined pills on light tiles. +- **Link on dark** `{colors.link-on-dark}` (#2997ff): links and outlined pill text on black tiles. + +### Colour in imagery +Product renders carry the saturated colour (deep burgundy phone, green heart-rate glow, red heart). The UI never adopts those hues; they live inside photography. + +## Typography + +The measured families are `SF Pro Text` (4504 characters), `SF Pro Display` (867) and `SF Pro TH` (110, the Thai cut). The page also loads SF Pro Display 400/600/700 and SF Pro Text 300/400/600 and an SF Pro Icons 300 face. + +| Role | Token | Size / weight / line | Letter-spacing | +|---|---|---|---| +| Tile headline | `{typography.display}` | 56px / 600 / 60px | -0.28px | +| Tile headline, mobile | `{typography.display-mobile}` | 32px / 600 / 36px | 0.064px | +| Half-tile headline | `{typography.subheading}` | 40px / 600 / 44px | normal | +| Tagline / body | `{typography.body}` | 21px / 400 / 25px | 0.231px | +| Button and link | `{typography.button}` | 17px / 400 / 20.0002px | -0.374px | +| Nav link | `{typography.nav}` | 17px / 600 / 21.0012px | -0.374px | + +Other measured sizes: 12px dominates by character count (4016, footer legal text at 16.0005px line height and -0.12px tracking), then 21px, 14px, 17px, 28px, 40px, 19px and 56px. + +### Font substitutes +SF Pro is Apple's own typeface and is not distributed as a web font for third parties. The HIG says the system font is SF Pro with dynamic optical sizes merging Text and Display into one continuous design. The site's own fallback chain is `"Helvetica Neue", Helvetica, Arial, sans-serif`; use that, or `-apple-system` on Apple devices. + +### Principles +- Headlines are semibold (600), never light, and tracked slightly negative at 56px. +- Taglines step down to 21 to 28px regular. +- Buttons and links share 17px with -0.374px tracking. +- Footers drop to 12px with alpha-black ink. + +## Layout + +- Global nav 44px (`--globalnav-height: 44px`), full width: Apple logo, then Store, Mac, iPad, iPhone, Watch, Vision, AirPods, TV & Home, Entertainment, Accessories, Support, plus search and bag icons. +- Optional local nav height 52px (`--r-localnav-height`), stacked 66px. +- Local-nav breakpoints from rootVars: small 320 to 833px, medium 834 to 1023px, large 1024px and up. +- Each tile is a centred column of text (headline, tagline, buttons) followed by a wide image that may bleed to the edges. The measurement shows the viewport at 1280px and content roughly 1000px wide. +- Two-up tiles use a thin gap (the media gallery uses `--media-gallery-tile-gap: 13px`, tile size 930 x 523). +- Measured spacing values: 4, 8, 9, 9.6, 11, 12, 14, 15, 17 and 18px; headline-to-subhead gap 0.4em (`--sk-headline-plus-headline-margin`), paragraph margin 0.8em. + +## Elevation & Depth + +- There is effectively no elevation. Tiles are differentiated by background colour, not shadow. +- The only shadow measured: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`, a soft diffuse drop used on product imagery. +- The nav is translucent (#1d1d1fcc) over scrolled content, which is the site's one depth cue. +- Outlined elements use hairline borders: colours measured are #0066cc, #2997ff and #ffffff14. +- Focus: `--sk-focus-offset: 1px` and `--sk-focus-offset-container: 3px` with `--sk-focus-color: #0071e3`. + +## Shapes + +- Measured radii: `{rounded.pill}` (980px reported as a pill; also 999px), `{rounded.sm}` 11px (the language picker box), `{rounded.xs}` 8px (small chips and the banner "ต่อไป" button). +- Primary and secondary CTAs are always full pills (radius 980px) at 44px height. +- Images are mostly square-cornered full-bleed tiles; avatars/icons use 50%. +- Never round the tile edges; the page reads as continuous bands. + +## Components + +### Buttons +- **Primary pill:** `{components.button-primary}`: #0071e3 fill, white 17px label, padding 11px 21px, 44px high, 980px radius. Hover fills #0076df (no shadow, no border change). +- **Secondary pill ("Buy", "View pricing"):** the same size, transparent fill, blue outline and blue text (#2997ff on dark, #0066cc on light; borders measured above). +- **Text link:** `{components.link-dark}`: 17px, #2997ff on dark. + +### Navigation +`{components.nav}` and `{components.nav-link}`: 44px, links in 17px semibold at 80% white with 8px horizontal padding. + +### Footer +`{components.footer}`: #f5f5f7 background, 12px text in alpha-black #0000008f, long legal footnotes ("Based on data from an Apple-conducted study of..."). The page footer is about 996px tall. + +### Tile +Not a styled card: a section containing headline, tagline, button pair and media. Alternating colours give rhythm. + +### Country/language banner +A 36px-high white or #f5f5f7 button with 8px radius (hover turns it white) inside a dark strip; the picker box has an 11px radius. + +## Art Direction and Imagery + +- **Photography as architecture.** Each tile's image is large enough to be the layout: the "PRO" lettering with the phone laid across it, two hands holding a folded phone (iPhone Duo), two watches side by side. Images sit on the tile colour with no frame. +- **Lighting.** Black tiles show products with rim light and glow; light tiles show soft, shadowless studio-grey backgrounds and hands. +- **Wordmarks as imagery.** Product names such as "WATCH SERIES 12" and "WATCH ULTRA 4" appear as logo-style lockups with the Apple glyph, wider tracked than body headlines. +- **Screens are shown real.** Device UI is rendered at fidelity (heart-rate graph, home screen), never abstracted. +- **Density.** Very low: one message per screenful. The first viewport holds the banner, nav, headline, tagline, two buttons and a hero image. + +## Microcopy Patterns + +| Pattern | Example from the capture | +|---|---| +| Product name headline | "iPhone 18 Pro", "iPhone Duo", "MacBook Air" | +| Two-word or sentence-fragment tagline | "Pro further.", "Hello, hello.", "Now supercharged by M5." | +| Benefit line | "The most accurate heart rate sensing in a wearable." (with a superscript footnote marker) | +| Availability line (small grey) | "Pre-order starting 5:00 a.m. PT on 10.16", "Available starting 10.23" | +| Button pair | "Learn more" + "Buy" (or "View pricing") | + +Footnotes use a superscript marker and long legal text in the 12px footer. + +## Measured Reference + +| Item | Value | +|---|---| +| Viewport used for measurement | 1280px desktop, 390px mobile | +| Global nav height | 44px | +| Primary button | 44px high, padding 11px 21px, radius 980px | +| Button label | 17px / 400 / 20.0002px, tracking -0.374px | +| Tile headline | 56px / 600 / 60px, tracking -0.28px | +| Half-tile headline | 40px / 600 / 44px | +| Tagline | 21px / 400 / 25px, tracking 0.231px | +| Footer text | 12px / 400 / 16.0005px, tracking -0.12px | +| Black tile | #000000 | +| Light tile | #f5f5f7 | +| Primary blue / hover | #0071e3 / #0076df | +| Link blues | #0066cc (light), #2997ff (dark) | + +## Design System Architecture + +Apple has no public design system for apple.com. There is a public design system for apps, the Human Interface Guidelines (https://developer.apple.com/design/human-interface-guidelines/typography), which specifies SF Pro, text styles (Large Title 34/41, Title 1 28/34, Title 2 22/28, Title 3 20/25, Headline 17/22 semibold, Body 17/22, Callout 16/21, Subhead 15/20 in points on iOS) and says the system fonts use dynamic optical sizes. The marketing site does not publish its own tokens. + +The de-facto system is visible in the shipped CSS: +- `--sk-*` variables hold semantic colour and typography values: fills (`--sk-fill: rgb(255, 255, 255)`, `--sk-fill-secondary` rgb(250, 250, 252), `--sk-fill-tertiary` rgb(245, 245, 247), `--sk-fill-gray` rgb(29, 29, 31), `--sk-fill-blue` rgb(0, 113, 227)), glyph colours (`--sk-glyph-gray-secondary` rgb(110, 110, 115), `--sk-glyph-blue` rgb(0, 102, 204)), body colours (`--sk-body-text-color` rgb(29, 29, 31), `--sk-body-link-color` rgb(0, 102, 204)) and footnote metrics (`--sk-footnote-font-size: 0.6em`). +- `--r-globalnav-*` and `--r-localnav-*` variables define the navigation (heights, breakpoints, backgrounds). +- Component-specific variables (`--media-gallery-*`, `--promo-content-height`, `--hero-content-height`) size gallery and promo modules. +- Trademark and imitation rules: https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html. +- Fonts: SF Pro is the system typeface per the HIG typography page above; no separate public web-font package for apple.com was found. + +## Do's and Don'ts + +### Do +- Give each tile one product, one headline, one tagline, two buttons. +- Alternate #000000 and #f5f5f7 tiles; use #1d1d1f ink on light, #f5f5f7 on dark. +- Use the single blue family: #0071e3 fills, #0066cc / #2997ff links by background. +- Keep button pills 44px high with the 17px label and -0.374px tracking. +- Let imagery carry colour and depth. +- Write copy in short, declarative fragments. + +### Don't +- Don't add borders, cards, gradients or drop shadows to UI chrome. +- Don't use a second accent colour in the interface. +- Don't use light weights for headlines. +- Don't use square or 8px buttons for primary CTAs on a tile. +- Don't copy Apple's logo, product imagery or typefaces; Apple's guidelines forbid it. +- Don't place dark ink on dark tiles; the nav and tile ink swap with the background. + +## Responsive Behavior + +- The extractor measured a 390px mobile view: the tile headline drops from 56px to 32px (weight 600, line 36px, +0.064px tracking). +- Local-nav breakpoints 834px and 1024px (from `--r-localnav-viewport-*` variables). +- The two-up tiles and nav layout at narrow widths were not captured; only the mobile role measurements above are known. +- Button size stays 44px. +- Hero image heights shrink but remain the focus of each tile. + +## Iteration Guide + +1. Start with a black tile: 56px/600 headline in #f5f5f7, a 21px tagline, and a 44px pill in #0071e3. +2. Add a light tile in #f5f5f7 with #1d1d1f ink and #0066cc secondary pills. +3. Place large photography beneath the text; do not frame it. +4. Add the 44px translucent nav (#1d1d1fcc) and a 12px alpha-black footer. +5. Check headline tracking and button tracking; the negative values are what make it feel Apple-like. +6. For Thai or other locales, swap in the locale cut (SF Pro TH) without changing sizes. + +### Quick checklist before shipping a tile +- Is there exactly one headline, one tagline and at most two buttons? +- Does the ink match the background (#f5f5f7 on black, #1d1d1f on light)? +- Are pills 44px high with 17px labels? +- Is the media large, unframed and the only source of saturated colour? +- Is the footnote text 12px with alpha-black ink? diff --git a/skills/scd-uiux/data/vendor/design-systems/library/application/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/application/DESIGN.md new file mode 100644 index 0000000..c06befa --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/application/DESIGN.md @@ -0,0 +1,71 @@ +# Design System Inspired by Application + +> Category: Professional & Corporate +> App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows. + +## 1. Visual Theme & Atmosphere + +App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows. + +- **Visual style:** modern, clean, high-contrast, glass-like panels, soft shadows, rounded components +- **Color stance:** primary (purple), neutral, success, warning, danger +- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability. + +## 2. Color + +- **Primary:** `#9333EA` — Token from style foundations. +- **Secondary:** `#A855F7` — Token from style foundations. +- **Success:** `#10B981` — Token from style foundations. +- **Warning:** `#F59E0B` — Token from style foundations. +- **Danger:** `#EF4444` — Token from style foundations. +- **Surface:** `#FFFFFF` — Token from style foundations. +- **Text:** `#09090B` — Token from style foundations. +- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility. + +- Favor Primary (#9333EA) for CTA emphasis. +- Use Surface (#FFFFFF) for large backgrounds and cards. +- Keep body copy on Text (#09090B) for legibility. + +## 3. Typography + +- **Scale:** 12/14/16/20/24/32 +- **Families:** primary=Inter, display=Inter, mono=JetBrains Mono +- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900 +- Headings should carry the style personality; body text should optimize scanability and contrast. + +## 4. Spacing & Grid + +- **Spacing scale:** 4/8/12/16/24/32 +- Keep vertical rhythm consistent across sections and components. +- Align columns and modules to a predictable grid; avoid ad-hoc offsets. + +## 5. Layout & Composition + +- Prefer clear content blocks with consistent internal padding. +- Keep hierarchy obvious: headline → support text → primary action. +- Use whitespace to separate concerns before adding borders or shadows. + +## 6. Components + +- Buttons: primary action uses `#9333EA`; secondary actions stay neutral. +- Inputs: strong focus-visible states, clear labels, and predictable error messaging. +- Cards/sections: use consistent radii, spacing, and elevation strategy across the page. + +## 7. Motion & Interaction + +- Use subtle transitions that emphasize Primary (#9333EA) as the interaction signal. +- Default to short, purposeful transitions (150–250ms) with stable easing. +- Ensure hover, focus-visible, active, disabled, and loading states are explicit. + +## 8. Voice & Brand + +- Tone should reflect the visual style: concise, confident, and product-specific. +- Keep microcopy action-oriented and avoid generic filler language. +- Preserve the style identity in headlines while keeping UI labels literal and clear. + +## 9. Anti-patterns + +- Do not introduce off-palette colors when an existing token can solve the problem. +- Do not flatten hierarchy by using the same type size/weight for all text. +- Do not add decorative effects that reduce readability or accessibility. +- Do not mix unrelated visual metaphors in the same interface. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/appwrite/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/appwrite/DESIGN.md new file mode 100644 index 0000000..67f79b3 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/appwrite/DESIGN.md @@ -0,0 +1,223 @@ +--- +version: alpha +name: Appwrite +category: "Backend, Database & DevOps" +description: "Appwrite's open-source cloud site: a white #ffffff canvas, zinc #71717b body text and #09090b headings, Appwrite Pink #fd366e buttons with 8px corners, light Aeonik Pro 76px/400 display headlines with a trailing underscore, system-UI body at 15px/24px, and frosted #ffffffcc product cards." +colors: + canvas: "#ffffff" + ink: "#71717b" + ink-strong: "#09090b" + primary: "#fd366e" + on-primary: "#ffffff" + brand-light-grey: "#ededf0" + brand-dark-grey: "#19191d" + surface-muted: "#f4f4f5" + ink-soft: "#0b0b0ecc" + ink-plum: "#0d090bd9" + ink-slate: "#45556c" + hairline: "#e7e7ea" + card-bg: "#ffffffcc" +typography: + display: + fontFamily: "\"Aeonik Pro\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, sans-serif" + fontSize: 76px + fontWeight: 400 + lineHeight: 79.04px + letterSpacing: "-1.672px" + display-mobile: + fontFamily: "\"Aeonik Pro\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, sans-serif" + fontSize: 48px + fontWeight: 400 + lineHeight: 49.92px + letterSpacing: "-1.056px" + heading: + fontFamily: "\"Aeonik Pro\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 27px + letterSpacing: "-0.45px" + subheading: + fontFamily: "\"Aeonik Pro\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, sans-serif" + fontSize: 17px + fontWeight: 400 + lineHeight: 25.5px + letterSpacing: "-0.17px" + body: + fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 15px + fontWeight: 400 + lineHeight: 24px + button: + fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 14px + fontWeight: 500 + lineHeight: 21px + nav: + fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + button-secondary: + fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 13px + fontWeight: 500 + lineHeight: 19.5px +rounded: + xs: 3px + sm: 4px + md: 6px + lg: 8px + xl: 10px + 2xl: 14px + 3xl: 16px + 4xl: 28px + pill: 9999px +spacing: + s1: 1px + s2: 2px + s3: 4px + s4: 6px + s5: 8px + s6: 10px + s7: 12px + s8: 14px + s9: 16px + s10: 20px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.lg}" + padding: 0px 24px + height: 40px + button-secondary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button-secondary}" + rounded: "{rounded.lg}" + padding: 0px 12px + height: 36px + link: + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.lg}" + padding: 0px 24px + borderColor: "{colors.hairline}" + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + padding: 0px 24px 0px 16px + nav-link: + textColor: "{colors.ink-strong}" + typography: "{typography.nav}" + rounded: "{rounded.xl}" + padding: 0px 8px + card: + backgroundColor: "{colors.card-bg}" + textColor: "{colors.ink}" + rounded: "{rounded.lg}" + borderColor: "{colors.hairline}" + boxShadow: >- + rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px + 1px 2px -1px + footer: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + borderColor: "{colors.hairline}" +--- + +# Appwrite + +## Overview + +Appwrite is an open-source backend cloud (Auth, Databases, Storage, Functions, Messaging, Realtime, Sites) and its home page at appwrite.io is a bright, airy product tour on pure white. The hero centres a light-weight Aeonik Pro headline, "The open-source cloud for agents & devs_", at 76px with a trailing underscore that recurs on every section title ("All the services you need in one platform_", "Designed for the AI agents in your workflow_", "Loved by teams building in production_"), a typed-cursor motif that signals a developer audience. Above the headline sits a small pill announcement ("Breaking — We're thrilled to announce…"); below it, an intro paragraph and two buttons: the pink "Start project" and a quieter outlined "View docs". + +The hero then drops into a large product screenshot of the Appwrite console — a usage chart drawn in pink, project sidebar and stats — on a soft pink-tinted glow. The page continues with a framework logo strip, a bento grid of product cards (each card is a miniature UI: a sign-in form, a database table, a storage upload, function logs), an AI-agent section with a chat mock and a benchmark table ("AI Arena"), customer logos and a case-study quote, an "Embedded security" grid of compliance cards, "The Appwrite Network" dotted globe, a big-number stats band, a pink line chart, pricing cards ($0, $25, Custom) and a dense link footer. + +The voice is direct and developer-centric: "Start project", "View docs", "Built into every Appwrite project". Imagery is entirely product UI plus a few photos (the kittens in the storage demo) and pale gradient washes. + +## Colors + +The official assets page (https://appwrite.io/assets) lists three brand colors: **Appwrite Pink #FD366E**, **Light Grey #EDEDF0** and **Dark Grey #19191D**. + +- **Primary #fd366e** — Appwrite Pink, measured on every filled button ("Start project", "Sign up", "Start building"); also the color of the usage chart in the console screenshot. Hover lowers opacity to 0.9 (measured). +- **On-primary #ffffff** — button labels. +- **Canvas #ffffff** — the page background and by far the largest painted area. +- **Ink #71717b** — the most-read text color: paragraphs, nav items, footer links. +- **Ink-strong #09090b** — headings and card titles; **ink-soft #0b0b0ecc** and **ink-plum #0d090bd9** are translucent near-blacks for secondary headings; **ink-slate #45556c** for small labels. +- **Surface-muted #f4f4f5** — muted fills (tabs, chips, table headers). +- **Hairline #e7e7ea** — the dominant border color on cards, inputs and the footer. +- **Card-bg #ffffffcc** — 80% white frosted cards over the soft background glows. +- **Brand-light-grey #ededf0** and **brand-dark-grey #19191d** — the official neutrals from the assets page, for logo backgrounds and brand material. + +A green (#009966) appears in small status text (uptime, success states); it is a status color, not a brand color. + +## Typography + +Two families carry the page: + +- **Aeonik Pro** (loaded at 400) — every heading. Display 76px / 79.04px, weight 400, -1.672px tracking; section titles measure 48px and 44px (with -1.2px and -1.1px tracking); heading 18px / 27px with -0.45px; card titles (subheading) 17px / 25.5px with -0.17px. The brand never bolds Aeonik on this page — hierarchy comes from size and tight tracking. +- **System UI stack** (-apple-system, system-ui, Segoe UI, Roboto, …) — all body and interface text. Body 15px / 24px weight 400; button 14px / 21px weight 500; small button 13px / 19.5px weight 500; nav 16px / 24px. By character count 13px is the most common size, reflecting the many small UI labels inside the product mocks. +- **ui-monospace** — code snippets and command text. + +Uppercase micro-labels use positive tracking (11px with 0.55px or 2.2px, 12px with 0.6px). Aeonik Pro is a licensed typeface served by the site; for prototypes without a licence use a geometric grotesk such as Inter or Manrope at weight 400 with the same negative tracking. + +## Layout + +At 1280px the hero content spans from 140px to 1256px and is centred; later sections run as wide as 24px to 1256px for the bento grid and stats. Card grids reach three columns. The header shows ten visible items (products menu, Docs, Pricing, Enterprise, Customers, Blog, Changelog, the GitHub star count, Sign in, Sign up). + +Spacing is tight and component-driven: 6px is the most frequent gap, followed by 8px and 4px; paddings cluster at 8px, 12px, 6px and 4px. Section-scale paddings of 28px, 40px and 80px separate blocks. The spacing tokens step 1, 2, 4, 6, 8, 10, 12, 14, 16 and 20px. The page is long (about 9670px at desktop) and dense with miniature UI. + +## Elevation & Depth + +Depth is subtle. Cards use a 1px #e7e7ea border plus a soft 10% black 0px 1px 3px / 0px 1px 2px -1px shadow (the card token). Many elements use a 1px ring rendered as a box-shadow, and inset 1px hairlines (6% near-black top highlight, -1px left border line) to fake bevelled edges on panels. Translucent white fills — #ffffffcc, #ffffff73 and lower alphas — layer over faint pink and lilac background glows (#fff6f9 and #faf6fd bands were measured), giving a glassy depth without dark shadows. + +## Shapes + +8px is the dominant radius, used on buttons, cards and inputs. Pills (9999px) shape the announcement chip, badges and toggles. 6px, 14px, 3px, 10px and 4px appear on smaller controls; 16px and a 28px top-rounded (28px 28px 0px 0px) shape frame the large console screenshot. Icons are outline-style with rounded joins. + +## Components + +- **Primary button** — #fd366e fill, white system-UI 14px weight 500, 8px radius, 0px 24px padding, 40px tall ("Start project"). +- **Small primary** — same fill, 13px label, 0px 12px padding, 36px tall ("Sign up" in the header). +- **Outlined button** — #71717b label with a 1px #e7e7ea border, 8px radius, 0px 24px padding ("View docs"). +- **Announcement pill** — 70% white fill, #e7e7ea border, 12px weight 500 text, 0px 10px padding, 28px tall, pill radius. +- **Nav** — white header with #71717b items and #09090b nav links at 16px, 10px radius hover targets, 0px 8px padding. +- **Product card** — #ffffffcc, 8px radius, #e7e7ea border, light shadow; a 17px Aeonik title, muted 15px description and an embedded UI mock. +- **Integration chip** — 60% white, #e7e7ea border, 10px radius, 10px 12px padding ("Codex — Official"). +- **Pricing card** — plan name, large price, short description and a full-width pink "Start project" button with 8px 16px padding. +- **Footer** — white, #e7e7ea top border, uppercase micro-headings and dense #71717b link columns. + +## Design System Architecture + +Appwrite's official design system is **Pink** (https://github.com/appwrite/pink): "Appwrite's official framework agnostic design system", shipped as the CSS library `@appwrite.io/pink` and the `@appwrite.io/pink-icons` icon set, with documentation at pink.appwrite.io. The repository was archived (read-only) on Sep 7, 2026, and its README publishes no token values. Brand colors and logo rules are published at https://appwrite.io/assets. The marketing site measured here ships a Tailwind v4 theme with shadcn-style semantic variables (`--card`, `--muted`, `--border`, `--primary-foreground`, `--sidebar-primary-foreground`) and `--radius-*` steps derived from a 0.625rem base, rather than Pink's classes. + +## Do's and Don'ts + +**Do** +- Use Appwrite Pink #fd366e for filled actions and data highlights only; keep everything else white and zinc. +- Set headings in Aeonik Pro at weight 400 with negative tracking, and end section titles with the underscore cursor. +- Illustrate products with real, miniature console UI inside frosted 8px cards. +- Keep body copy in the system UI stack at 15px / 24px in #71717b. +- Write the name "Appwrite" with a lowercase w and no space, as the assets page requires. + +**Don't** +- Don't alter the logo or place it on busy backgrounds; the assets page prefers neutral backgrounds. +- Don't use bold display weights; the measured headings are all 400. +- Don't introduce dark sections on the marketing page — the measured page is white from top to footer. +- Don't treat the green status text as a second brand color. + +## Responsive Behavior + +The extractor's mobile pass at 390px measured: the display headline at 48px / 49.92px with -1.056px tracking; the h2 at 16px / 24px with -0.4px; body text at 14px / 24px; the primary button unchanged (14px, 40px tall, 0px 24px padding, 8px radius). Three header items remain visible and a menu toggle labelled "Open website navigation" appears. The maximum card columns recorded on mobile is 3 (small grids such as the stats and logo rows); content spans 16px to 378px. The stylesheet declares min-width queries at 419px, 420px, 640px (most used), 768px, 1000px, 1024px, 1200px, 1280px and 1536px, plus max-width 600px and 1024px. Other mobile layout changes were not measured. + +## Iteration Guide + +1. Start on #ffffff with #71717b text and #09090b headings; add #e7e7ea hairlines. +2. Use Aeonik Pro 400 for headings (76px display, 44–48px section titles) with the trailing underscore. +3. Make every filled button #fd366e with an 8px radius and 40px height; secondary actions are outlined. +4. Build the bento grid from frosted #ffffffcc cards containing live-looking product UI. +5. Add faint pink and lilac glows behind key sections instead of dark bands. +6. Keep spacing on the 4/6/8/12px ladder inside components. +7. Check the 48px mobile display and the 390px layout before shipping. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/arc/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/arc/DESIGN.md new file mode 100644 index 0000000..fafe1d7 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/arc/DESIGN.md @@ -0,0 +1,210 @@ +--- +version: alpha +name: Arc +category: "Productivity & SaaS" +description: "Arc's arc.net is a playful brand-blue site: #3139fb headings and full-bleed bands, an #fffcec off-white, Marlin Soft SQ 700 headlines with tight tracking (45.51px hero, 28px sections at -1.4px), ABC Oracle body, #2702c2 and white download buttons at 10px radius, and pastel browser screenshots as the main imagery." +colors: + canvas: "#ffffff" + ink: "#3139fb" + primary: "#2702c2" + on-primary: "#ffffff" + brand-blue: "#3139fb" + offwhite: "#fffcec" + brand-deep-blue: "#2404aa" + brand-dark-blue: "#000354" + brand-red: "#fb3a4d" + ink-body: "#000000a6" + ink-grey: "#696969" + ink-cream: "#fffadd" + ink-black: "#000000" + dia-button: "#000000d9" + focus: "#96c4ff" +typography: + display: + fontFamily: "\"Marlin Soft SQ\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 45.51px + fontWeight: 700 + lineHeight: 42.25px + letterSpacing: "-1.8204px" + display-mobile: + fontFamily: "\"Marlin Soft SQ\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 32px + fontWeight: 700 + lineHeight: 31.2px + letterSpacing: "-1.6px" + heading: + fontFamily: "\"Marlin Soft SQ\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 28px + fontWeight: 700 + lineHeight: 30.8px + letterSpacing: "-1.4px" + body: + fontFamily: "\"ABC Oracle\", Helvetica, sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 24px + button: + fontFamily: "-apple-system, \"system-ui\", sans-serif" + fontSize: 14px + fontWeight: 600 + lineHeight: 29px + letterSpacing: "-0.14px" + nav: + fontFamily: Marlin, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif + fontSize: 16px + fontWeight: 400 + nav-pill: + fontFamily: "\"Marlin Soft SQ\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif" + fontSize: 14px + fontWeight: 500 + letterSpacing: "-0.28px" +rounded: + none: 0px + xs: 4px + sm: 8px + md: 10px + lg: 22px +spacing: + s1: 3px + s2: 4px + s3: 6px + s4: 8px + s5: 10px + s6: 12px + s7: 16px + s8: 20px + s9: 24px + s10: 32px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 8px 0px + height: 45px + boxShadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 0px + button-secondary: + backgroundColor: "{colors.canvas}" + textColor: "{colors.primary}" + typography: "{typography.button}" + rounded: "{rounded.md}" + height: 45px + button-dia: + backgroundColor: "{colors.dia-button}" + textColor: "{colors.on-primary}" + rounded: "{rounded.lg}" + height: 76px + boxShadow: rgba(0, 0, 0, 0.25) 0px 2px 8px 0px + nav: + textColor: "{colors.on-primary}" + nav-pill: + textColor: "{colors.on-primary}" + typography: "{typography.nav-pill}" + rounded: "{rounded.sm}" + padding: 8px 10px + height: 36px + nav-pill-hover: + backgroundColor: rgba(23, 3, 148, 0.5) + link: + textColor: "{colors.ink-cream}" + typography: "{typography.nav}" + footer: + backgroundColor: "{colors.brand-blue}" + textColor: "{colors.offwhite}" + typography: "{typography.heading}" +--- + +## Overview + +Arc is a web browser from The Browser Company (the measured page title is "Arc from The Browser Company"), and arc.net sells it with a cheerful, editorial look built on one saturated blue. The desktop capture opens with a slim header of white nav pills ("Max", "Mobile", "Developers", "Students", "Blog") above a soft pastel band promoting the company's newer browser: "Meet Dia, the next evolution of Arc", a short grey line ("Weekly security updates, SOC 2 certification, and the Arc DNA you know (and love).") and a dark, rounded "Try Dia" button with an app icon, followed by a cropped Dia window. + +A wavy edge then opens into a full-bleed brand-blue `#3139fb` band with a large pull quote ("Arc is the Chrome replacement I've been waiting for." — The Verge), two download buttons and a purple-tinted Arc window. A marquee of press quotes (Bloomberg, Inverse, Fast Company) runs below. White sections follow, each with a centred blue headline and a large screenshot: "A browser that doesn't just meet your needs — it anticipates them." over a photo collage, "Space for the different sides of you." with a coral-framed Spaces window, "Your perfect setup." with a mint Split View window and a colour-picker panel, and "The comfort of privacy." The page ends with a cream `#fffcec` band of user quotes with handwritten-style icons, a blue "Enter your new home on the internet" call-out with a white download button, and a blue footer. + +The voice is warm and witty — "Way more powerful than Chrome. Arc looks like the future of browsers.", "Arc brought order to the chaos that was my online life." Imagery is product screenshots in pastel theme colours rather than photography of people. + +## Colors + +The site's root variables name the brand palette: `--colors-brandBlue #3139FB`, `--colors-brandDeepBlue #2404AA`, `--colors-brandDarkBlue #000354`, `--colors-brandRed #FB3A4D`, `--colors-brandOffwhite #FFFCEC`, plus `--colors-focusOutline #96C4FF`. + +- **Canvas `#ffffff`** — section backgrounds between bands. +- **Ink / brand blue `#3139fb`** — the most-read text colour (section headlines) and the background of the quote band and footer. +- **Primary `#2702c2`** — the "Download Arc for Windows" fill and the text of the white "Download Arc for Mac" button. +- **Off-white `#fffcec`** — the testimonial band and the text on blue (footer, quote). +- **Cream `#fffadd`** — link text on blue bands. +- **Body `#000000a6`** — 65% black for paragraph copy; `#696969` for small grey sublines; `#000000` for a few nav elements. +- **Dia button `#000000d9`** — 85% black, hover 65%. +- **Brand red `#fb3a4d`**, **deep blue `#2404aa`**, **dark blue `#000354`** — declared brand colours not measured as rendered fills on this page. + +## Typography + +Arc uses an unusually large type kit, all loaded on the home page: **Marlin Soft SQ** (500, 700, 700 italic) for headlines and nav pills; **Marlin** (800) for links; **ABC Oracle** (400) for body copy; **InterVariable** / **Inter** (500–700) as `--fonts-body` and `--fonts-cta`; **ABC Favorit Mono** (400, 700) for monospaced labels; and **Exposure VAR** (700, 750) for display accents. Download buttons use the system stack (`-apple-system, "system-ui"`). + +| Role | Family | Size / line-height | Weight | Tracking | +|---|---|---|---|---| +| Display (quote h1) | Marlin Soft SQ | 45.51px / 42.25px | 700 | -1.8204px | +| Heading (sections, footer) | Marlin Soft SQ | 28px / 30.8px | 700 | -1.4px | +| Body | ABC Oracle | 20px / 24px | 400 | normal | +| Nav pill | Marlin Soft SQ | 14px | 500 | -0.28px | +| Button | system | 14px / 29px | 600 | -0.14px | +| Link | Marlin | 16px | 400 | normal | + +Headlines are tight: line-height below font size on the display, and tracking of about -4% (-1.4px at 28px, -1.6px at 40px, -1.82px at 45.51px). Small mono labels go the other way — 12px at +0.4px, +0.6px and +1.8px. Weight 700 dominates the measured characters. + +**Substitutes:** Marlin and ABC Oracle are commercial faces. Inter, already declared in the site's stacks, is the in-system fallback; keep the negative tracking on headlines. + +## Layout + +Each section is centred: a headline, a one-line subline, then a large screenshot or collage at nearly the full content width. Bands are separated by wavy or zig-zag edges (visible in the capture between the Dia band, the blue quote band and the marquee). The testimonial band is a four-column row; the extractor measured a maximum of eight card columns on desktop. Measured gaps are led by 12px, then 16px, 8px, 6px, 24px and 32px; paddings by 24px, then 32px, 8px, 16px and 10px. The root variables define a spacing scale `--space-4` to `--space-72` and `--padding: 32px`. + +## Elevation & Depth + +Shadows are soft and declared as three tokens: `--shadows-small` (`0 5px 10px rgba(0, 0, 0, 0.12)`), `--shadows-medium` (`0 8px 30px rgba(0, 0, 0, 0.12)`) and `--shadows-large` (`0 30px 60px rgba(0, 0, 0, 0.12)`). Measured on the page: `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px` under the download buttons and `rgba(0, 0, 0, 0.25) 0px 2px 8px 0px` under "Try Dia". Screenshots float on white with a large soft shadow in the capture, which gives the page its "windows on a desk" depth. + +## Shapes + +Measured radii: 8px (nav pills and small UI), 10px (download buttons), 22px ("Try Dia") and 4px. The root variables offer `--radii-2`, `-4`, `-8`, `-12`, `-16`, `-32` and `--radii-round: 9999px`. Bands use decorative wavy edges rather than rounded corners; screenshots show the rounded window frames of the Arc app itself. + +## Components + +- **Primary button** — "Download Arc for Windows": `#2702c2`, white system 14px/600, 45px tall, 10px radius, `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px` shadow. Hover left it unchanged. +- **Secondary button** — "Download Arc for Mac": white fill, `#2702c2` text, same metrics, with an Apple icon. +- **Dia button** — 85% black, white text with an app icon, 76px tall, 22px radius; hover to 65% black. +- **Nav pill** — white Marlin Soft SQ 14px/500, 8px 10px padding, 36px tall, 8px radius; hover fills `rgba(23, 3, 148, 0.5)`. +- **Quote card** — on the cream band: a bold blue quote in Marlin Soft SQ and a small outlined handle tag below (capture). +- **Press marquee** — a single line of italic quotes with publication logos (capture). +- **Footer** — `#3139fb` background, `#fffcec` text, 28px/700 heading "Enter your new home on the internet", product and resource link columns, and a "The Browser Company of New York" mark. + +## Design System Architecture + +No public design system, press kit or brand guideline was found: the home page's header and footer links (https://arc.net/) point to product, legal, resource-centre and social pages, and https://arc.net/credits lists tester names without design credits. The site's shipped CSS shows a token layer of 120 root custom properties grouped as `--colors-*` (brand colours, a `primary1–12` red-orange scale and `secondary1–12` green scale, student-page colours, `focusOutline`), `--fonts-*` (named stacks: `sans`, `softSans`, `oracle`, `exposure`, `mono`, `cta`, `body`), `--fontSizes-*`, `--lineHeights-*`, `--fontWeights-*`, `--space-*`, `--sizes-*`, `--radii-*` and `--shadows-small/medium/large`. + +## Do's and Don'ts + +**Do** +- Use `#3139fb` for headlines and for full-bleed bands, with `#fffcec` text on blue. +- Set headlines in Marlin Soft SQ 700 with roughly -4% tracking and tight line-height. +- Show the product as large screenshots in pastel theme colours. +- Pair a `#2702c2` button with a white one, both 10px radius. +- Keep shadows soft (0.1–0.12 alpha) and let wavy edges separate bands. + +**Don't** +- Don't use the brand red `#fb3a4d` for primary actions; buttons are blue, white or black. +- Don't set body copy in pure black; it is 65% black in ABC Oracle. +- Don't track headlines positively; only small mono labels are letter-spaced open. +- Don't square off buttons or pills. +- Don't replace screenshots with stock photography of people. + +## Responsive Behavior + +Measured at 390px: the quote h1 drops from 45.51px to 32px (line-height 31.2px, tracking -1.6px) and the Dia heading from 36px to 30px; body copy drops from 20px to 16px in ABC Oracle; the Windows download button keeps its 45px height. The header shows one visible link and an "Open navigation menu" toggle at 390px, versus six visible links and no toggle on desktop. The mobile size list adds 27.2px (from 40px on desktop). Breakpoints in the stylesheet include `min-width 480px`, `580px`, `600px`, `650px`, `800px`, `960px`, `1000px`, `1075px` and `1100px`, and `max-width 600px` and `480px`. Other reflow was not measured. + +## Iteration Guide + +1. White sections and `#3139fb` bands; text on blue in `#fffcec`. +2. Headlines in Marlin Soft SQ 700, blue, centred, about -4% tracking; sublines small and grey. +3. Body in ABC Oracle (Inter as fallback) at 65% black. +4. Buttons: `#2702c2` or white, 45px, 10px radius, soft 5px shadow; nav as 8px pills. +5. One large product screenshot per section, framed by a soft `--shadows-large`. +6. Use cream `#fffcec` bands for social proof. +7. Reach for the declared `--colors-*`, `--radii-*` and `--shadows-*` tokens before adding values. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/arcadia/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/arcadia/DESIGN.md new file mode 100644 index 0000000..1425218 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/arcadia/DESIGN.md @@ -0,0 +1,540 @@ +--- +version: alpha +name: Arcadia +category: "Energy & Climate" +description: "Arcadia (arcadia.com), the energy intelligence platform: deep Evening Sea greens (#0b2c24 full-bleed bands, #104336 cards and buttons) over a warm Pampas #f3f1ec page top, with Arcadia Green #0fff87 reserved for the primary call to action. Everything is set in DM Sans (served as __DMSans_cff41e), light 300 for 56px/61.6px hero headlines with +0.56px tracking, 16-20px regular body in cream #f9f3e8 on the dark canvas and #535e5d on the light Pampas top. Buttons are 8px-radius rectangles 42-48px tall; product cards use 16px corners and 24px padding." + +colors: + primary: "#0fff87" + primary-dark: "#0cc769" + on-primary: "#104336" + canvas: "#0b2c24" + pampas: "#f3f1ec" + pampas-light: "#f8f7f4" + evening-sea: "#104336" + evening-sea-dark: "#0b2c24" + evening-sea-mid: "#4c7c6f" + evening-sea-light: "#afc4bf" + mid-green: "#004d42" + light-green: "#4e6c67" + black: "#101f1e" + black-hover: "#515c5b" + heading: "#000000" + ink: "#f9f3e8" + ink-on-light: "#535e5d" + gray: "#798281" + cream: "#f9f3e8" + cream-muted: "#f7f6f380" + off-cream: "#fffaf0" + white: "#ffffff" + electric-violet: "#7c18d3" + blue-marguerite: "#6666d9" + viking: "#5cc4dc" + viking-light: "#d5f0f6" + lime: "#c4ff45" + lime-hover: "#afdf3e" + coral: "#ff6b78" + danger: "#d80e20" + scrim: "#00000099" + nav-hover-tint: "#0040370d" + +typography: + display-h1: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 56px + fontWeight: 300 + lineHeight: 61.6px + letterSpacing: 0.56px + heading-xl: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 48px + fontWeight: 300 + lineHeight: 52.8px + letterSpacing: 0.48px + heading-lg: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 36px + fontWeight: 300 + lineHeight: 43.2px + letterSpacing: 0.36px + heading-md: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 24px + fontWeight: 400 + lineHeight: 28.8px + letterSpacing: 0.24px + title: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 20px + fontWeight: 500 + lineHeight: 24px + letterSpacing: 0.2px + body-lg: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 20px + fontWeight: 400 + lineHeight: 30px + body-md: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 27px + body: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + nav-item: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 18px + fontWeight: 500 + lineHeight: 18px + letterSpacing: -0.36px + button: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 16px + fontWeight: 700 + lineHeight: 24px + eyebrow: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 14px + fontWeight: 700 + lineHeight: 16.1px + textTransform: uppercase + date-label: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 14px + fontWeight: 700 + lineHeight: 14px + letterSpacing: 0.98px + textTransform: uppercase + stat-label: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 14px + fontWeight: 600 + lineHeight: 14px + letterSpacing: -0.28px + legal: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 11px + fontWeight: 400 + lineHeight: 16.5px + mobile-h1: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 42px + fontWeight: 300 + lineHeight: 46.2px + letterSpacing: 0.42px + mobile-body: + fontFamily: "__DMSans_cff41e, __DMSans_Fallback_cff41e, \"DM Sans\", sans-serif" + fontSize: 14px + fontWeight: 400 + lineHeight: 21px + +rounded: + button: 8px + card: 16px + nav-item: 18px + circle: 50% + +spacing: + xs: 4px + sm: 8px + md: 16px + lg: 24px + xl: 32px + 2xl: 40px + 3xl: 48px + 4xl: 64px + section-sm: 88px + section-md: 110px + section-lg: 120px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.button}" + padding: 0px 24px + height: 42px + button-dark: + backgroundColor: "{colors.black}" + textColor: "{colors.white}" + typography: "{typography.button}" + rounded: "{rounded.button}" + padding: 0px 16px + height: 48px + button-dark-hover: + backgroundColor: "{colors.black-hover}" + button-evening-sea: + backgroundColor: "{colors.evening-sea}" + textColor: "{colors.white}" + typography: "{typography.button}" + rounded: "{rounded.button}" + padding: 0px 24px + height: 42px + button-evening-sea-hover: + backgroundColor: "{colors.evening-sea-dark}" + button-outline: + backgroundColor: transparent + textColor: "{colors.evening-sea}" + border: "1px solid {colors.evening-sea}" + typography: "{typography.button}" + rounded: "{rounded.button}" + padding: 0px 24px + height: 42px + button-outline-hover: + backgroundColor: "{colors.evening-sea}" + textColor: "{colors.cream}" + button-outline-on-dark: + backgroundColor: transparent + textColor: "#f3eee3" + border: "1px solid {colors.cream}" + rounded: "{rounded.button}" + padding: 0px 24px + height: 42px + nav: + backgroundColor: "{colors.pampas}" + height: 68px + nav-dark: + backgroundColor: "{colors.evening-sea-dark}" + textColor: "{colors.cream}" + height: 68px + nav-item: + textColor: "{colors.evening-sea}" + typography: "{typography.nav-item}" + rounded: "{rounded.nav-item}" + height: 34px + nav-item-hover: + backgroundColor: "{colors.nav-hover-tint}" + card-product: + backgroundColor: "{colors.evening-sea}" + textColor: "{colors.cream}" + rounded: "{rounded.card}" + padding: 24px + card-light: + backgroundColor: "{colors.white}" + textColor: "{colors.black}" + rounded: "{rounded.card}" + footer: + backgroundColor: "{colors.black}" + textColor: "{colors.cream}" + typography: "{typography.body}" + link: + textColor: "{colors.cream}" + typography: "{typography.body}" +--- + +## Overview + +Arcadia's marketing site (measured at `https://www.arcadia.com/`, title "Arcadia: The leading energy +intelligence platform") is a calm, editorial B2B page built from three ingredients: a warm off-white +**Pampas** (`#f3f1ec`) page top, very deep **Evening Sea** greens (`#0b2c24` for full-bleed bands, +`#104336` for cards and buttons, `#101f1e` "black" for the footer) and a single electric +**Arcadia Green** (`#0fff87`) used almost exclusively as the call-to-action fill. + +The capture reads in two movements. First: a light Pampas header and a rounded hero panel with a soft +lavender-to-sage gradient wash, a centred light-weight headline ("Energy management to save money, +mitigate risk, and cut carbon."), a short centred paragraph, one dark "Request demo" button, and a large +product screenshot (white dashboard cards, purple/cyan/lime waterfall charts) sitting inside the panel. +Below it a single-line "Trusted by…" sentence and a greyscale customer-logo marquee (Cargill, EVgo, +Oracle, Costco, Ford, Iron Mountain, FedEx). Second: the page drops into a long full-bleed `#0b2c24` +band — that dark band is what covers the most pixels in the capture (about 45%), so it is the +**canvas** in this file, with Pampas as the light surface above it. Because the canvas is dark, the +file's `ink` is the cream `#f9f3e8` that the site sets on those bands (`--color-cream`); the grey-green +`#535e5d` that reads on Pampas is kept as `ink-on-light`. + +Typography is one family — DM Sans — and the signature is lightness: headlines are weight **300** +with slight *positive* tracking (+0.01em: 56px → 0.56px, 48px → 0.48px, 36px → 0.36px). Body copy is +regular 400 in a grey-green `#535e5d`. Bold 700 is used only inside buttons and small uppercase +eyebrows. Nothing is condensed, nothing is italic, nothing shouts. + +Shape language is soft but restrained: 8px buttons, 16px cards and hero panel, 18px pill-ish nav +hover chips, 50% circles for icons. No shadows were measured on the page (the `boxShadows` frequency +table is empty); depth comes from tone changes between Pampas, white and the greens. + +**Key characteristics** +- Arcadia Green `#0fff87` with Evening Sea text `#104336` = the primary CTA (42px tall, 8px radius, `0px 24px` padding). +- Hero headline DM Sans 56px / 300 / 61.6px line height / +0.56px tracking, black `#000000`. +- Body ink on the dark canvas is cream `#f9f3e8` (905 weighted chars); on Pampas it is `#535e5d` (920 weighted chars, the most-read colour), 16px/24px. +- Dark product cards: `#104336`, 16px radius, 24px padding, cream `#f9f3e8` text. +- Full-bleed bands alternate Pampas `#f3f1ec` → Evening Sea dark `#0b2c24` → black `#101f1e` footer. +- Accent colours (violet `#7c18d3`, viking `#5cc4dc`, lime `#c4ff45`) appear only in charts, eyebrows and illustration. + +## Colors + +All hex values below come from the live page's computed styles or its own CSS custom properties +(`desktop.rootVars`, e.g. `--color-eveningSea=#104336`). Official names are from +[Arcadia's brand guidelines – Color](https://guidelines.arcadia.com/color). + +### Core +| Token | Hex | Live CSS variable | Role | +|---|---|---|---| +| primary | `#0fff87` | `--color-springGreen` | CTA fill ("Arcadia Green" in the guidelines) | +| primary-dark | `#0cc769` | `--color-springGreen-dark` | darker green step in the site's CSS | +| evening-sea | `#104336` | `--color-eveningSea` | buttons, product cards, text on green | +| evening-sea-dark | `#0b2c24` | `--color-eveningSea-dark` | full-bleed dark bands, dark header state | +| canvas | `#0b2c24` | — | largest-area colour in the capture (≈45%) | +| pampas | `#f3f1ec` | `--color-pampus` | body background / light page top | +| pampas-light | `#f8f7f4` | `--color-pampus-light` | lighter surface ("Paper White" in the guidelines) | +| black | `#101f1e` | `--color-black` | footer, "Request demo" button | +| cream | `#f9f3e8` | `--color-cream` | text on dark bands, footer text | + +### Text +| Token | Hex | Where measured | +|---|---|---| +| ink | `#f9f3e8` | body text on the dark canvas (905 weighted chars); `--color-cream` | +| ink-on-light | `#535e5d` | most-read text (920 weighted chars), body paragraphs on Pampas; `--color-darkGray` | +| heading | `#000000` | h1, light-section h2/h3 | +| evening-sea-light | `#afc4bf` | paragraphs on dark bands (18px/27px) | +| cream-muted | `#f7f6f380` | footer legal (11px) and "Cookie settings" | +| gray | `#798281` | `--color-gray` | + +### Accents (charts, eyebrows, illustration) +| Token | Hex | Guideline name | +|---|---|---| +| electric-violet | `#7c18d3` | Electric Violet — measured on 14px/700 uppercase eyebrows and dates | +| blue-marguerite | `#6666d9` | Blue Marguerite | +| viking | `#5cc4dc` | Viking | +| viking-light | `#d5f0f6` | — | +| lime | `#c4ff45` | Aurora | +| lime-hover | `#afdf3e` | — (`--color-lime-hover`) | +| coral | `#ff6b78` | — | +| danger | `#d80e20` | — (`--color-danger`) | + +### Alpha / state +- `scrim` `#00000099` — 60% black overlay measured over a large area (modal/video layer). +- `nav-hover-tint` `#0040370d` — `rgba(0,64,55,.05)`, the background a nav button takes on hover (`--color-eveningSea05`). +- `black-hover` `#515c5b` — measured hover fill of the `#101f1e` "Request demo" button. + +The site also defines opacity ladders as variables: `--color-eveningSea05 … eveningSea90`, +`--color-cream05 … cream90` and `--color-black05 … black60`. Use those rather than inventing tints. + +**Guidelines vs live.** The brand guidelines give proportions — Evening Sea ~20%, Arcadia Green ~15% +"use sparingly", Pampas ~25% — and secondary colours Deep Sea `#0E382D` and Dark Green `#145242`. +Those two secondary hexes were not found on the live homepage; the live dark band is +`#0b2c24`. The live site wins; they are not tokens in this file. + +## Typography + +### Family +DM Sans is the only family rendered on the homepage (4,034 of 4,034 weighted characters). It is +served through Next.js font optimisation as `__DMSans_cff41e` with a metric-matched fallback +`__DMSans_Fallback_cff41e`; loaded weights are 300–700. The site's CSS also declares +`--font-heading: '__TTBluescreens_0cdbc8'` with a matching `@font-face`, but no measured text on the +homepage or the contact page used it, so it is not a token here. + +[Arcadia's typography guidelines](https://guidelines.arcadia.com/typography) confirm DM Sans as "the +sole typeface across the system" and state: "We favor lighter weights (300-400) for headlines … +Heavier weights (500-600) are reserved for emphasis and UI elements." + +### Scale (measured) +| Token | Size | Weight | Line height | Tracking | Use | +|---|---|---|---|---|---| +| display-h1 | 56px | 300 | 61.6px | 0.56px | hero h1 (also contact-page h1) | +| heading-xl | 48px | 300 | 52.8px | 0.48px | section h2 ("One platform. Every energy decision.") | +| heading-lg | 36px | 300 | 43.2px | 0.36px | secondary section h2 | +| heading-md | 24px | 400 | 28.8px | 0.24px | "Join our mailing list" | +| title | 20px | 500 | 24px | 0.2px | card titles (h3), "Trusted by…" line | +| body-lg | 20px | 400 | 30px | — | intro paragraphs | +| body-md | 18px | 400 | 27px | — | hero paragraph, dark-band paragraphs | +| body | 16px | 400 | 24px | — | default paragraph, footer links | +| nav-item | 18px | 500 | 18px | -0.36px | header menu buttons | +| button | 16px | 700 | 24px | — | all buttons | +| eyebrow | 14px | 700 | 16.1px | — | uppercase category labels, violet | +| date-label | 14px | 700 | 14px | 0.98px | uppercase dates, violet | +| stat-label | 14px | 600 | 14px | -0.28px | "$100B in utility spend under management" chips | +| legal | 11px | 400 | 16.5px | — | footer copyright | +| mobile-h1 | 42px | 300 | 46.2px | 0.42px | h1 at 390px | +| mobile-body | 14px | 400 | 21px | — | body at 390px | + +Rules visible in the measurements: +- Headings ≥ 20px carry tracking of exactly +1% of the size (0.2px at 20px … 0.56px at 56px). +- Small UI labels go the other way: −0.28px at 14px, −0.36px at 18px. +- Headline line height is 1.1× (61.6/56, 52.8/48) on display sizes and 1.2× at 36px and below; body is 1.5×. + +**Guidelines vs live.** The guidelines list H1 at 88px and H2 at 72px (Light 300, 100% line height, +0.02em tracking). The live homepage h1 is 56px / 61.6px with 0.01em tracking. The live site wins. + +### Note on Font Substitutes +DM Sans is an open-source family (Google Fonts), so the real face can be used directly. Load it with +weights 300, 400, 500, 600 and 700 and name it `"DM Sans"` after the served family names. + +## Layout + +- **Viewport measured:** 1280px desktop (body measured 1265px wide), 390px mobile. +- **Header:** 68px tall (the site defines `--navbar-height: 5.6rem`; its rem base is not 16px); + logo left, four menu buttons (Products, Solutions, Partners, Resources) with chevrons, then + "Sign in" outline + "Contact us" filled on the right. +- **Hero panel:** inset from the page edges, 16px radius, gradient wash background, centred text + column ~900px wide (h1 measured 900px wide), product screenshot overlapping the panel's bottom. +- **Logo marquee:** single row of greyscale customer logos on Pampas, with a centred 20px/500 lead-in. +- **Dark band:** full-bleed `#0b2c24`, h2 48px/300 in white left-aligned, then a three-up row of + `#104336` product cards (each 379px × 230px, 24px gap). +- **Grid variables:** `--grid-columnCount: 4`, `--grid-gutter: 1.6rem`, `--grid-outerGutter: 1.6rem` + (as read from `:root`). +- **Fluid section spacing:** the site's own `--spacing-*` variables are `clamp()` expressions, e.g. + `--spacing-100: clamp(5.6rem,5.952vw,10rem)`, `--spacing-64-md: clamp(4rem,5vw,6.4rem)`, + `--spacing-24-md: clamp(1.4rem,1.428vw,2.4rem)`. +- **Measured gaps:** 24px (17×), 64px (14×), 14px (12×), 16px (9×), 32px (7×), 48px, 100px. +- **Measured paddings:** 24px (21×), 40px (13×), 16px (8×), 88px, 110px, 120px, 64px. + +## Elevation & Depth + +No `box-shadow` was measured on any rendered element of the homepage. Depth is created by: +1. **Tone steps** — Pampas page → white dashboard screenshot → deep green bands → near-black footer. +2. **The hero panel gradient** — a soft lavender/sage wash inside a 16px-radius panel. +3. **Overlays** — a 60% black scrim (`#00000099`) measured over a large area. + +The CSS does ship two shadow definitions — `--dropShadow: 0 5rem 8rem rgba(0,0,0,.12)` and a +three-layer `0 8px 24px rgba(0,35,29,.18), 0 32px 72px rgba(0,35,29,.28), 0 72px 120px rgba(0,35,29,.2)` +— but neither was observed on a visible element; treat them as available, not as the default look. + +## Shapes + +| Token | Value | Where | +|---|---|---| +| button | 8px | every CTA ("Contact us", "Request demo", "Sign in") | +| card | 16px | product cards, hero panel, contact-page cards (16px measured 11×) | +| nav-item | 18px | header menu buttons (34px tall) — hover chip shape | +| circle | 50% | icon buttons / avatars (measured 10×) | + +One element uses `8px 8px 0px 0px` (top-only rounding, e.g. a tab or panel header). No skew, clip-path +or notched shapes were measured. + +## Components + +### Buttons +**button-primary (Arcadia Green)** — `#0fff87` fill, `#104336` text, DM Sans 16px/700/24px, 8px radius, +`0px 24px` padding, 42px tall (header "Contact us" in the dark header state). The same fill appears as +a 48px, `0px 16px` "Request demo"/"Request a demo" button (contact page hero, line height 16px). + +**button-dark** — `#101f1e` fill, white text, 16px/700, 8px radius, `0px 16px` padding, 48px tall — +this is the hero "Request demo" seen in the capture. Hover (measured): fill becomes `#515c5b`. + +**button-evening-sea** — `#104336` fill, white text, `0px 24px`, 42px — header "Contact us" in the +light header state visible in the capture. Hover (measured): fill becomes `#0b2c24`. + +**button-outline** — transparent, 1px `#104336` border, `#104336` text, 42px, `0px 24px`, 8px radius +("Sign in" on the light header). Hover (measured): fill `#104336`, text `#f9f3e8`. + +**button-outline-on-dark** — on the dark header state: transparent, 1px `#f9f3e8` border, text `#f3eee3`. + +### Navigation +- Header 68px. Light state: Pampas background, Evening Sea text (capture). Dark state measured by the + extractor: background `#0b2c24`, text `#f9f3e8`. +- Menu buttons: 18px/500, −0.36px tracking, 34px tall, 18px radius; hover background + `rgba(0,64,55,.05)` (`#0040370d`), text stays `#104336`. + +### Cards +- **card-product** — `#104336`, 16px radius, 24px padding, 379 × 230px, cream `#f9f3e8` text; title + 20px/500/0.2px, description 16px/24px in `#afc4bf`. +- **card-light** — white `#ffffff`, 16px radius, `#101f1e` text (contact page, 379 × 440px). + +### Eyebrows and chips +- Uppercase violet `#7c18d3` eyebrows: 14px/700, line height 16.1px (categories) or 14px with + 0.98px tracking (dates). +- Stat chips: 14px/600, −0.28px tracking, `#101f1e` text. + +### Footer +`#101f1e` background, cream `#f9f3e8` link text at 16px/24px, column heads in Arcadia Green +`#0fff87` (measured child colour), legal line 11px/16.5px in `#f7f6f380`. A mailing-list block uses +a 24px/400 heading. + +### Not declared +No text input was detected on the homepage or on `/contact` (the contact form did not render a +measurable input in the extractor), so no input component is specified here. + +## Design System Architecture + +**Arcadia publishes brand guidelines, not a public component design system.** The guidelines site is +[guidelines.arcadia.com](https://guidelines.arcadia.com/logo) with sections Intro, Brand personality, +[Logo](https://guidelines.arcadia.com/logo), [Color](https://guidelines.arcadia.com/color), +[Typography](https://guidelines.arcadia.com/typography), Art direction, Using the brand and Resources. +No npm token package, public Storybook or Figma community kit was found. + +**Token architecture (brand level).** The [Color page](https://guidelines.arcadia.com/color) groups +colours in three tiers: *Core* (Evening Sea `#104336`, Arcadia Green `#0FFF87`, Pampas `#F3F1EC`), +*Secondary* (Black `#101F1E`, Deep Sea `#0E382D`, Dark Green `#145242`, Paper White `#F8F7F4`) and +*Brand accents* (Electric Violet `#7C18D3`, Blue Marguerite `#6666D9`, Viking `#5CC4DC`, Aurora +`#C4FF45`), each with RGB and (for core) Pantone values, plus usage proportions ("Core colors should +comprise 75%+ of designs"). + +**Token architecture (live site, de-facto).** The production CSS exposes flat custom properties named +`--color-{colorName}[-light|-dark|-mid|NN]`, verbatim e.g. `--color-eveningSea`, +`--color-eveningSea-dark`, `--color-springGreen`, `--color-pampus`, `--color-electricViolet`, +`--color-lime-hover`, and opacity ladders `--color-eveningSea05` … `--color-eveningSea90`, +`--color-cream05` … `--color-cream90`. There is no separate semantic tier in the variable names +(no `--color-text-primary`-style aliases were observed); semantics live in component CSS. +Other variables: `--font-base`, `--font-heading`, `--ease-arcadia: cubic-bezier(0.22,1,0.36,1)`, +`--navbar-height`, `--grid-columnCount`, `--grid-gutter`, and fluid `--spacing-{n}-{bp}` clamps. + +**Theming.** No dark-mode or high-contrast theme switch was found in the guidelines or observed on the +site. "Dark" vs "light" is a per-section treatment: the header switches between a Pampas/Evening Sea +state and a `#0b2c24`/cream state. The [Logo page](https://guidelines.arcadia.com/logo) documents +standard colour, reversed (dark backgrounds) and monochrome logo versions. + +**Type & spacing systems.** Per the [Typography page](https://guidelines.arcadia.com/typography): +one typeface (DM Sans), headings H1–H11 (H1 88px, H2 72px, Light 300, H7 24px Regular, H8–H11 20→14px +Medium) and body sizes 20/18/16/14/12px at 150% line height, "Minimum 16px for body text". The live +homepage uses a reduced scale (56/48/36px headlines) and 150% body line height (24/16, 27/18, 30/20), +consistent with that rule. + +**Component model.** Not publicly documented. On the site the repeated components are: 8px-radius +buttons in four fills (green, evening sea, black, outline), 34px pill-ish nav buttons, 16px-radius +dark and light cards, uppercase violet eyebrows, and a logo marquee. + +**Accessibility.** The [Color page](https://guidelines.arcadia.com/color) states: "All combinations +must meet WCAG AA minimum (4.5:1 contrast ratio)". Logo backgrounds are restricted to Evening Sea, +Arcadia Green, Pampas, white or transparent; secondary colours are never used as solid backgrounds. + +**Delivery.** Assets (Arcadia-logos.zip, press documents) are distributed from the guidelines' +Resources page. The site itself is a Next.js build (font class names `__DMSans_cff41e` are Next.js +`next/font` output). No versioned package is public. + +## Do's and Don'ts + +**Do** +- Use `#0fff87` only for the single most important action per view, with `#104336` text on it. +- Set headlines in DM Sans 300 with +1% tracking; let size, not weight, create hierarchy. +- Alternate light Pampas `#f3f1ec` sections with full-bleed `#0b2c24` bands. +- Put cream `#f9f3e8` or `#afc4bf` text on the dark greens; `#535e5d` on light. +- Keep buttons at 8px radius and cards/panels at 16px. +- Use violet `#7c18d3` uppercase 14px/700 eyebrows for categories and dates. +- Use the site's opacity ladders (`--color-eveningSea05` etc.) for tints and hovers. + +**Don't** +- Don't use Arcadia Green as a section background or for body text. +- Don't use bold (600–700) for headlines — 700 is for buttons and eyebrows only. +- Don't add drop shadows to cards; depth is tonal. +- Don't use accent colours (viking, lime, coral) as large solid backgrounds — the guidelines restrict + secondary/accent colours to icons, illustration and graphics. +- Don't use pure black for body text; body ink is cream `#f9f3e8` on the dark canvas and `#535e5d` (`ink-on-light`) on Pampas. +- Don't introduce a second typeface on the marketing surface. + +## Responsive Behavior + +Measured at 390px: +- h1 drops from 56px/61.6px to **42px/46.2px**, still weight 300 with +0.42px tracking. +- Section h2 drops from 48px to **36px/39.6px** (+0.36px). +- Body paragraphs drop from 16px/24px to **14px/21px**; the most frequent mobile sizes are 16px, + 14px, 20px, 18px and 36px. +- Header becomes 56px tall with Evening Sea `#104336` text; menu collapses. +- The hero "Request demo" button keeps its desktop spec: `#101f1e`, 48px tall, `0px 16px`, 8px radius. +- Text columns become 311–343px wide (16px outer gutter: `--grid-outerGutter: 1.6rem`). +- Fluid section padding comes from the `clamp()` spacing variables, so vertical rhythm compresses + smoothly rather than at fixed breakpoints. + +## Iteration Guide + +1. Start every page on Pampas `#f3f1ec` with the 68px header; switch to `#0b2c24` for the first deep + content band. +2. Hero: one 56px/300 headline (61.6px leading, 0.56px tracking, `#000000`), one 18px/27px paragraph + in `#101f1e`, one button — then a product visual in a 16px-radius panel. +3. Buttons: choose fill by background — green `#0fff87` (primary), `#101f1e` or `#104336` (secondary + on light), outline `#104336` (tertiary). Always 8px radius, 16px/700 label, 42–48px tall. +4. Cards on dark: `#104336`, 16px radius, 24px padding, cream title 20px/500, `#afc4bf` body. +5. Copy: 16px/24px `ink` `#f9f3e8` (or `#afc4bf`) on the dark canvas, `ink-on-light` `#535e5d` on Pampas. +6. Accents only inside data visualisation and eyebrows. +7. Before shipping, check every hex against the tables above and every type size against the scale. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/arco-design/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/arco-design/DESIGN.md new file mode 100644 index 0000000..d0aab4e --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/arco-design/DESIGN.md @@ -0,0 +1,318 @@ +--- +version: alpha +name: "Arco Design" +category: "Frontend Frameworks" +description: "Arco Design is ByteDance's open-source enterprise design system: Inter with CJK fallbacks at 14px, one cobalt blue #165dff on a white canvas, a cool grey ramp (#1d2129, #4e5969, #86909c, #e5e6eb, #f7f8fa), 32px controls with 2px radii, flat 1px-bordered surfaces and faint cool shadows." +colors: + canvas: "#ffffff" + ink: "#4e5969" + primary: "#165dff" + on-primary: "#ffffff" + surface-subtle: "#f7f8fa" + surface-dark: "#272e3b" + ink-strong: "#1d2129" + ink-muted: "#86909c" + primary-light: "#4080ff" + ink-disabled: "#c9cdd4" + border: "#e5e6eb" + fill: "#f2f3f5" + primary-bg: "#e8f3ff" + success: "#00b42a" + warning: "#ff7d00" + danger: "#f53f3f" +typography: + heading-docs: + fontFamily: Inter, -apple-system, "system-ui", "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 36px + fontWeight: 500 + lineHeight: 45px + text: + fontFamily: Inter, -apple-system, "system-ui", "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 14px + fontWeight: 400 + lineHeight: 22.001px + display: + fontFamily: Inter, -apple-system, "system-ui", "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 54px + fontWeight: 500 + lineHeight: 67.5px + display-mobile: + fontFamily: Inter, -apple-system, "system-ui", "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 24px + fontWeight: 500 + lineHeight: 36px + body: + fontFamily: Inter, -apple-system, "system-ui", "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 13px + fontWeight: 400 + lineHeight: 13px + button: + fontFamily: Inter, -apple-system, "system-ui", "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif + fontSize: 16px + fontWeight: 500 + lineHeight: 24px +rounded: + xs: 1px + sm: 2px + md: 3px + lg: 4px + xl: 6px + 2xl: 8px + 3xl: 12px + 4xl: 20px + pill: 9999px +spacing: + s1: 2px + s2: 4px + s3: 6px + s4: 7px + s5: 8px + s6: 9px + s7: 11px + s8: 12px + s9: 16px + s10: 18px +components: + button-default-size: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.text}" + rounded: "{rounded.sm}" + padding: 0px 15px + height: 32px + text-input: + backgroundColor: "{colors.fill}" + textColor: "{colors.ink-strong}" + typography: "{typography.text}" + rounded: "{rounded.sm}" + height: 32px + tag: + backgroundColor: "{colors.fill}" + textColor: "{colors.ink}" + rounded: "{rounded.sm}" + padding: 0px 8px + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-strong}" + rounded: "{rounded.sm}" + borderColor: "{colors.border}" + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.canvas}" + typography: "{typography.button}" + rounded: "{rounded.md}" + padding: 9px 28px + height: 44px + button-primary-hover: + backgroundColor: "{colors.ink-strong}" + footer: + backgroundColor: "{colors.surface-subtle}" + textColor: "{colors.ink-strong}" + padding: 80px 20px 0px +--- + +# Arco Design + +## Overview + +Arco Design is ByteDance's open-source enterprise design system (React and Vue component libraries, Figma/Sketch kits, an icon platform and theme tools). arco.design is its documentation and marketing site, shown in the capture in Simplified Chinese ("智能设计体系 / 连接轻盈体验", "Intelligent design system, connecting a light experience"). + +The homepage reads as a clean, bright product site with a bright cobalt-blue accent: a left-aligned two-line hero headline (the first line in a sky-blue gradient, the second in near-black), a floating menu card of ecosystem products (Arco Pro, DesignLab, Material Market, IconBox, Platte) and a browser-window illustration on the right made of the system's own pieces (a type specimen "Aa", bar charts, a blue swatch grid, outlined/dashed/text buttons, a star rating, a toggle, a code block). Below: a row of trusted-by partner logos, a centred section title, and two large rounded panels side by side, one saturated cobalt (#165dff, "design resources") and one deep slate (#272e3b, "development resources"), then a four-column strip of the design principles agreement 一致, rhythm 韵律, clear 清晰 and open 开放, then an ecosystem tab row and a colour-tool preview with a wheel and a five-step blue palette. + +Key characteristics: +- **One cobalt blue.** #165dff ("arcoblue-6") for buttons, links, selected tabs and the biggest panel. +- **Cool grey neutrals.** Text and borders come from a blue-tinted grey ramp: #1d2129, #4e5969, #86909c, #c9cdd4, #e5e6eb, #f2f3f5, #f7f8fa. +- **Inter first.** Inter with CJK fallbacks (PingFang SC, Hiragino Sans GB, Microsoft YaHei), body 14px; Fira Mono for code. +- **Tiny radii.** Controls are 2px, bordered cards 2px, tags 2px; larger showcase panels use 6 to 12px. +- **Flat, bordered surfaces.** 1px #e5e6eb borders and a faint cool shadow (`rgba(78, 89, 105, 0.14) 0px 2px 3px 0px`) carry hierarchy. +- **Photographic restraint.** Imagery is product illustration, colourful partner logos and abstract blue 3D shapes, never people photography. + +## Colors + +Measured on arco.design (homepage, and the component pages for button, input, select, tag and card) and confirmed in the published stylesheet of `@arco-design/web-react` (`dist/css/arco.css`, downloaded and read), where each colour is an RGB triplet variable. + +### Brand +- **Primary** `{colors.primary}` (#165dff): `--arcoblue-6: 22,93,255`; `--primary-6` and `--link-6` alias it. +- **On primary** `{colors.on-primary}` (#ffffff). +- **Primary light** `{colors.primary-light}` (#4080ff): brighter blue measured as link/emphasis text on the homepage. +- **Primary bg** `{colors.primary-bg}` (#e8f3ff): the pale blue tint behind blue tags and selected rows. + +### Neutrals (the gray ramp) +- **Canvas** `{colors.canvas}` (#ffffff): page background (`--color-bg-1` is #fff). +- **Surface subtle** `{colors.surface-subtle}` (#f7f8fa): `--gray-1`; the footer and alternate bands. +- **Fill** `{colors.fill}` (#f2f3f5): `--gray-2`; default input and tag fill (`--color-fill-2`). +- **Border** `{colors.border}` (#e5e6eb): `--gray-3`; `--color-border`. +- **Ink disabled** `{colors.ink-disabled}` (#c9cdd4): `--gray-4`; `--color-text-4`. +- **Ink muted** `{colors.ink-muted}` (#86909c): `--gray-6`; `--color-text-3`, the small grey captions. +- **Ink** `{colors.ink}` (#4e5969): `--gray-8`; `--color-text-2`, most body copy (934 characters measured). +- **Ink strong** `{colors.ink-strong}` (#1d2129): `--gray-10`; `--color-text-1`, headings (702 characters). +- **Surface dark** `{colors.surface-dark}` (#272e3b): `--gray-9`; the "development resources" panel. + +### Status +- **Success** `{colors.success}` (#00b42a): `--green-6: 0,180,42`. +- **Warning** `{colors.warning}` (#ff7d00): `--orange-6: 255,125,0`. +- **Danger** `{colors.danger}` (#f53f3f): `--red-6: 245,63,63`. + +### Dark mode +The stylesheet redefines the ramps under `body[arco-theme='dark']`: the page becomes #17171a (`--color-bg-1`) with border #333335, and the arcoblue-6 becomes 60,126,255. This document describes the light theme only. + +### Decorative +Syntax-highlight colours in the code block (#98c379, #b882ff, #a6d8ff on #282c34) and the colourful partner logos are illustration, not tokens. + +## Typography + +Font family (from the library stylesheet and measured on the page): `Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif`; code `Consolas, Menlo` in the library, and Fira Mono on the site (132 characters measured). + +| Role | Token | Size / weight / line | +|---|---|---| +| Hero headline | `{typography.display}` | 54px / 500 / 67.5px | +| Hero headline, mobile | `{typography.display-mobile}` | 24px / 500 / 36px | +| Docs page title | `{typography.heading-docs}` | 36px / 500 / 45px | +| Button (hero) | `{typography.button}` | 16px / 500 / 24px | +| Text, control, docs body | `{typography.text}` | 14px / 400 / 22.001px | +| Caption | `{typography.body}` | 13px / 400 / 13px | + +The library's global font-size scale (from `components/style/theme/global.less` in the npm package): display 56, 48, 36px; title 24, 20, 16px; body 14, 13, 12px; caption 12px; base 14px, line-height 1.5715. + +Measured sizes by character: 14px (1765), 12px (176), 16px (88), 18px (84), 36px (61), 20px (60), 24px (30), 54px (12). Weights are 400 and 500; headings are medium, not bold. + +### Font substitutes +Inter is open source (use as-is). For CJK, PingFang SC on Apple, Microsoft YaHei on Windows, Noto Sans CJK elsewhere. + +## Layout + +- Header bar with logo, a `⌘ K` search field (32px high, #f2f3f5 fill, 2px radius), dropdowns (设计, 开发, 生态产品), language, direction (LTR) and theme controls, avatar. +- Hero is a two-column split: text left, composed illustration right. +- Sections are centred, with a small grey eyebrow label (e.g. 快速上手) above a 36px-class title. +- Two large resource panels sit side by side and fill the container width; the second row of principles is a four-up strip inside a bordered white card. +- The footer is a #f7f8fa block with 80px top padding and link columns (设计, 组件, 开发 ...). +- Spacing values measured: 2, 4, 6, 7, 8, 9, 11, 12, 16 and 18px. The library's size ladder is a 4px step: mini 24, small 28, default 32, large 36px. + +## Elevation & Depth + +- Hierarchy mostly comes from 1px borders (#e5e6eb) and flat fills. +- Light shadows, all measured: `rgba(78, 89, 105, 0.14) 0px 2px 3px 0px` (13 uses), `rgba(78, 89, 105, 0.14) 0px 1px 2px 0px`, `rgb(201, 205, 212) 0px 1px 0px 0px`. +- Floating menus use a layered cool shadow: `rgba(78, 89, 105, 0.06) 0px 10px 11px 0px, rgba(78, 89, 105, 0.03) 0px 6px 4px 0px, rgba(78, 89, 105, 0.06) 0px 0px 0px 1px` plus finer layers. +- Card inset outline: `rgba(58, 60, 70, 0.1) 0px 0px 0px 1px inset` on the homepage cards. +- The library defines three shadow tiers with blur radii of 5, 10 and 20px at 0.1 alpha black (global.less). + +## Shapes + +Radius ladder as measured: 1px `{rounded.xs}`, 2px `{rounded.sm}`, 3px `{rounded.md}`, 4px `{rounded.lg}`, 6px `{rounded.xl}`, 8px `{rounded.2xl}`, 12px `{rounded.3xl}`, 20px `{rounded.4xl}`, and `{rounded.pill}` / 50% for circles. + +The library's own radius tokens are `border-radius-small: 2px`, `medium: 4px`, `large: 8px`, `circle: 50%`. The inputs, tags, default buttons and bordered cards use the small radius; the hero CTA measures 3px; the large resource panels measure 8px. + +## Components + +### Buttons +- **Hero primary:** `{components.button-primary}`: 44px, padding 9px 28px, 3px radius, 16px/500, cobalt fill. Hover in the measurement turns the fill to {colors.ink-strong}. +- **Default size:** `{components.button-default-size}`: 32px high, padding 0 15px, 2px radius, 14px/400 (measured on the Button page). Sizes mini 24, small 28, default 32, large 36px from the library. +- Types in the docs: primary, secondary, dashed, outline, text, each with warning, danger and success statuses. + +### Text input and select +`{components.text-input}`: #f2f3f5 fill (`input-color-bg: color-fill-2`), transparent border, 2px radius (`input-border-radius: @radius-small`), 32px height, 14px text. On focus the fill turns white (`input-color-bg_focus: color-bg-2`). + +### Tag +`{components.tag}`: 2px radius (`tag-border-radius`), 8px horizontal padding, 12px default font; status variants use the 1-step pale colour for background and the 6-step colour for border (for example `tag-red-bordered-color-border` is red-6 #f53f3f). + +### Card +`{components.card}`: white (`color-bg-2`), 1px solid neutral-3 border and 2px radius when bordered, header 46px high with 16px side padding, 14px text in default size. + +### Navigation and footer +Top bar white with the search field and dropdowns; `{components.footer}` is a #f7f8fa block with link columns. + +### Resource panels +The two large panels (cobalt and slate) have white 16px headings, small translucent-white subcopy, a grid of white icon tiles with 12px labels, and a bottom row of text links separated by a hairline. + +## Art Direction and Imagery + +- **Illustration made of the system.** The hero picture is a mock browser window assembled from real Arco parts: type specimen, bar chart, blue swatch grid, buttons (Primary, Secondary, Dashed, Outline, Text), rating stars, toggle and a code block; around it float round blue glossy "orbs" holding product icons. +- **Blue 3D shapes.** Abstract blue wave and atom renders fill image cells, tying into the cobalt accent. +- **Partner logos in full colour.** The trust strip (大力, 头条号, 今日头条, 西瓜视频, 瓜瓜龙启蒙, 轻服务, 番茄小说, 飞连) uses each brand's own colours at uniform height. +- **Colour tool preview.** A hue wheel beside a five-step blue ramp spanning light sky to navy shows the palette method. +- **Density.** Moderate: generous section spacing, but each panel packs icon grids with 12px labels. + +## Microcopy Patterns + +| Pattern | Example in the capture | +|---|---| +| Hero headline, two lines | 智能设计体系 / 连接轻盈体验 | +| Eyebrow + title | 快速上手 / 完善的设计开发资源 | +| Panel title + one-line description | 设计资源: 使用 Arco 设计资源，帮助你创造优秀的产品设计 | +| Principle: English word + Chinese word + sentence | agreement 一致 / rhythm 韵律 / clear 清晰 / open 开放 | +| CTA | 开始使用, 立即使用 | +| Text link with arrow | 设计原则 >, 样式指南 >, 组件用法 > | + +The English docs pages (arco.design/react/en-US/components/...) use plain descriptive sentences ("Buttons can be mini, small, medium and large in size..."). + +## Measured Reference + +| Item | Value | +|---|---| +| Hero CTA | 44px high, padding 9px 28px, radius 3px, 16px/500, #165dff | +| Default button (docs) | 32px high, padding 0 15px, radius 2px, 14px/400 | +| Docs h1 | 36px / 500 / 45px, #1d2129 | +| Docs body | 14px / 400 / 21px, #4e5969 | +| Input | 32px, fill #f2f3f5, radius 2px | +| Tag | radius 2px, padding 0 8px, 12px font | +| Card (bordered) | 1px #e5e6eb, radius 2px, header 46px | +| Footer | #f7f8fa, padding 80px 20px 0 | +| Border colours seen | #e5e6eb, #f2f3f5, #c9cdd4, #165dff, #ff7d00, #f53f3f, #00b42a | +| Status tints seen | #e8f3ff, #fff3e8, #fff7e8, #ffece8, #e8ffea, #e8f7ff, #ffe8fb, #ffe8f1 | + +## Status Colour Pairs + +| Status | Solid (step 6) | Tint seen on pages | +|---|---|---| +| Primary | #165dff | #e8f3ff | +| Success | #00b42a | #e8ffea | +| Warning | #ff7d00 | #fff7e8 / #fff3e8 | +| Danger | #f53f3f | #ffece8 | + +- Solid colours are used for borders, icons and filled buttons; tints are used behind tags and alerts. +- Text on a tint stays the solid colour; text on a solid fill is white. +- Disabled content uses {colors.ink-disabled} (#c9cdd4). +- The library exposes ten steps per hue (`--arcoblue-1..10`), of which this document reports only the measured steps. + +## Design System Architecture + +Arco Design publishes its system openly: +- Source and issues: https://github.com/arco-design/arco-design (the React library); the npm package `@arco-design/web-react` ships the Less sources under `es/style/theme/` (`default.less`, `global.less`, `color/css-variables.less`) and per-component `style/token.less` files, plus the compiled `dist/css/arco.css`. +- Token architecture: colour ramps are CSS variables holding RGB triplets (`--arcoblue-1..10`, `--gray-1..10`, `--red-`, `--orange-`, `--green-` ...) with semantic aliases (`--primary-6`, `--success-6`, `--danger-6`, `--warning-6`, `--link-6`) and role variables (`--color-text-1..4`, `--color-fill-1..4`, `--color-border-1..4`, `--color-bg-1..5`). A dark theme switches them via `body[arco-theme='dark']`. +- Less layer: global tokens (`@radius-small`, `@size-default`, `@font-size-body-3`, spacing ladder) feed component tokens such as `@input-border-radius: @radius-small`, `@tag-border-radius: @radius-small`, `@tag-padding-horizontal: 8px`, `@card-size-default-height-title: 46px`. +- Principles (shown on the homepage): agreement 一致, rhythm 韵律, clear 清晰, open 开放. +- Tooling: Design Lab (theme configuration), Material Market, IconBox and Palette (colour tool) are listed in the site's ecosystem section; I did not open their pages. +- The product is the component library; the site is just a showcase. + +## Do's and Don'ts + +### Do +- Use #165dff as the only brand accent and the cool-grey ramp for everything else. +- Keep controls at 32px high with a 2px radius; use 36px (large) sparingly. +- Show hierarchy with 1px #e5e6eb borders and flat fills before reaching for shadow. +- Use Inter at 14px/400 for UI text and 500 for headings. +- Pair a pale tint (e.g. #e8f3ff) with the saturated 6-step colour for statuses. +- Provide CJK font fallbacks. + +### Don't +- Don't use pure black text; use #1d2129 and #4e5969. +- Don't round standard controls beyond 4px. +- Don't add a second brand hue; status colours are for status only. +- Don't use heavy drop shadows; the shadows measured are all faint and cool-tinted. +- Don't bold headings above weight 500 in the interface. + +## Responsive Behavior + +- The mobile measurement shows the hero headline reducing from 54px to 24px (line 36px) at weight 500. +- Behaviour of the hero split and panels below the measured widths was not captured. +- The site toggles light/dark and LTR/RTL from the header. +- The partner-logo row is a horizontally spaced strip and the ecosystem tabs (DesignLab, ArcoPro, Palette, IconBox, MaterialMarket, More) form a tab bar. + +## Iteration Guide + +1. Set the tokens: #165dff, #1d2129 / #4e5969 / #86909c text, #e5e6eb border, #f7f8fa subtle surface. +2. Build the 32px button (2px radius, 14px label) and the input (2px radius, #f2f3f5 fill) first. +3. Add tags and cards with the same 2px radius and 1px border. +4. For marketing sections, add large panels in #165dff and #272e3b with white text and translucent white captions. +5. Use Inter 54px/500 for a hero and 36px/500 for page titles. +6. Check dark mode by mapping the ramp (page #17171a, border #333335) rather than inverting. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/arco/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/arco/DESIGN.md new file mode 100644 index 0000000..289f9de --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/arco/DESIGN.md @@ -0,0 +1,128 @@ +--- +version: alpha +name: ByteDance +category: "Design Systems" +description: "ByteDance corporate site: solid blue #3c8cff navigation, near-black #333333 text on white, DouyinSans-Bold display (52px, falls back to a serif in capture) with DM Sans 22px body, 22px card radius, circular portraits and soft gradient circles." +colors: + canvas: "#ffffff" + ink: "#333333" + primary: "#3c8cff" + link: "#569cfe" + ink-muted: "#848484" + ink-muted-2: "#828282" + hairline: "#ffffff80" +typography: + display: + fontFamily: DouyinSans-Bold + fontSize: 52px + fontWeight: 500 + lineHeight: 65px + display-mobile: + fontFamily: DouyinSans-Bold, -apple-system, "Sofia Pro", "Microsoft YaHei", Helvetica, Arial, sans-serif + fontSize: 24px + fontWeight: 700 + lineHeight: 56px + body: + fontFamily: "\"DM Sans\", Gilroy, -apple-system, \"Sofia Pro\", \"Microsoft YaHei\", Helvetica, Arial, sans-serif" + fontSize: 22px + fontWeight: 400 + lineHeight: 28.6px +rounded: + xs: 2px + sm: 18px + md: 22px + pill: 9999px +spacing: + s1: 10px + s2: 15px + s3: 39px + s4: 43px + s5: 102.4px + s6: 115.2px +components: + link: + textColor: "{colors.link}" + typography: "{typography.body}" + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink-muted}" + rounded: "{rounded.md}" + padding: 181px 42px 0px 39px +--- + +## Overview + +This entry documents the ByteDance corporate website at https://www.bytedance.com/en, which is the page the queue assigned to the slug `arco`. The queue pairs it with the Arco Design documentation site (https://arco.design), but the measured CSS of the corporate site contains no Arco class prefixes, variables or package names, so no value in this file comes from Arco. Arco is described only in the Design System Architecture section. + +The page is a short corporate profile. The top is a solid blue navigation bar ({colors.primary}) carrying the ByteDance logo on the left and three text links on the right: "About Us", "Press", "Join Us". Under it, a full-width photograph of an office tower carrying the ByteDance sign fills a blue-sky hero, and a white card with one large rounded corner overlaps the top-left, labelled "Our Mission" with the line "Inspire Creativity, Enrich Life". Below, the page rests on a near-white field with large soft gradient circles in blue, yellow and mint behind the content. A "Culture" block pairs a short paragraph about the company's "ByteStyles" values with a white card holding a photograph of three colleagues around a laptop, a title ("Always Day 1") and four bullet lines, with left and right chevrons to step through the values. A "Board Members" block shows circular headshots with names and titles (Rubo Liang, Chairman of the Board, and four other board members). The page also lists a company history and contact addresses. + +The voice is declarative and corporate: short value statements, imperative bullets ("Reject complacency." "Stay open and humble."), and no marketing superlatives. + +## Colors + +The palette is three working colors on a white field. `canvas` is {colors.canvas}; the capture's dominant pixel color of the lower page is a very slightly warmer off-white (#fdfdfd), and the white cards sit on it. `ink` is {colors.ink}, used for essentially all text. `primary` is the bright blue {colors.primary}: it fills the navigation bar and appears as the pagination and chevron color. The slightly lighter blue `link` {colors.link} is measured on link text, while `ink-muted` {colors.ink-muted} and `ink-muted-2` {colors.ink-muted-2} are two near-identical grays used for secondary text such as the "Our Mission" label and board titles. `hairline` {colors.hairline} is a half-transparent white used as a border on translucent controls. + +Decorative gradient circles (blue, yellow, mint) sit behind the Culture and Board sections. Their exact fills are gradients and are not captured as tokens, so they are described, not specified. The hero blue in the photograph is part of the image, not a UI token. + +## Typography + +Two families are declared. Headings use `DouyinSans-Bold`: the measured h1 "Inspire Creativity, Enrich Life" is 52px / 65px line height at weight 500, and section titles such as "Culture" are 24px / 56px at weight 700 in the 390px mobile capture. The loaded-font list for the page contains Gilroy, Sofia Pro and DM Sans only, and in the capture the mission line renders in a serif face, which indicates the declared display face did not load there and the headline fell back to the browser's serif. Treat the serif mission line as what the capture shows, not as a designed pairing. + +Body copy is DM Sans (with Gilroy, -apple-system, Sofia Pro, Microsoft YaHei, Helvetica, Arial as fallbacks) at 22px / 28.6px weight 400. Other sizes measured by character count are 20px, 18px, 30px, 16px, 48px and 24px; weights used are 400, 500 and 700. Board names render in the same serif fallback while the "Culture" and "Board Members" headings render in a geometric sans, which matches the Gilroy/DM Sans family. + +### Font Substitutes + +DouyinSans-Bold is proprietary and was not among the loaded fonts. For a faithful rebuild use DM Sans at weight 500 to 700 for headings. Gilroy and Sofia Pro are commercial; DM Sans is an open-source substitute. + +## Layout + +The page is a vertical stack of full-width bands inside a centered column. The nav bar spans the full width with logo and links inset roughly 90px from each edge at the 960px-wide capture scale. The hero is a photograph about 490px tall at that scale. Content bands use a two-column pattern: heading and paragraph on the left, a card on the right (Culture), then a three-column grid of circular portraits (Board Members) wrapping to a second row. Measured spacing values are large and irregular (`s1` 10px up to `s6` 115.2px) because the page positions content with generous padding, such as `padding: 181px 42px 0px 39px` on the culture card container. + +## Elevation & Depth + +Depth is minimal. The one measured shadow is `rgba(0, 0, 0, 0.15) 0px 4px 5px 0px`, a soft downward shadow used on a small number of elements. The white cards are separated from the field mostly by contrast and by the colored gradient circles behind them, not by borders or heavy shadows. + +## Shapes + +Radii measured on the page: 2px, 18px, 22px, a 51% radius (circular portraits), and a pill value of 9999px. The hero mission card has one very large rounded corner at its bottom-right, giving a distinctive leaf shape; the culture card has a gentle corner radius of 22px (`rounded.md`) and the portraits are circles. Corners are generously rounded where they carry imagery and nearly square (2px) for small details. + +## Components + +**Navigation bar.** Solid {colors.primary} bar, white logo and white 14px-class text links; no visible button chrome. + +**Mission card.** White rectangle anchored top-left over the hero with a single large rounded corner; small gray label "Our Mission" above a larger serif-rendered line. + +**Culture card.** White card, 22px radius, photograph on top, title in the sans display, bullet list in {colors.ink}, chevron arrows in light blue at each side. Carousel dots appear at the bottom of the hero. + +**Portrait.** Circular headshot above a name and a gray role label, centered. + +The page has no primary call-to-action button; navigation links are the only actions, so no button token is declared. + +## Design System Architecture + +No public ByteDance corporate-site design system was found in the pages opened. The de-facto system is: one blue, one near-black ink, off-white canvas, three decorative gradient circles, DM Sans-class body type, and a mix of large radii and circles for imagery. + +Separately, Arco Design (https://arco.design, source at https://github.com/arco-design/arco-design) is a React UI library with 60+ components, an npm package `@arco-design/web-react`, a Vue library, Design Lab theme tooling and dark mode, MIT licensed. The docs home page describes it as a complete design and development solution for enterprise-level products. The pages opened do not state who owns it, and the corporate site's CSS shows no use of it; the Arco docs were measured only to confirm it differs from this site, and none of its tokens appear here. + +## Do's and Don'ts + +- Do use {colors.primary} as a solid band for navigation and as the only chromatic UI color. +- Do keep text in {colors.ink} on {colors.canvas} or white cards. +- Do pair photography of real offices and people with white cards. +- Do use large rounded corners and circles around imagery. +- Don't add a primary button style; the page has none. +- Don't treat the browser serif fallback as brand typography. +- Don't use heavy shadows; the single measured shadow is 4px offset at 15% black. +- Don't invent additional accent hues beyond the decorative gradients. + +## Responsive Behavior + +A 390px mobile capture was measured for type: the h1 role resolves to a 24px / 56px weight-700 "Culture" heading, down from the 52px hero line on desktop. Layout rearrangement at mobile width is not documented in detail here. The desktop card on the culture block carries a `matrix(0.75, 0, 0, 0.75, 0, 0)` transform at capture time, indicating the page scales content to fit the capture width. + +## Iteration Guide + +1. Begin with {colors.canvas}, {colors.ink} and a {colors.primary} nav band. +2. Use real photography in a full-bleed hero with a white label card. +3. Round image containers (22px) or crop them to circles; keep small details square at 2px. +4. Specify a display face that loads; the measured one did not. +5. Keep copy short and declarative, in value statements and imperative bullets. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/arcteryx/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/arcteryx/DESIGN.md new file mode 100644 index 0000000..c566a5b --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/arcteryx/DESIGN.md @@ -0,0 +1,203 @@ +--- +version: alpha +name: Arc'teryx +category: "Fashion & Apparel" +description: "Arc'teryx Canada home page (arcteryx.com/ca/en), measured — white #ffffff canvas, #1a1a1a black for copy, input and footer, full-bleed outdoor photography with Elan ITC Pro 32px uppercase titles, Helvetica Now Display 16px/400 body with 0.32px tracking, ghost buttons with #b2b2b2 borders, #f5f5f5 41px search pill." +colors: + canvas: "#ffffff" + ink: "#1a1a1a" + primary: "#f5f5f5" + on-primary: "#595959" + black: "#000000" + grey-medium: "#666666" + grey-inactive: "#b2b2b2" + utility-bar: "#000000cc" + grey-background: "#e9e9e9" +typography: + display: + fontFamily: elan-itc-pro, sans-serif + fontSize: 32px + fontWeight: 400 + lineHeight: 32px + textTransform: uppercase + display-mobile: + fontFamily: elan-itc-pro, sans-serif + fontSize: 28px + fontWeight: 400 + lineHeight: 28px + textTransform: uppercase + subheading: + fontFamily: helvetica-now-display, sans-serif + fontSize: 28px + fontWeight: 400 + lineHeight: 37.8px + footer-title: + fontFamily: "\"Elan ITC Pro Updated\", sans-serif" + fontSize: 18px + fontWeight: 400 + lineHeight: 21.6px + letterSpacing: 0.32px + textTransform: uppercase + body: + fontFamily: helvetica-now-display, sans-serif + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + letterSpacing: 0.32px + button: + fontFamily: "\"Helvetica Now Display\", Helvetica, Arial, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 24px + letterSpacing: 0.32px + button-secondary: + fontFamily: helvetica-now-display, sans-serif + fontSize: 16px + fontWeight: 700 + lineHeight: 19.2px + letterSpacing: 0.32px +rounded: + xs: 4px + sm: 41px +spacing: + s1: 4px + s2: 8px + s3: 10px + s4: 12px + s5: 15px + s6: 16px + s7: 24px + s8: 32px + s9: 38px + s10: 40px +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.sm}" + padding: 0px 8px + height: 32px + button-ghost: + textColor: "{colors.canvas}" + typography: "{typography.button-secondary}" + padding: 4px 24px + height: 44px + borderColor: "{colors.grey-inactive}" + button-ghost-hover: + borderColor: "{colors.canvas}" + button-inactive: + backgroundColor: "{colors.grey-inactive}" + textColor: "{colors.grey-medium}" + typography: "{typography.button-secondary}" + padding: 4px 24px + height: 44px + link: + textColor: "{colors.canvas}" + typography: "{typography.body}" + utility-bar: + backgroundColor: "{colors.utility-bar}" + textColor: "{colors.canvas}" + text-input: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" + typography: "{typography.body}" + padding: 0px 45px 0px 15px + height: 52px + borderColor: "{colors.canvas}" + footer: + backgroundColor: "{colors.ink}" + textColor: "{colors.canvas}" +--- + +# Arc'teryx + +## Overview + +This file describes the Arc'teryx Canada home page at `https://arcteryx.com/ca/en` (title: "Outdoor Clothing, Technical Outerwear, & Accessories | Arc'teryx Canada", `lang="en-CA"`), measured at 1,280px and 390px. + +The page is an image-first outdoor brand site. A thin black utility bar at the top holds ARC'TERYX, OUTLET, RESALE and TRADE-IN on the left, "Shop new arrivals | Free shipping & returns" in the centre and Find a store, the Canadian flag with EN, and help on the right. Beneath it a white header panel floats inset over the hero photograph, with the Arc'teryx archaeopteryx logo, the main links (Women, Men, Footwear, Equipment, Veilance, Discover), a pale grey search pill and account and bag icons. The hero is a blue-toned, full-bleed image of a skier's powder cloud with the uppercase title "SPEAK IN TURNS", the line "The iconic Sidewinder jacket is back" and two outlined buttons, "Shop women's" and "Shop men's". The page continues with two half-width photo tiles (a brown hood under "BESTSELLERS / UNCOMPROMISING OUTERWEAR" and a portrait under "VEILANCE / New Winter Arrivals"), a white three-column product story section ("The updated Sabre Jacket", "The new Postour Boot", "The updated Covert family") with underlined text links, two more half-width tiles (Arc'teryx Academy and ReBIRD Trade-in, "MAKE WAY FOR WINTER"), a white strip of three programme logos (ReBIRD, Walk Gently, System A) and a `#1a1a1a` footer headed "LEAVE IT BETTER". + +The photography is cold, natural and athletic — snow, cloud, mountaineers in wind, close-ups of technical fabric. Copy is short and factual ("Experience peak weather protection and temperature regulation", "Insulated two-in-one boot and slipper for post-tour recovery"). + +## Colors + +- **Canvas `#ffffff`** — the page background and white content sections (4,891 area units). Declared as `--colour-white`. +- **Ink `#1a1a1a`** — Arc'teryx black: the footer, the newsletter input and copy on white (314 characters). Declared as `--colour-black: #1A1A1A` and aliased as `--colour-copy`. +- **Black `#000000`** — the top utility bar band and product story headings (261 characters). +- **Primary `#f5f5f5`** — the light fill of the header search pill, the only filled control the extractor found in the first viewport, with **on-primary `#595959`** text. The brand does not use a coloured action; its calls to action are outlined (see Components). +- **Grey medium `#666666`** — `--colour-grey-medium`; text on the inactive newsletter button. +- **Grey inactive `#b2b2b2`** — `--colour-grey-inactive`: the border of every ghost button over photos (6 borders) and the fill of the not-yet-enabled SIGN ME UP button. +- **Utility bar `#000000cc`** — the translucent black of the header's top bar. +- **Grey background `#e9e9e9`** — `--colour-grey-background`; on mobile it fills the 40px band below the utility bar. + +White is the most-read text colour (1,393 characters) because most copy sits over photographs or the dark footer. The CSS also declares a functional palette — `--colour-blue-2: #5b9dd9` (focus), `--colour-red-3: #990000` (warning), `--colour-green-3: #227733` (success), `--colour-yellow-2: #ab934f` and tints of each — which is not used on the visible home page. + +## Typography + +Loaded fonts: **helvetica-now-display** 400 and 700, and **elan-itc-pro** 400, declared as `--font-helvetica` and `--font-elan`. Helvetica Now Display sets 1,849 characters; Elan ITC Pro 114 (plus 15 in "Elan ITC Pro Updated" in the footer). + +- **Display — Elan ITC Pro 32px / 400 / 32px, uppercase.** Campaign titles over photos: SPEAK IN TURNS, UNCOMPROMISING OUTERWEAR, MAKE WAY FOR WINTER. Elan is a flared, slightly calligraphic serif-sans. +- **Subheading — Helvetica Now Display 28px / 400 / 37.8px.** Product story titles on white. +- **Footer title — Elan ITC Pro Updated 18px / 400 / 21.6px, uppercase, 0.32px tracking.** "LEAVE IT BETTER" and footer column heads. +- **Body — Helvetica Now Display 16px / 400 / 24px, 0.32px tracking.** 16px carries 1,320 characters. +- **Button — 16px / 400** (search) and **button secondary — 16px / 700 / 19.2px** (ghost and newsletter buttons). + +Every size has a small positive tracking: 0.32px at 12px, 16px, 18px and 32px; 0.28px at 14px; 0.36px at 18px. Weights are 400 (1,739 characters) and 700 (251) only. + +**Substitutes:** Helvetica Now Display is a Monotype commercial face (Helvetica or Arial is the declared fallback). Elan ITC Pro is a commercial ITC face; no free equivalent is declared in the CSS beyond `sans-serif`. + +## Layout + +The desktop page measured 4,764px tall. Bands: utility bar (40px, black), hero media (545px), a 71px `#466c8b` slate-blue band, two half-width photo tiles (843px), the white two-to-three column product story section (1,013px), another photo row (842px), a white three-column programme strip (990px) and the `#1a1a1a` footer (420px band, four columns). The widest card grid has four columns (footer). Gaps are frequent and regular: 8px (54), 16px (39), 10px (22), 24px (17), 32px (10). Photo tiles sit edge to edge with a thin white gutter; product stories have an outer margin. The desktop header shows 12 visible links. + +## Elevation & Depth + +Flat. The only measured shadow is `rgb(26, 26, 26) 0px 0px 0px 1280px` on one element — a full-page dark fill used as an overlay, not an elevation shadow. The floating white header panel separates from the hero by colour and inset alone. Depth on the page comes from photography and the outlined buttons sitting on it. + +## Shapes + +Two radii were measured: 41px on two elements (the search pill and its button) and 4px on one (the inset header panel). Buttons, inputs, photo tiles and the footer are square. + +## Components + +- **Ghost button** — the main call to action over photos: transparent fill, white Helvetica Now Display 16px/700 label, `1px solid #b2b2b2` border, `4px 24px` padding, 44px tall. Measured hover: the border turns white `#ffffff`. +- **Text link button** — on white sections, "Shop men's" / "Women's" are black labels with an underline rule beneath. +- **Search pill (button-primary)** — `#f5f5f5` fill, `#595959` 16px/400 label, 41px radius, 32px tall, `0 8px` padding. +- **Newsletter input** — `#1a1a1a` fill, white text, `1px solid #ffffff` border, 52px tall, `0 45px 0 15px` padding. +- **Inactive button** — SIGN ME UP: `#b2b2b2` fill, `#666666` 16px/700 label, 44px tall. +- **Utility bar** — 40px, translucent black, white 12–16px links. +- **Footer** — `#1a1a1a`, logo and "LEAVE IT BETTER", four link columns (HELP, MY ACCOUNT, SHOP MORE, ABOUT US), newsletter row, social and app links. + +## Design System Architecture + +No public Arc'teryx design system or brand-guideline page was opened: `https://arcteryx.com/ca/en/brand` returned HTTP 404. The shipped CSS exposes a two-layer token system in 111 `:root` variables. Layer one is raw palette: `--colour-black`, `--colour-white`, `--colour-grey-*` (dark #333333, medium #666666, medium-accessible #767676, inactive #b2b2b2, pinline #cccccc, background #e9e9e9, item-background #fafafa) and numbered ramps `--colour-blue-1..3`, `--colour-red-1..3`, `--colour-green-1..3`, `--colour-yellow-1..3`. Layer two is semantic aliases pointing at layer one — `--colour-copy`, `--focus-blue`, `--warning-red`, `--success-green`, `--caution-yellow`, `--inactive-state-grey`, `--pinline-grey`, `--background-*`. Spacing uses responsive pairs named by desktop and mobile values (`--desk10-mobile6: 6rem`, `--desk-mobile05: 0.5rem`, `--space-l: var(--desk3-mobile2)`). Gradients are declared for active and hover states (`--gradient-active`, `--gradient-hover`) and focus as `--focus-visible: 0.2rem solid #5b9dd9`. + +## Do's and Don'ts + +**Do** +- Lead with full-bleed outdoor photography and place uppercase Elan titles on it. +- Use outlined ghost buttons with `#b2b2b2` borders that turn white on hover. +- Set all running text in Helvetica Now Display with 0.32px tracking. +- Use `#1a1a1a`, not pure black, for the footer and dark inputs. +- Keep buttons square; reserve the 41px pill for search. + +**Don't** +- Don't introduce a coloured primary button. +- Don't use the functional reds, greens or yellows as decoration. +- Don't add drop shadows to cards or images. +- Don't set long text in Elan ITC Pro. + +## Responsive Behavior + +Measured at 390px: the header is 80px tall with a visible menu toggle labelled "Open Navigation" and 8 visible header links; its text is 12px/400/18px. A 40px `#e9e9e9` band appears under the 40px black utility bar. Display titles shrink from 32px to Elan 28px/400/28px. The product story titles drop from 28px to 24px. Recorded mobile bands: hero media (562px), a `#c5c5c5` band (288px), a two-column media band (1,012px), the white product story section in one column (814px), a single-column media band (1,300px), a white single-column section (1,755px) and the `#1a1a1a` footer (380px). The widest mobile grid has three columns. Mobile font sizes by frequency: 16px, 12px, 14px, 24px, 28px, 12.8px, 22px, 20px, 18px. Breakpoint widths: not measured. + +## Iteration Guide + +1. Start with a white canvas, `#1a1a1a` text and Helvetica Now Display 16px/400 with 0.32px tracking. +2. Add the 40px translucent black utility bar and a white inset header with a `#f5f5f5` 41px search pill. +3. Make the hero a full-bleed photograph with an uppercase Elan 32px title and two ghost buttons. +4. Follow with half-width photo tiles, each with a title, a short line and ghost buttons. +5. Add a white three-column product story section with 28px titles and underlined text links. +6. Close with a `#1a1a1a` footer headed in uppercase Elan 18px. +7. Take any new colour from the `--colour-*` palette in the shipped CSS. diff --git a/skills/scd-uiux/data/vendor/design-systems/library/are-na/DESIGN.md b/skills/scd-uiux/data/vendor/design-systems/library/are-na/DESIGN.md new file mode 100644 index 0000000..cd81550 --- /dev/null +++ b/skills/scd-uiux/data/vendor/design-systems/library/are-na/DESIGN.md @@ -0,0 +1,591 @@ +--- +version: alpha +name: Are.na +category: "Agencies & Studios" +description: "Are.na's homepage is a quiet, document-like page: #ffffff canvas, #333333 ink, a single 568px text column set in Areal (Dinamo's custom Arial revival, served as areal, \"areal Fallback\", Arial) at 19.2px/400, and one deep navy #00075f used for the Sign up button and the footer. Buttons are 34px tall with a 3px radius and 700-weight 14.4px labels; surfaces are #f7f7f7 greys with #ededed hairlines and a soft 0 0 34px shadow." + +colors: + primary: "#00075f" + primary-hover: "#000000" + on-primary: "#ffffff" + canvas: "#ffffff" + ink: "#333333" + foreground: "#000000" + slate: "#696969" + gray4: "#999999" + gray3: "#dedede" + gray2: "#ededed" + gray1: "#f7f7f7" + background-light: "#f7f7f799" + focus: "#3d46c2" + brand-light: "#ebecf7" + channel-public-1: "#f4f8f3" + channel-public-2: "#b4d6b3" + channel-public-3: "#238020" + channel-private-1: "#faf4f3" + channel-private-2: "#dfbebe" + channel-private-3: "#b93d3d" + alert: "#e15100" + notification: "#a87253" + +typography: + page-title: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 32px + fontWeight: 400 + lineHeight: 40px + letterSpacing: normal + page-title-mobile: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 28px + fontWeight: 400 + lineHeight: 35px + letterSpacing: normal + breadcrumb: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 28px + fontWeight: 700 + lineHeight: 35px + letterSpacing: normal + heading-lg: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 19.2px + fontWeight: 400 + lineHeight: 27.84px + letterSpacing: normal + heading-lg-bold: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 19.2px + fontWeight: 700 + lineHeight: 27.84px + letterSpacing: normal + heading-tab: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 19.2px + fontWeight: 400 + lineHeight: 23.04px + letterSpacing: normal + base: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 16px + letterSpacing: normal + input: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 16px + fontWeight: 400 + lineHeight: 23.2px + letterSpacing: normal + link-bold: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 16px + fontWeight: 700 + lineHeight: 23.2px + letterSpacing: normal + body: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 14.4px + fontWeight: 400 + lineHeight: 20.88px + letterSpacing: normal + body-mobile: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 12.5px + fontWeight: 400 + lineHeight: 16.875px + letterSpacing: normal + button: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 14.4px + fontWeight: 700 + lineHeight: 1 + letterSpacing: normal + button-sm: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 12.5px + fontWeight: 700 + lineHeight: 1 + letterSpacing: normal + small: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 12.5px + fontWeight: 400 + lineHeight: 1.35 + letterSpacing: normal + micro: + fontFamily: "areal, \"areal Fallback\", Arial, Helvetica, sans-serif" + fontSize: 10px + fontWeight: 600 + lineHeight: 1 + letterSpacing: normal + +rounded: + none: 0px + radii-1: 3px + panel: 10px + device: 18px + round: 50% + pill: 9999px + +spacing: + nudge: 2px + space-1: 5px + space-2: 10px + space-3: 15px + space-4: 20px + space-5: 25px + space-6: 35px + space-7: 45px + space-8: 65px + space-9: 80px + space-10: 100px + space-11: 130px + +components: + button-primary: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.radii-1}" + padding: 0px 15px + height: 34px + border: 1px solid transparent + button-primary-hover: + backgroundColor: "{colors.primary-hover}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.radii-1}" + padding: 0px 15px + height: 34px + border: "1px solid {colors.foreground}" + button-primary-active: + backgroundColor: "{colors.focus}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.radii-1}" + padding: 0px 15px + height: 34px + border: "1px solid {colors.primary}" + button-primary-disabled: + backgroundColor: "{colors.brand-light}" + textColor: "{colors.gray4}" + typography: "{typography.button}" + rounded: "{rounded.radii-1}" + padding: 0px 15px + height: 34px + button-primary-mobile: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.button}" + rounded: "{rounded.radii-1}" + padding: 0px 20px + height: 47px + button-secondary: + backgroundColor: "{colors.gray1}" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.radii-1}" + padding: 0px 15px + height: 34px + border: 1px solid transparent + button-secondary-hover: + backgroundColor: "{colors.gray1}" + textColor: "{colors.foreground}" + typography: "{typography.button}" + rounded: "{rounded.radii-1}" + padding: 0px 15px + height: 34px + border: "1px solid {colors.gray3}" + button-outlined: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.button}" + rounded: "{rounded.radii-1}" + padding: 0px 15px + height: 34px + border: "1px solid {colors.gray3}" + nav-button: + backgroundColor: "{colors.gray1}" + textColor: "{colors.ink}" + typography: "{typography.button-sm}" + rounded: "{rounded.radii-1}" + padding: 0px 10px + height: 24px + link: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.base}" + rounded: "{rounded.none}" + padding: 0px + nav: + backgroundColor: "{colors.canvas}" + textColor: "{colors.foreground}" + typography: "{typography.base}" + rounded: "{rounded.none}" + height: 55px + padding: 0px + text-input: + backgroundColor: "{colors.gray1}" + textColor: "{colors.ink}" + typography: "{typography.input}" + rounded: "{rounded.radii-1}" + padding: 0px 10px + height: 40px + border: 1px solid transparent + search-input-hero: + backgroundColor: "{colors.background-light}" + textColor: "{colors.ink}" + typography: "{typography.heading-lg}" + rounded: "{rounded.radii-1}" + padding: 0px 20px 0px 45px + height: 54px + border: "1px solid {colors.gray3}" + shadow: 0 0 34px 0 rgba(0, 0, 0, 0.05) + card: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.body}" + rounded: "{rounded.none}" + padding: 10px + border: "1px solid {colors.gray2}" + card-channel: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.small}" + rounded: "{rounded.none}" + border: "1px solid {colors.gray3}" + card-channel-public: + backgroundColor: "{colors.canvas}" + textColor: "{colors.channel-public-3}" + typography: "{typography.small}" + rounded: "{rounded.none}" + border: "1px solid {colors.channel-public-2}" + nav-search: + backgroundColor: "transparent" + textColor: "{colors.slate}" + typography: "{typography.base}" + rounded: "{rounded.radii-1}" + nav-search-hover: + backgroundColor: "{colors.gray1}" + textColor: "{colors.ink}" + typography: "{typography.base}" + rounded: "{rounded.radii-1}" + border: "1px solid {colors.gray2}" + product-panel: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.small}" + rounded: "{rounded.panel}" + padding: 0px + border: "1px solid {colors.gray2}" + shadow: 0 0 34px 0 rgba(0, 0, 0, 0.05) + footer: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.base}" + rounded: "{rounded.none}" + padding: 65px +--- + +## Overview + +Are.na's logged-out homepage reads less like a SaaS landing page and more like a well-set text file. A white `{colors.canvas}` (`#ffffff`) page carries a single left-weighted column of type, 568px wide, beginning about 356px from the left edge at 1280px. There is no hero image, no headline in the conventional sense: the `h1` is the phrase "Are.na is" at the same 19.2px / weight 400 as the paragraphs around it, followed by a lettered list ("a. Online software for saving and organizing the content that is important to you / b. A toolkit for assembling new worlds from the scraps of the old / c. +"). The page's typographic hierarchy is almost flat: 19.2px is the dominant size by character count, and emphasis is achieved with weight 700 (section titles, the "15 years and 59 days" counter) rather than size. + +Everything is set in **Areal**, the custom typeface Dinamo drew for Are.na as a "revival" of Arial (Johannes Breyer and Fabiola Mejía, based on screenshots of Arial 2.82 from Windows 2000). It is served as `areal, "areal Fallback", Arial, Helvetica, sans-serif`, so the system's honest fallback is literally the typeface it was revived from. + +Colour is spent once. A deep navy `{colors.primary}` (`#00075f`, the site's `--colors-brandDark` / `--colors-blue3`) fills the "Sign up" button and the entire footer. Everything else is a ladder of neutral greys — `#333333` text, `#696969` secondary, `#999999` tertiary, `#dedede` / `#ededed` hairlines, `#f7f7f7` fills — exactly as named in the site's own `--colors-gray0` … `--colors-gray7` tokens. A second set of tokens (green / red / grey triplets) encodes Are.na's channel privacy states: public, private, closed. + +**Key Characteristics:** +- One narrow text column, left-weighted; content reads top-to-bottom like an essay. +- Areal throughout; 19.2px / 400 for heading-and-body alike, 700 for emphasis. +- `#00075f` navy is the only chromatic brand colour — the primary button and the footer. +- 3px radius (`--radii-1`) on every button and input; 34px button height; 700-weight 14.4px labels. +- Greys on greys: `#f7f7f7` fills, `#ededed` hairlines, `#dedede` borders; no saturated decoration. +- Product shown as a faithful, light, softly shadowed UI screenshot rather than illustration. +- Very large vertical gaps (130px) separated by full-width hairlines between sections. + +### Art Direction (from the 1280px capture) +- **Logo**: a small two-asterisk mark ([U+2731 U+2731]) above "Are.na is" — no wordmark in a header bar. +- **Header**: there is no visible nav bar; only a tiny "Log in" grey button sits at the top-right corner. +- **Product imagery**: a desktop Are.na channel ("Are.na / Pierre Marteau / Commonplace") rendered at reduced scale inside a white panel with a hairline border and a soft ambient shadow; a phone mockup (on-screen keyboard, "Type text or paste content") overlaps its left edge. Content inside the screenshot is archival and bookish — black-and-white photographs, quotations from Yasunao Tone, scanned PDF pages. +- **Feature list**: to the right of the screenshot, a vertical tab list — "Capture", "Arrange", "Search", "Connect", "Network" — the active item in black with a short description in 12.5px beneath and a 2px vertical rule at its left, inactive items in grey `#999999`. +- **Block grid**: lower on the page a large rounded panel shows Are.na "blocks" side by side: a grayscale image, a text block quoting Rosalind Krauss with a "Work cited" list fading to grey, and a PDF thumbnail with a small "PDF" label and filename ("63157430.pdf"). +- **Motion cues**: the "c. +" list item and the live day counter suggest small interactive moments; nothing on the page animates decoratively. + +### Voice & Microcopy +- Declarative, unhurried, slightly literary: "A toolkit for assembling new worlds from the scraps of the old". +- Values stated plainly as headings: "No ads, no personalized recommendations". +- Paragraph copy argues rather than sells ("The result is a kind of texture of a network that is both difficult to replicate and rewarding to traverse."). +- Buttons are two words or fewer: "Sign up", "Download the app", "Log in", "View API documentation". + +## Colors + +> **Source:** live homepage `https://www.are.na/` measured at 1280px and 390px (computed styles, hover states, frequency tables) and the site's own `:root` custom properties (`--colors-*`, `--space-*`, `--radii-*`, `--fontSizes-*`). Token names below follow the site's names. + +### Brand & Accent +- **Primary / Brand Dark** (`{colors.primary}` — `#00075f`): "Sign up" button fill and the footer background (`--colors-brandDark`, `--colors-blue3`). +- **Primary Hover** (`{colors.primary-hover}` — `#000000`): measured hover state of the primary button — background and border both go to pure black. +- **On Primary** (`{colors.on-primary}` — `#ffffff`): button label and footer text on navy. +- **Focus** (`{colors.focus}` — `#3d46c2`): focus ring colour (`--colors-focus`, `--colors-blue2`), applied as `0 0 0 2px` in the CSS. +- **Brand Light** (`{colors.brand-light}` — `#ebecf7`): pale navy tint (`--colors-brandLight`, `--colors-blue1`) for selected/subdued brand surfaces. + +### Surface +- **Canvas** (`{colors.canvas}` — `#ffffff`): page background (`--colors-background`, `--colors-gray0`). +- **Gray 1** (`{colors.gray1}` — `#f7f7f7`): secondary button and "Log in" fill; the largest background by measured area (panels and mockups). +- **Background Light** (`{colors.background-light}` — `#f7f7f799`): translucent `#f7f7f7` at 60% — the search input fill (`--colors-backgroundLight`). +- **Gray 2** (`{colors.gray2}` — `#ededed`): the dominant border colour — card and panel hairlines, section dividers. +- **Gray 3** (`{colors.gray3}` — `#dedede`): stronger border — outlined button, input, secondary-button hover border. + +### Text +- **Ink** (`{colors.ink}` — `#333333`): body text, headings, links (`--colors-gray6`, `--colors-link`). Most-used text colour by far. +- **Foreground** (`{colors.foreground}` — `#000000`): active tab label, hover text, `h3` labels (`--colors-foreground`, `--colors-gray7`). +- **Slate** (`{colors.slate}` — `#696969`): secondary text, footer sub-links (`--colors-slate`, `--colors-gray5`). +- **Gray 4** (`{colors.gray4}` — `#999999`): tertiary text — inactive feature tabs, footer meta. + +### Channel States (Semantic) +Are.na colours channels by privacy; the triplets (light fill / mid border / strong text) come from the site's tokens: +- **Public**: `{colors.channel-public-1}` `#f4f8f3`, `{colors.channel-public-2}` `#b4d6b3`, `{colors.channel-public-3}` `#238020` (green). +- **Private**: `{colors.channel-private-1}` `#faf4f3`, `{colors.channel-private-2}` `#dfbebe`, `{colors.channel-private-3}` `#b93d3d` (red). +- **Closed**: `#f7f7f7`, `#dedede`, `#333333` (the neutral greys above). +- **Alert** (`{colors.alert}` — `#e15100`) and **Notification** (`{colors.notification}` — `#a87253`) are declared tokens for system messages; neither is visible on the logged-out homepage. + +## Typography + +### Font Family + +**Areal** — a custom typeface by Dinamo (ABC Dinamo) for Are.na, a redrawn, variable "revival" of Arial based on the 1996 Arial 2.82. It includes proportional, mono and semi-mono versions and a dark-mode axis that adjusts weight slightly for light-on-dark text. The site loads it as `@font-face { font-family: "areal" }` with a metric-matched `"areal Fallback"` face, then Arial and Helvetica. + +The site's `--fonts-sans` and `--fonts-mono` both begin with `'areal'` (mono falls through to SFMono-Regular, Menlo …), and `--fonts-serif` is `Times New Roman, Times, serif`, not used on the homepage. + +### Hierarchy + +| Token | Size | Weight | Line Height | Letter Spacing | Use | +|---|---|---|---|---|---| +| `{typography.page-title}` | 32px | 400 | 40px | normal | Article/page `h1` on Are.na Editorial (`#000000`) | +| `{typography.page-title-mobile}` | 28px | 400 | 35px | normal | Same `h1` at 390px | +| `{typography.breadcrumb}` | 28px | 700 | 35px | normal | "Are.na / Explore" breadcrumb title on app pages | +| `{typography.input}` | 16px | 400 | 23.2px | normal | Sign-up form fields | +| `{typography.link-bold}` | 16px | 700 | 23.2px | normal | Bold inline links in editorial articles | +| `{typography.heading-lg}` | 19.2px | 400 | 27.84px | normal | `h1` "Are.na is", lead paragraphs, list items, search input | +| `{typography.heading-lg-bold}` | 19.2px | 700 | 27.84px | normal | Section titles ("How it works", "No ads, no personalized recommendations"), inline emphasis | +| `{typography.heading-tab}` | 19.2px | 400 | 23.04px | normal | Feature tab labels ("Capture", "Arrange" …) | +| `{typography.base}` | 16px | 400 | 16px | normal | Root size, nav, footer | +| `{typography.body}` | 14.4px | 400 | 20.88px | normal | Block text, product copy | +| `{typography.button}` | 14.4px | 700 | 1 | normal | Button labels | +| `{typography.small}` | 12.5px | 400 | 1.35 | normal | Tab descriptions, captions, filenames | +| `{typography.button-sm}` | 12.5px | 700 | 1 | normal | "Log in" nav button | +| `{typography.body-mobile}` | 12.5px | 400 | 16.875px | normal | Block text at 390px | +| `{typography.micro}` | 10px | 600 | 1 | normal | Tiny labels (e.g. "PDF") | + +The sizes map to the site's rem scale: `--fontSizes-1` 0.78125rem (12.5px), `--fontSizes-2` 0.9rem (14.4px), `--fontSizes-3` 1rem (16px), `--fontSizes-4` 1.2rem (19.2px). Larger steps exist in the token set (`--fontSizes-5` 1.5rem through `--fontSizes-9` 3rem). The marketing homepage never goes above 19.2px; app and editorial pages use 24px (channel titles in blocks), 28px (breadcrumb, mobile article title) and 32px (article title). Measured pages: `/sign_up`, `/explore`, `/editorial/introducing-areal-are-nas-new-typeface`. + +The 10px size and the 600 weight were each measured on the same 36 characters; they are recorded together as `micro`. + +### Principles +- **No display type.** The biggest text on the homepage is 19.2px; the largest anywhere measured is the 32px article title. Do not introduce a hero headline. +- **Weight, not size, for hierarchy.** Section titles are 19.2px at 700; everything else at 19.2px is 400. +- **Generous leading.** 1.45 on 19.2px (27.84px) and 14.4px (20.88px) — airy, book-like. +- **No tracking adjustments.** Letter-spacing is `normal` everywhere. +- **Ink is `#333333`, not black.** Pure black is reserved for active / hover states. + +### Note on Font Substitutes +Areal is proprietary to Are.na (made by Dinamo). The site's own fallback chain is the correct substitute: **Arial**, then Helvetica. Because Areal is a cleaned-up Arial, Arial at the same sizes, weights and line-heights reproduces the page closely; Areal's differences (more even stems, refined details) are subtle at 12.5–19.2px. Do not substitute Inter or Helvetica Neue as the first choice — they change the texture away from Arial's. + +## Layout + +### Spacing System +- **Tokens (site's own `--space-*`)**: `{spacing.nudge}` 2px · `{spacing.space-1}` 5px · `{spacing.space-2}` 10px · `{spacing.space-3}` 15px · `{spacing.space-4}` 20px · `{spacing.space-5}` 25px · `{spacing.space-6}` 35px · `{spacing.space-7}` 45px · `{spacing.space-8}` 65px · `{spacing.space-9}` 80px · `{spacing.space-10}` 100px · `{spacing.space-11}` 130px. +- The scale is built on 5px, not 4 or 8. Measured gaps: 5px (most frequent), 15px, 10px, 25px, 35px, 20px, 130px. Measured paddings: 10px, 2.5px, 6px, 5px, 7.5px, 65px, 15px. +- **Button padding**: 0 15px (0 10px for the small "Log in" button; 0 20px on mobile). +- **Footer padding**: 65px on all sides. + +### Grid & Container +- Text column: 568px wide (measured `h1`/`h2` width), offset ~356px from the left at 1280px — not centred; the right side is left open. +- "How it works" breaks out of the column: the product screenshot spans roughly 820px wide starting near the left edge of the content area, with the feature tab list in a narrow column to its right, and a phone mockup overlapping the screenshot's lower-left. +- The block-grid panel spans ~1035px, centred, holding three blocks with large internal margins. + +### Whitespace Philosophy +Section breaks are huge: ~130px of white (`--space-11`), a full-width hairline (`#ededed`) inset from the page edges, then another large gap. Within a section the rhythm is tight and paragraph-based (≈25px between paragraphs at 19.2px). The page feels like a long letter with chapter breaks. + +## Elevation & Depth + +| Level | Treatment | Use | +|---|---|---| +| 0 | Flat | Page, text column, buttons | +| 1 | `0 0 34px 0 rgba(0, 0, 0, 0.05)` (`color-mix(in srgb, var(--colors-foreground) 5%, transparent)`) | Search input, product screenshot panel, phone mockup | +| 2 | `0 0 20px 0 rgba(0, 0, 0, 0.08)` (`--shadows-1`) | Declared token for floating UI; not seen on the homepage | +| Focus | `0 0 0 2px #3d46c2` | Keyboard focus ring | +| Hairline | `0 0 0 1px #ededed` / `inset 1px 0 0 #ededed` | Shadow-based borders in the CSS | + +Shadows are always ambient (0 offset, large blur, very low opacity) — a glow rather than a drop. + +## Shapes + +### Border Radius Scale + +| Token | Value | Use | +|---|---|---| +| `{rounded.none}` | 0px | Blocks, images, text column | +| `{rounded.radii-1}` | 3px | Every button and input (`--radii-1`) — by far the most-used radius | +| `{rounded.panel}` | 10px | Large panels (product screenshot, block-grid panel) | +| `{rounded.device}` | 18px | Device-frame corners | +| `{rounded.round}` | 50% | Avatars and circular controls (`--radii-round`) | +| `{rounded.pill}` | 9999px | Declared `--radii-pill`; not seen on the homepage | + +The phone mockup itself uses an elliptical `14% / 6.46%` radius; it is an illustration frame, not a reusable card shape. + +### Photography Geometry +Images inside blocks are square-cornered and grayscale or archival. Are.na's content blocks are always rectangles; only chrome (buttons, panels) is rounded. + +## Components + +### Buttons + +**`button-primary`** — "Sign up". +- Background `{colors.primary}` `#00075f`, text `{colors.on-primary}`, type `{typography.button}` (14.4px / 700), padding 0 15px, height 34px, radius `{rounded.radii-1}` 3px, 1px transparent border. +- **Hover** (`button-primary-hover`, measured): background `#000000`, border `#000000`, text stays `#ffffff`. +- **Mobile** (`button-primary-mobile`, measured at 390px): full column width (360px), height 47px, padding 0 20px. + +**`button-secondary`** — "Download the app". +- Background `{colors.gray1}` `#f7f7f7`, text `{colors.ink}` `#333333`, same geometry as primary. +- **Hover** (`button-secondary-hover`, measured): text `#000000`, border `#dedede`, background unchanged. + +**`button-outlined`** — "View API documentation". +- Transparent background, 1px `{colors.gray3}` `#dedede` border, text `{colors.ink}`, `{typography.button}`, 34px tall, 3px radius. + +**`nav-button`** — "Log in" (top-right). +- Background `{colors.gray1}`, text `{colors.ink}`, `{typography.button-sm}` (12.5px / 700), padding 0 10px, height 24px, radius 3px. + +Primary and secondary sit side by side with a 10px gap, left-aligned under the paragraph. + +### Cards & Containers + +**`card`** — Are.na block (measured on `/explore`; borders `#dedede`, `#ededed`, `#b4d6b3` all present on that page). +- Text block: background `{colors.canvas}`, 1px `{colors.gray2}` `#ededed` border, square corners, 10px inner padding, `{typography.body}` (14.4px) text top-left. Square, ~276px at 1280px in a four-column grid. +- Image block: no frame — the image is centred inside the square cell at its own aspect ratio; the filename or title sits centred below in `{typography.small}` `{colors.slate}` `#696969`, truncated with an ellipsis. + +**`card-channel`** — a channel shown as a block. +- 1px `{colors.gray3}` `#dedede` border, white, square. Centred: channel title at 24px (measured size) in `#333333`, then "by **Name**" (700), "N blocks", and "less than a minute ago" in `{typography.small}`. + +**`card-channel-public`** — public channel variant: border `{colors.channel-public-2}` `#b4d6b3`, all text `{colors.channel-public-3}` `#238020`. Private channels use the red triplet the same way (tokens only; not seen on `/explore`). + +**`product-panel`** — framed screenshot of the app. +- Background `{colors.canvas}`, 1px `{colors.gray2}` border, radius `{rounded.panel}` 10px, Level 1 ambient shadow. + +### Inputs & Forms + +**`text-input`** — form field (measured on `/sign_up`). +- Background `{colors.gray1}` `#f7f7f7`, text `{colors.ink}`, `{typography.input}` (16px / 23.2px), padding 0 10px, height 40px, radius 3px, 1px transparent border, full form width (373px). The sign-up button below it is the same width with 0 20px padding and 34px height. + +**`search-input-hero`** — homepage search field. +- Background `{colors.background-light}` `#f7f7f799`, text `{colors.ink}`, `{typography.heading-lg}` (19.2px / 27.84px), height 54px, padding 0 20px 0 45px (left slot for the search icon), 1px `{colors.gray3}` border, radius 3px, shadow `0 0 34px 0 rgba(0, 0, 0, 0.05)`. +- Focus: `0 0 0 2px {colors.focus}` ring (from the CSS). + +### Navigation + +**`nav`** — 55px top strip on `{colors.canvas}`. On the logged-out homepage it only holds the `nav-button` "Log in" at the far right. On app/editorial pages (measured) it holds the [U+2731 U+2731] mark, `nav-search` "Search Are.na" in `{colors.slate}` 16px, and at the right "Log in" (`nav-button`) beside a navy "Sign up" at the same 24px height. +- **`nav-search` hover** (measured): text `#696969` → `#333333`, background becomes `#f7f7f7`, a 1px `#ededed` border appears, and a "/" keyboard-shortcut hint is revealed. +- **Breadcrumb hover** (measured): "Are.na" in the "Are.na / Explore" title goes `#696969` → `#000000`. +- At 390px the extractor's mobile "nav" was the footer link list ("Discover", "Explore", "Search", "Are.na Editorial", "Community Projects") in white. + +**`link`** — `{colors.ink}` `#333333` (`--colors-link`), no colour change from body text; links are distinguished by context and weight rather than hue. + +**Feature tabs** — vertical list of 19.2px labels; active label `#000000` with a 12.5px description and a 2px black vertical rule on a 1px grey track; inactive labels `#999999`. + +### Footer + +**`footer`** — background `{colors.primary}` `#00075f`, text `{colors.on-primary}`, `{typography.base}`, padding 65px. Opens with "A platform for connecting ideas and building knowledge."; secondary links in `#999999` and `#696969`. + +## Design System Architecture + +Are.na publishes **no public design-system documentation site, token package or component library**. Searches for an Are.na design system, brand guidelines/press kit and token packages turned up nothing official (see `SOURCES.json`); the only published system artefacts are the Areal typeface ([editorial announcement](https://www.are.na/editorial/introducing-areal-are-nas-new-typeface), [Dinamo](https://abcdinamo.com/newsletter/the-dinamo-update-areal-custom-typeface-arena)) and an icon package ([`@aredotna/icons`](https://github.com/aredotna/icons)). Everything below is therefore the **de-facto system read from the CSS the site ships** — the inline `