houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e2df785aece3ea69c874c9c329f679edbfb456a7
twenty/packages/twenty-website-redone/scripts/locks/product.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

731 lines
18 KiB
JSON
Raw Blame History

{
"base-390": {
"sections": [
{
"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": "dark",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(28, 28, 28)",
"followsSameScheme": false
}
],
"eyebrows": [
{
"label": "Core Features",
"gapToHeading": 24,
"centered": true
},
{
"label": "Stop settling for trade-offs.",
"gapToHeading": 24,
"centered": true
},
{
"label": "Customization",
"gapToHeading": 24,
"centered": true
},
{
"label": "Try it live",
"gapToHeading": 24,
"centered": true
},
{
"label": "Any Questions?",
"gapToHeading": 24,
"centered": true
}
],
"headings": [
{
"tag": "H1",
"text": "A CRM for teams that move fast",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H1",
"text": "A CRM for teams that move fast",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A CRM for teams that move fast",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Everything you need, out of the box",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A modern CRM with an intuitive interface",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Go the extra mile with no-code",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "A demo worth a thousand words",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Stop fighting custom. Start building, with Twenty",
"fontSize": "40px",
"fontWeight": "300",
"textAlign": "start"
}
],
"visualSlots": ["eye", "faq", "footer-backdrop", "singleScreen", "speed"],
"ctas": [
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Try Twenty Cloud",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
}
],
"sectionCount": 6
},
"sm-820": {
"sections": [
{
"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": "dark",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(28, 28, 28)",
"followsSameScheme": false
}
],
"eyebrows": [
{
"label": "Core Features",
"gapToHeading": 24,
"centered": true
},
{
"label": "Stop settling for trade-offs.",
"gapToHeading": 24,
"centered": true
},
{
"label": "Customization",
"gapToHeading": 24,
"centered": true
},
{
"label": "Try it live",
"gapToHeading": 24,
"centered": true
},
{
"label": "Any Questions?",
"gapToHeading": 24,
"centered": true
}
],
"headings": [
{
"tag": "H1",
"text": "A CRM for teams that move fast",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H1",
"text": "A CRM for teams that move fast",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A CRM for teams that move fast",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Everything you need, out of the box",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A modern CRM with an intuitive interface",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Go the extra mile with no-code",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "A demo worth a thousand words",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Stop fighting custom. Start building, with Twenty",
"fontSize": "56.1957px",
"fontWeight": "300",
"textAlign": "start"
}
],
"visualSlots": ["eye", "faq", "footer-backdrop", "singleScreen", "speed"],
"ctas": [
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Try Twenty Cloud",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
}
],
"sectionCount": 6
},
"md-1100": {
"sections": [
{
"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": "dark",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(28, 28, 28)",
"followsSameScheme": false
}
],
"eyebrows": [
{
"label": "Core Features",
"gapToHeading": 24,
"centered": true
},
{
"label": "Stop settling for trade-offs.",
"gapToHeading": 24,
"centered": true
},
{
"label": "Customization",
"gapToHeading": 24,
"centered": true
},
{
"label": "Try it live",
"gapToHeading": 24,
"centered": true
},
{
"label": "Any Questions?",
"gapToHeading": 24,
"centered": true
}
],
"headings": [
{
"tag": "H1",
"text": "A CRM for teams that move fast",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H1",
"text": "A CRM for teams that move fast",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A CRM for teams that move fast",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Everything you need, out of the box",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A modern CRM with an intuitive interface",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Go the extra mile with no-code",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "A demo worth a thousand words",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Stop fighting custom. Start building, with Twenty",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
}
],
"visualSlots": ["eye", "faq", "footer-backdrop", "singleScreen", "speed"],
"ctas": [
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Try Twenty Cloud",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
}
],
"sectionCount": 6
},
"lg-1440": {
"sections": [
{
"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": "dark",
"rhythm": "spacious",
"paddingTop": "120px",
"paddingBottom": "120px",
"background": "rgb(28, 28, 28)",
"followsSameScheme": false
}
],
"eyebrows": [
{
"label": "Core Features",
"gapToHeading": 24,
"centered": true
},
{
"label": "Stop settling for trade-offs.",
"gapToHeading": 24,
"centered": true
},
{
"label": "Customization",
"gapToHeading": 24,
"centered": true
},
{
"label": "Try it live",
"gapToHeading": 24,
"centered": true
},
{
"label": "Any Questions?",
"gapToHeading": 24,
"centered": true
}
],
"headings": [
{
"tag": "H1",
"text": "A CRM for teams that move fast",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H1",
"text": "A CRM for teams that move fast",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A CRM for teams that move fast",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "...with AI that actually helps you work faster",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Everything you need, out of the box",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "A modern CRM with an intuitive interface",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "Go the extra mile with no-code",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
},
{
"tag": "H2",
"text": "A demo worth a thousand words",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "center"
},
{
"tag": "H2",
"text": "Stop fighting custom. Start building, with Twenty",
"fontSize": "60px",
"fontWeight": "300",
"textAlign": "start"
}
],
"visualSlots": ["eye", "faq", "footer-backdrop", "singleScreen", "speed"],
"ctas": [
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Try Twenty Cloud",
"href": "https://app.twenty.com/welcome"
},
{
"label": "Get started",
"href": "https://app.twenty.com/welcome"
}
],
"sectionCount": 6
}
}
Reference in New Issue View Git Blame Copy Permalink