houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bebe03e453c327770de3655c6f90d3d14b1ae997
twenty/packages/twenty-website-redone/scripts/locks/home.json
T
Abdullah. 465eb05aaf Reworked website. (#21763) 
twenty-website had accumulated structural problems that were cheaper to
fix by rebuilding than to refactor in place:
  
- Drift had no guardrails. Values were matched at call sites instead of
single-sourced, so things silently diverged — e.g. the radius token base
was wrong for days (every radius() consumer rendered double) because
nothing measured it against the old site's CSS variables.
- A whole tree escaped quality checks. src/lib/ (~9.8k lines) was never
format-checked, because oxfmt silently ignores directories named lib/.
- Inconsistent rhythm. Hero spacing varied 24–88px between pages
(CEO-flagged), because section spacing wasn't a token.
- Over-extraction. -config.ts sprawl pulled single-component
configuration out into the wrong place.
  
The goal: a ground-up rebuild where drift is structurally impossible,
held to a Linear / Railway / Notion / Attio quality bar. The old site is
treated as source of intent only — nothing is blindly ported; every
piece is re-decided and A/B-verified.

**Rebuild**
  
A full rebuild on Next 16 + Turbopack + Linaria (zero-runtime CSS),
~1,100 files. Marketing pages (home, product, pricing, partners +
marketplace, customers/case-studies, why-twenty, releases, legal), the
interactive AppPreview product mockup, the platform/visuals WebGL system
(engine + rigs, three code-split off every initial chunk), and the
standalone /halftone studio (the dev tool that generates the site's
halftone art — engine, exporters, and full UI ported as an isolated
island).
  
**Architecture & guarantees**
  
- Parity by construction. src/tokens/definitions.ts is the only file
with raw values; the :root CSS-variable block is generated from it at
build time and accessors derive var names through the same helpers —
derived alpha tokens appear in served CSS without ever being
hand-written.
- Mobile-first by API shape. mediaUp() is the only media helper (no
max-width helper exists, on purpose).
- Section rhythm is a token (RHYTHM.section) — the hero-spacing
inconsistency class is fixed by construction.
- Fluid type ramps interpolate font-size and line-height between
designed endpoints [390px → md]; TYPE_SCALE is the single source.
- three.js never enters an initial chunk — confined to platform/visuals
heavy zones, reached only via dynamic(ssr:false), enforced by
check-visual-bundle.
2026-06-18 11:55:24 +02:00

883 lines
21 KiB
JSON
Raw Blame History

{
"base-390": {
"sections": [
{
"scheme": "muted",
"rhythm": "hero",
"paddingTop": "30px",
"paddingBottom": "30px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "48px",
"paddingBottom": "48px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "6px",
"paddingBottom": "48px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": true
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "6px",
"paddingBottom": "48px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": true
},
{
"scheme": "muted",
"rhythm": "section",
"paddingTop": "48px",
"paddingBottom": "48px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "48px",
"paddingBottom": "48px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": false
},
{
"scheme": "muted",
"rhythm": "flush",
"paddingTop": "0px",
"paddingBottom": "0px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "muted",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": true
},
{
"scheme": "dark",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(28, 28, 28)",
"followsSameScheme": false
}
],
"eyebrows": [
{
"label": "The Problem.",
"gapToHeading": 24,
"centered": true
},
{
"label": "Stop settling for trade-offs.",
"gapToHeading": 24,
"centered": true
},
{
"label": "In production.",
"gapToHeading": 24,
"centered": true
},
{
"label": "They are the real sales",
"gapToHeading": 24,
"centered": true
},
{
"label": "Any Questions?",
"gapToHeading": 24,
"centered": true
}
],
"headings": [
{
"tag": "H1",
"text": "Build your Enterprise CRM at AI Speed",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A custom CRM gives your org an edge, but building one comes ",
"fontSize": "40.0005px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Assemble, iterate and adapt a robust CRM, that's quick to fl",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Make your GTM team happy with a CRM they'll love",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Dev teams power company-wide change with Twenty",
"fontSize": "37.05px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "The flexibility is really what made the difference. Our need",
"fontSize": "40.0005px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "We didn't want to patch over the problem. We wanted to build",
"fontSize": "40.0005px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "It is just such a nicer experience than dealing with a Sales",
"fontSize": "40.0005px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Stop fighting custom. Start building, with Twenty",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "start"
}
],
"visualSlots": [
"diamond",
"familiar-interface",
"faq",
"fast-path",
"flash",
"footer-backdrop",
"hero-bridge",
"hourglass",
"live-data",
"lock",
"money",
"monolith",
"spaceship",
"stepper-backdrop",
"target"
],
"ctas": [
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "",
"href": "/customers/w3villa"
},
{
"label": "",
"href": "/customers/alternative-partners"
},
{
"label": "",
"href": "/customers/act-education"
},
{
"label": "Read the case",
"href": "/customers/w3villa"
},
{
"label": "Read the case",
"href": "/customers/act-education"
},
{
"label": "Read the case",
"href": "/customers/netzero"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
}
],
"sectionCount": 9
},
"sm-820": {
"sections": [
{
"scheme": "muted",
"rhythm": "hero",
"paddingTop": "30px",
"paddingBottom": "30px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "48px",
"paddingBottom": "48px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "6px",
"paddingBottom": "48px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": true
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "6px",
"paddingBottom": "48px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": true
},
{
"scheme": "muted",
"rhythm": "section",
"paddingTop": "48px",
"paddingBottom": "48px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "48px",
"paddingBottom": "48px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": false
},
{
"scheme": "muted",
"rhythm": "flush",
"paddingTop": "0px",
"paddingBottom": "0px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "muted",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": true
},
{
"scheme": "dark",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(28, 28, 28)",
"followsSameScheme": false
}
],
"eyebrows": [
{
"label": "The Problem.",
"gapToHeading": 24,
"centered": true
},
{
"label": "Stop settling for trade-offs.",
"gapToHeading": 24,
"centered": true
},
{
"label": "In production.",
"gapToHeading": 24,
"centered": true
},
{
"label": "They are the real sales",
"gapToHeading": 24,
"centered": true
},
{
"label": "Any Questions?",
"gapToHeading": 24,
"centered": true
}
],
"headings": [
{
"tag": "H1",
"text": "Build your Enterprise CRM at AI Speed",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A custom CRM gives your org an edge, but building one comes ",
"fontSize": "46.4789px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Assemble, iterate and adapt a robust CRM, that's quick to fl",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Make your GTM team happy with a CRM they'll love",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Dev teams power company-wide change with Twenty",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "The flexibility is really what made the difference. Our need",
"fontSize": "46.4789px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "We didn't want to patch over the problem. We wanted to build",
"fontSize": "46.4789px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "It is just such a nicer experience than dealing with a Sales",
"fontSize": "46.4789px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Stop fighting custom. Start building, with Twenty",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "start"
}
],
"visualSlots": [
"diamond",
"familiar-interface",
"faq",
"fast-path",
"flash",
"footer-backdrop",
"hero-bridge",
"hourglass",
"live-data",
"lock",
"money",
"monolith",
"spaceship",
"stepper-backdrop",
"target"
],
"ctas": [
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "",
"href": "/customers/w3villa"
},
{
"label": "",
"href": "/customers/alternative-partners"
},
{
"label": "",
"href": "/customers/act-education"
},
{
"label": "Read the case",
"href": "/customers/w3villa"
},
{
"label": "Read the case",
"href": "/customers/act-education"
},
{
"label": "Read the case",
"href": "/customers/netzero"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
}
],
"sectionCount": 9
},
"md-1100": {
"sections": [
{
"scheme": "muted",
"rhythm": "hero",
"paddingTop": "48px",
"paddingBottom": "48px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "64px",
"paddingBottom": "64px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "6px",
"paddingBottom": "64px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": true
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "6px",
"paddingBottom": "64px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": true
},
{
"scheme": "muted",
"rhythm": "section",
"paddingTop": "64px",
"paddingBottom": "64px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "64px",
"paddingBottom": "64px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": false
},
{
"scheme": "muted",
"rhythm": "flush",
"paddingTop": "0px",
"paddingBottom": "0px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "muted",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": true
},
{
"scheme": "dark",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(28, 28, 28)",
"followsSameScheme": false
}
],
"eyebrows": [
{
"label": "The Problem.",
"gapToHeading": 24,
"centered": true
},
{
"label": "Stop settling for trade-offs.",
"gapToHeading": 24,
"centered": true
},
{
"label": "In production.",
"gapToHeading": 24,
"centered": true
},
{
"label": "They are the real sales",
"gapToHeading": 56,
"centered": true
},
{
"label": "Any Questions?",
"gapToHeading": 24,
"centered": true
}
],
"headings": [
{
"tag": "H1",
"text": "Build your Enterprise CRM at AI Speed",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A custom CRM gives your org an edge, but building one comes ",
"fontSize": "48px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Assemble, iterate and adapt a robust CRM, that's quick to fl",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Make your GTM team happy with a CRM they'll love",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Dev teams power company-wide change with Twenty",
"fontSize": "80px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "The flexibility is really what made the difference. Our need",
"fontSize": "48px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "We didn't want to patch over the problem. We wanted to build",
"fontSize": "48px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "It is just such a nicer experience than dealing with a Sales",
"fontSize": "48px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Stop fighting custom. Start building, with Twenty",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
}
],
"visualSlots": [
"diamond",
"familiar-interface",
"faq",
"fast-path",
"flash",
"footer-backdrop",
"hero-bridge",
"hourglass",
"live-data",
"lock",
"money",
"monolith",
"spaceship",
"stepper-backdrop",
"target"
],
"ctas": [
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "",
"href": "/customers/w3villa"
},
{
"label": "",
"href": "/customers/alternative-partners"
},
{
"label": "",
"href": "/customers/act-education"
},
{
"label": "Read the case",
"href": "/customers/w3villa"
},
{
"label": "Read the case",
"href": "/customers/act-education"
},
{
"label": "Read the case",
"href": "/customers/netzero"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
}
],
"sectionCount": 9
},
"lg-1440": {
"sections": [
{
"scheme": "muted",
"rhythm": "hero",
"paddingTop": "48px",
"paddingBottom": "48px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "64px",
"paddingBottom": "64px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "6px",
"paddingBottom": "64px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": true
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "6px",
"paddingBottom": "64px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": true
},
{
"scheme": "muted",
"rhythm": "section",
"paddingTop": "64px",
"paddingBottom": "64px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "light",
"rhythm": "section",
"paddingTop": "64px",
"paddingBottom": "64px",
"background": "rgb(255, 255, 255)",
"followsSameScheme": false
},
{
"scheme": "muted",
"rhythm": "flush",
"paddingTop": "0px",
"paddingBottom": "0px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": false
},
{
"scheme": "muted",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(244, 244, 244)",
"followsSameScheme": true
},
{
"scheme": "dark",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(28, 28, 28)",
"followsSameScheme": false
}
],
"eyebrows": [
{
"label": "The Problem.",
"gapToHeading": 24,
"centered": true
},
{
"label": "Stop settling for trade-offs.",
"gapToHeading": 24,
"centered": true
},
{
"label": "In production.",
"gapToHeading": 24,
"centered": true
},
{
"label": "They are the real sales",
"gapToHeading": 56,
"centered": true
},
{
"label": "Any Questions?",
"gapToHeading": 24,
"centered": true
}
],
"headings": [
{
"tag": "H1",
"text": "Build your Enterprise CRM at AI Speed",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A custom CRM gives your org an edge, but building one comes ",
"fontSize": "48px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Assemble, iterate and adapt a robust CRM, that's quick to fl",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Make your GTM team happy with a CRM they'll love",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Dev teams power company-wide change with Twenty",
"fontSize": "80px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "The flexibility is really what made the difference. Our need",
"fontSize": "48px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "We didn't want to patch over the problem. We wanted to build",
"fontSize": "48px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "It is just such a nicer experience than dealing with a Sales",
"fontSize": "48px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Stop fighting custom. Start building, with Twenty",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
}
],
"visualSlots": [
"diamond",
"familiar-interface",
"faq",
"fast-path",
"flash",
"footer-backdrop",
"hero-bridge",
"hourglass",
"live-data",
"lock",
"money",
"monolith",
"spaceship",
"stepper-backdrop",
"target"
],
"ctas": [
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "",
"href": "/customers/w3villa"
},
{
"label": "",
"href": "/customers/alternative-partners"
},
{
"label": "",
"href": "/customers/act-education"
},
{
"label": "Read the case",
"href": "/customers/w3villa"
},
{
"label": "Read the case",
"href": "/customers/act-education"
},
{
"label": "Read the case",
"href": "/customers/netzero"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
}
],
"sectionCount": 9
}
}
Reference in New Issue View Git Blame Copy Permalink