{ "contract": "aesthetary.record/1.0", "record_spec": "1.1.0", "semantics": { "vocabulary": "aesthetary.public-evidence/1.0", "definitions": "vocabulary.json" }, "slug": "modern-saas", "name": "Modern SaaS", "identity": { "definition": { "state": "resolved", "text": "Neutral ground, one saturated accent reserved for the primary action, rounded cards under soft elevation, product screenshot hero, customer logo bar" }, "scope": { "state": "resolved", "text": "The marketing-site presentation of contemporary business-software vendors. GitHub keeps a separate Primer Brand system for marketing sites and aims for compact product UI, and a draft Primer guideline pairs density on product with spaciousness on marketing; Atlassian keeps separate brand guidance for marketing. The record is therefore scoped to marketing pages; product and dashboard UI are outside it until studied. The name and the grouping into one register are Aesthetary's construction, not an attested movement.", "ruling": "D0-1" }, "aliases": [ "startup default", "B2B SaaS", "tech corporate" ], "layer_verdict": { "state": "none" } }, "native_medium": { "state": "resolved", "value": [ "screen" ], "ruling": null }, "research": { "line": "partly_sourced", "text": "Partly sourced", "sentence": "22 sources attached." }, "areas": [ { "area": "layout", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "typography", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "color", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "imagery", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "surface", "state": "resolved", "canon": "not_canonically_specified", "importance": "supporting", "posture_basis": "synthesis", "label": { "text": "Supporting · Not specified by the source" } }, { "area": "interface", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "motion", "state": "resolved", "canon": "open_by_finding", "importance": "unknown", "posture_basis": "synthesis", "label": { "text": "Left open" } }, { "area": "motif", "state": "resolved", "canon": "not_canonically_specified", "importance": "none", "posture_basis": "synthesis", "label": { "text": "Not specified by the source" } }, { "area": "technique", "state": "resolved", "canon": "not_canonically_specified", "importance": "none", "posture_basis": "synthesis", "label": { "text": "Not specified by the source" } }, { "area": "form", "state": "resolved", "canon": "not_canonically_specified", "importance": "none", "posture_basis": "synthesis", "label": { "text": "Not specified by the source" } }, { "area": "hierarchy", "state": "resolved", "canon": "specified", "importance": "unknown", "posture_basis": null, "label": { "text": "Specified" } }, { "area": "density", "state": "resolved", "canon": "specified", "importance": "unknown", "posture_basis": null, "label": { "text": "Specified" } } ], "claims": [ { "id": "ground-light-default", "text": "Most often a near-white ground. The register also occurs dark-first, and neither ground is required.", "role": "rule", "area": "color", "basis": "synthesis", "support": { "state": "observed_instances", "for": [ "4KSFVKJGJDDG4KVR0FJTRY25NP", "3FH0D73VESE4JE6F1NVTY1PTN6" ], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C4 g1rule" }, { "id": "radius-consistent", "text": "One consistent corner radius across components. No magnitude is characteristic.", "role": "rule", "area": "interface", "basis": "synthesis", "support": { "state": "observed_instances", "for": [ "7485E75JAH4VME485Y8R1KKJRA", "3FN7BAE7FX7SK7DFHCPA5VTEKS" ], "against": [ "4GQWG89XNBQ02PTD62S5DYSPP6", "6VVRVE1RBTM8JQ4AFAHM6R8D74", "666AE1R6039R1J0BR6FA5JAPQM", "5Q40TW1777GHF04JVAJ7Y7YAS8" ], "contested": true }, "label": { "kind": "reading", "mark": "disputed", "text": "Our reading · disputed" }, "derives_from": [], "ruling": "D0-3 C4 g1rule" }, { "id": "one-elevation-step", "text": "Exactly one elevation step. Large blur, low opacity, small downward offset.", "role": "rule", "area": "interface", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [ "factory-v1:modern-saas:S5" ], "contested": true }, "label": { "kind": "reading", "mark": "disputed", "text": "Our reading · disputed" }, "derives_from": [], "ruling": "D0-3 C4 g1rule" }, { "id": "sans-serif", "text": "Sans-serif throughout, two weights, tight tracking on display sizes.", "role": "rule", "area": "typography", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C4 g1rule" }, { "id": "spacing-base-unit", "text": "Section rhythm from a consistent base unit, commonly 4 or 8 px.", "role": "rule", "area": "layout", "basis": "synthesis", "support": { "state": "observed_instances", "for": [ "factory-v1:modern-saas:S3", "factory-v1:modern-saas:S6" ], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C4 g1rule" }, { "id": "product-screenshot-hero", "text": "The hero is usually occupied by the product interface itself rather than by photography or illustration.", "role": "rule", "area": "imagery", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [ "29PXH6MZKY3F3BVBRPN46FVZBP", "1N8TEJWW8S9C53XV002Z8SN8ES" ], "contested": true }, "label": { "kind": "reading", "mark": "disputed", "text": "Our reading · disputed" }, "derives_from": [], "ruling": "D0-3 C4 g1rule" }, { "id": "single-accent", "text": "One saturated accent, reserved for the primary action rather than for decoration. NO HUE IS CHARACTERISTIC — choose freely.", "role": "rule", "area": "color", "basis": "observed", "support": { "state": "observed_instances", "for": [ "29PXH6MZKY3F3BVBRPN46FVZBP", "1N8TEJWW8S9C53XV002Z8SN8ES", "5SNPCPVPMNKVNGVNWEH55KZHBN", "0QZ974AVTV8FGQZTVFGGHZSTCK", "4KSFVKJGJDDG4KVR0FJTRY25NP", "3FH0D73VESE4JE6F1NVTY1PTN6", "7485E75JAH4VME485Y8R1KKJRA" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": "D0-3 C4 g1rule" }, { "id": "intent", "text": "Signals category membership and operational competence by looking like the other credible products in the category. Legibility of the offer matters more than distinction from competitors.", "role": "argument", "area": null, "basis": "synthesis", "support": { "state": "cited_unverified", "for": [ "held:modern-saas:50b2c21bb9" ], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C1 prose" }, { "id": "gestalt", "text": "A neutral ground — most often near-white, sometimes near-black — carrying one saturated accent reserved almost exclusively for the primary action, rounded cards under soft low-opacity elevation, and a hero usually occupied by a screenshot of the product itself. The screenshot hero plus the customer logo bar places a page in B2B software within a second, but that is a MARKETING signature rather than a visual grammar, and neither element is required: Mailchimp leads with illustration and is unquestionably SaaS. Sans-serif type and rounded corners are far too common to identify anything, and direct measurement finds no characteristic accent hue and no characteristic radius.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C1 prose" }, { "id": "intent-cost", "text": "Costs accepted: Distinctiveness; Memorability; Any claim to authorship", "role": "argument", "area": null, "basis": "synthesis", "support": { "state": "cited_unverified", "for": [ "held:modern-saas:50b2c21bb9" ], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C1 prose" }, { "id": "intent-audience", "text": "Audience: A buyer who is comparing several vendors and reads unfamiliarity as risk.", "role": "argument", "area": null, "basis": "synthesis", "support": { "state": "cited_unverified", "for": [ "held:modern-saas:50b2c21bb9" ], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C1 prose" }, { "id": "gestalt-boundary", "text": "READ THE EPISTEMIC STATUS BEFORE THE CONTENT. This record is attestation CONSTRUCTED — the only constructed record in the corpus — and origin_kind MARKET_CONVENTION. It names something assembled here rather than a movement anyone declared, and after adjudication it asserts ZERO canonical constraints. It is not equivalent in standing to Swiss Style, and it should not be read as though it were. WHAT THE MEASUREMENT WAS. Eight sites measured directly in a browser on 2026-09-20, chosen to be heterogeneous and to include counterexamples: Linear, Stripe, Notion, Salesforce, Mailchimp, Supabase, Atlassian, Ramp. It is a FALSIFICATION SAMPLE. It can refute a universal — one yellow accent refutes \"the accent is indigo\" — and it CANNOT establish prevalence. Nothing here says most SaaS sites do anything. WHY FREQUENCY IS NOT GRAMMAR. Several recurring traits have known confounds and are recorded with them named: the 4/8px spacing base and the shared radius scale are shipped by the dominant toolchain; the contrast and target-size rules are WCAG conformance; the screenshot hero and the logo bar are conversion practice. Separating these from aesthetic choice is unfinished content work, not architecture. THE PROPOSED DIALECTS WERE NOT ADOPTED. The reconnaissance proposed Technical Dark, Warm Productivity, High-Trust Fintech and AI Glow. The measurement shows variation but no clean clusters — Mailchimp and Ramp share a yellow accent and nothing else; Notion and Atlassian share blue-on-white across unrelated sectors. Asserting that taxonomy would canonize a structure nobody found.", "role": "boundary", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C1 prose" }, { "id": "v1-distinguishing", "text": "The commercial default of the last decade; recognisable precisely because it is unremarkable", "role": "diagnostic", "area": null, "basis": "inherited", "support": { "state": "inherited", "for": [], "against": [], "contested": false }, "label": { "kind": "catalogue", "text": "From our catalogue entry" }, "derives_from": [], "ruling": null }, { "id": "v1-defining", "text": "White ground, indigo or violet accent, rounded cards, product screenshot hero, logo bar", "role": "definition", "area": null, "basis": "inherited", "support": { "state": "inherited", "for": [], "against": [], "contested": false }, "label": { "kind": "catalogue", "text": "From our catalogue entry" }, "derives_from": [], "ruling": null }, { "id": "v1-era", "text": "Era: contemporary", "role": "context", "area": null, "basis": "inherited", "support": { "state": "inherited", "for": [], "against": [], "contested": false }, "label": { "kind": "catalogue", "text": "From our catalogue entry" }, "derives_from": [], "ruling": null }, { "id": "v1-mood", "text": "Mood: serious", "role": "context", "area": null, "basis": "inherited", "support": { "state": "inherited", "for": [], "against": [], "contested": false }, "label": { "kind": "catalogue", "text": "From our catalogue entry" }, "derives_from": [], "ruling": null }, { "id": "v1-cross-library", "text": "Cross-library: Layout: Bento Grid · UI Treatments: soft elevation · Color: Aurora gradient", "role": "context", "area": null, "basis": "inherited", "support": { "state": "inherited", "for": [], "against": [], "contested": false }, "label": { "kind": "catalogue", "text": "From our catalogue entry" }, "derives_from": [], "ruling": null }, { "id": "summary", "text": "The commercial default of contemporary B2B software marketing. Measurement finds no characteristic hue, radius or ground — what recurs is one restrained accent and a page that shows the product.", "role": "definition", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C1 prose" }, { "id": "entity-provenance", "text": "transmission: \"commercial\"; origin_periods: {\"origin\":{\"start\":2014,\"end\":null,\"precision\":\"circa\"},\"currency\":\"live\"}; name_coiner: \"pending_research\"", "role": "history", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C6 meta" }, { "id": "dimension-ornament_density", "text": "ornament density: typical 1 (range 0–2); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-spatial_density", "text": "spatial density: typical 3 (range 2–4); editorial_seed, n = 0", "role": "rule", "area": "density", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-chromatic_energy", "text": "chromatic energy: typical 2 (range 1–3); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-structural_regularity", "text": "structural regularity: typical 5 (range 4–6); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-typographic_dominance", "text": "typographic dominance: typical 3 (range 2–4); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-surface_depth", "text": "surface depth: typical 2 (range 1–3); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-tonal_contrast", "text": "tonal contrast: typical 3 (range 2–4); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-historical_distance", "text": "historical distance: typical 0 (range 0–1); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-tonal_key", "text": "tonal key: typical 2 (range 1–3); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dimension-palette_temperature", "text": "palette temperature: typical 0 (range -2–2); editorial_seed, n = 0", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "gestalt.hierarchy", "text": "one saturated accent reserved almost exclusively for the primary action", "role": "diagnostic", "area": "hierarchy", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "kcc:motion-1", "text": "Atlassian's design system asks core components to use motion for clarity, while branded experiences can use richer, more expressive motion.", "role": "rule", "area": "motion", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S1" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Atlassian Design System" }, "derives_from": [], "ruling": null }, { "id": "kcc:motion-2", "text": "Transitions and animations are near-universal on the web (85% and 77% of mobile pages in 2022), so their presence does not identify this register.", "role": "diagnostic", "area": "motion", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S10" ], "against": [], "contested": false }, "label": { "kind": "documented", "mark": "attached", "text": "Documented · Source attached" }, "scope": { "practice": "all web pages, HTTP Archive 2022; not a SaaS sample" }, "derives_from": [], "ruling": null }, { "id": "kcc:motion-3", "text": "Tailwind's default transition duration is 150 ms; treating that value as a toolchain default rather than a stylistic choice is Aesthetary's reading.", "role": "context", "area": "motion", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S9" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Tailwind CSS" }, "derives_from": [], "ruling": null }, { "id": "kcc:motion-4", "text": "Reduced-motion handling is common: prefers-reduced-motion appears on about a third of pages.", "role": "context", "area": "motion", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S10" ], "against": [], "contested": false }, "label": { "kind": "documented", "mark": "attached", "text": "Documented · Source attached" }, "scope": { "practice": "all web pages, 2022" }, "derives_from": [], "ruling": null }, { "id": "kcc:density-1", "text": "GitHub's Primer aims for a fast, compact product experience, and a draft Primer guideline outline pairs density on product with spaciousness on marketing pages.", "role": "rule", "area": "density", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S8", "kcc-modern-saas-S7" ], "against": [], "contested": false }, "label": { "kind": "documented", "mark": "attached", "text": "Documented · Source attached" }, "scope": { "practice": "GitHub. S8 is a proposed guideline outline, not a published rule." }, "derives_from": [], "ruling": null }, { "id": "kcc:density-2", "text": "Spacing comes from a scale on a fixed base unit (8 px at Atlassian), with smaller steps reserved for compact UI.", "role": "rule", "area": "density", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S2", "kcc-modern-saas-S14" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "design-system and toolchain documentation" }, "derives_from": [], "ruling": null }, { "id": "kcc:hierarchy-1", "text": "One primary call to action per page or area marks the most important action.", "role": "rule", "area": "hierarchy", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S4" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Atlassian product guidance" }, "derives_from": [], "ruling": null }, { "id": "kcc:hierarchy-2", "text": "Raised elevation used for emphasis is limited to one section or focal point.", "role": "rule", "area": "hierarchy", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S3" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Atlassian" }, "derives_from": [], "ruling": null }, { "id": "kcc:scope", "text": "The marketing-site presentation of contemporary business-software vendors. GitHub keeps a separate Primer Brand system for marketing sites and aims for compact product UI, and a draft Primer guideline pairs density on product with spaciousness on marketing; Atlassian keeps separate brand guidance for marketing. The record is therefore scoped to marketing pages; product and dashboard UI are outside it until studied. The name and the grouping into one register are Aesthetary's construction, not an attested movement.", "role": "boundary", "area": null, "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-modern-saas-S6", "kcc-modern-saas-S7", "kcc-modern-saas-S8", "kcc-modern-saas-S5" ], "against": [], "contested": false }, "label": { "kind": "documented", "mark": "attached", "text": "Documented · Source attached" }, "derives_from": [], "ruling": null } ], "web_translations": [], "standard_practice": [ { "id": "secondary-text-contrast", "text": "Secondary text must still meet 4.5:1. The characteristic grey-on-white secondary text is the register's most common accessibility failure.", "label": { "kind": "not_part", "text": "Not part of the aesthetic" }, "ruling": "D0-3 C4 g1rule" }, { "id": "gradient-not-contrast-source", "text": "Aurora field is background only and may never be the contrast source for text.", "label": { "kind": "not_part", "text": "Not part of the aesthetic" }, "ruling": "D0-3 C4 g1rule" }, { "id": "target-size", "text": "Interactive targets at least 24 by 24 CSS px.", "label": { "kind": "not_part", "text": "Not part of the aesthetic" }, "ruling": "D0-3 C4 g1rule" } ], "sources": [ { "id": "4KSFVKJGJDDG4KVR0FJTRY25NP", "kind": "source", "title": "Linear – The system for product development", "url": "https://linear.app", "status": "verified", "retrieval": "retrieved" }, { "id": "3FH0D73VESE4JE6F1NVTY1PTN6", "kind": "work", "title": "Linear marketing site", "url": "https://linear.app", "status": "verified", "retrieval": "unknown" }, { "id": "4GQWG89XNBQ02PTD62S5DYSPP6", "kind": "source", "title": "Stripe | Financial Infrastructure to Grow Your Revenue", "url": "https://stripe.com", "status": "verified", "retrieval": "retrieved" }, { "id": "6VVRVE1RBTM8JQ4AFAHM6R8D74", "kind": "work", "title": "Stripe marketing site", "url": "https://stripe.com", "status": "verified", "retrieval": "unknown" }, { "id": "666AE1R6039R1J0BR6FA5JAPQM", "kind": "source", "title": "Collaboration software for software, IT and business teams | Atlassian", "url": "https://www.atlassian.com", "status": "verified", "retrieval": "retrieved" }, { "id": "5Q40TW1777GHF04JVAJ7Y7YAS8", "kind": "work", "title": "Atlassian marketing site", "url": "https://www.atlassian.com", "status": "verified", "retrieval": "unknown" }, { "id": "3FN7BAE7FX7SK7DFHCPA5VTEKS", "kind": "source", "title": "border-radius — Tailwind CSS", "url": "https://tailwindcss.com/docs/border-radius", "status": "verified", "retrieval": "retrieved" }, { "id": "7485E75JAH4VME485Y8R1KKJRA", "kind": "source", "title": "Theming — shadcn/ui", "url": "https://ui.shadcn.com/docs/theming", "status": "verified", "retrieval": "retrieved" }, { "id": "29PXH6MZKY3F3BVBRPN46FVZBP", "kind": "source", "title": "Email & SMS Marketing Platform | Mailchimp", "url": "https://mailchimp.com", "status": "verified", "retrieval": "retrieved" }, { "id": "1N8TEJWW8S9C53XV002Z8SN8ES", "kind": "work", "title": "Mailchimp marketing site", "url": "https://mailchimp.com", "status": "verified", "retrieval": "unknown" }, { "id": "5SNPCPVPMNKVNGVNWEH55KZHBN", "kind": "source", "title": "Supabase | The Postgres Development Platform", "url": "https://supabase.com", "status": "verified", "retrieval": "retrieved" }, { "id": "0QZ974AVTV8FGQZTVFGGHZSTCK", "kind": "work", "title": "Supabase marketing site", "url": "https://supabase.com", "status": "verified", "retrieval": "unknown" }, { "id": "factory-v1:modern-saas:S3", "kind": "source", "title": "Theme variables — Core concepts — Tailwind CSS", "url": "https://tailwindcss.com/docs/theme", "status": "verified", "retrieval": "retrieved" }, { "id": "factory-v1:modern-saas:S5", "kind": "source", "title": "Overview — Elevation — Atlassian Design", "url": "https://atlassian.design/foundations/elevation", "status": "verified", "retrieval": "retrieved" }, { "id": "factory-v1:modern-saas:S6", "kind": "source", "title": "Overview — Spacing — Atlassian Design", "url": "https://atlassian.design/foundations/spacing", "status": "verified", "retrieval": "retrieved" }, { "id": "held:modern-saas:50b2c21bb9", "kind": "source", "title": "V2.1 migration delta, A3_formation_origin_seed and A1_form_module_or_depth_policy", "url": null, "status": "metadata_missing", "retrieval": "unknown" }, { "id": "kcc-modern-saas-S1", "kind": "source", "title": "Overview — Motion — Atlassian Design", "url": "https://atlassian.design/foundations/motion", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S10", "kind": "source", "title": "CSS | 2022 | The Web Almanac by HTTP Archive", "url": "https://almanac.httparchive.org/en/2022/css", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S14", "kind": "source", "title": "Theme variables — Tailwind CSS", "url": "https://tailwindcss.com/docs/theme", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S2", "kind": "source", "title": "Overview — Spacing — Atlassian Design", "url": "https://atlassian.design/foundations/spacing", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S3", "kind": "source", "title": "Overview — Elevation — Atlassian Design", "url": "https://atlassian.design/foundations/elevation", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S4", "kind": "source", "title": "Button — Usage — Atlassian Design", "url": "https://atlassian.design/components/button/usage", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S5", "kind": "source", "title": "Overview — Voice tone — Atlassian Design", "url": "https://atlassian.design/foundations/content/voice-tone", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S6", "kind": "source", "title": "Primer Brand", "url": "https://primer.style/brand/", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S7", "kind": "source", "title": "Getting started — Primer Product UI", "url": "https://primer.style/product/getting-started/", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S8", "kind": "source", "title": "Interface Guidelines: proposed IA (primer/design docs/content.md)", "url": "https://github.com/primer/design/blob/main/docs/content.md", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-modern-saas-S9", "kind": "source", "title": "transition-property — Tailwind CSS", "url": "https://tailwindcss.com/docs/transition-property", "status": "verified", "retrieval": "retrieved" } ], "relations": [ { "slug": "flat-design", "kind": "confused_with", "status": "proposed" }, { "slug": "utilitarian", "kind": "confused_with", "status": "proposed" }, { "slug": "glassmorphism", "kind": "confused_with", "status": "proposed" }, { "slug": "bento-grid", "kind": "uses_module", "status": "confirmed" }, { "slug": "aurora-gradient-mesh", "kind": "uses_module", "status": "confirmed" }, { "slug": "soft-elevation", "kind": "uses_module", "status": "confirmed" } ], "open": [ { "kind": "open_question", "question": "[architecture_question] A convention with no authorship, no manifesto and no originator. Passes Gate 3 comfortably; Gate 1 attestation is thin. Is a market convention canonical?" }, { "kind": "open_question", "question": "[research_question] THE LARGEST REMAINING DEBT ON THIS RECORD, and it is CONTENT debt, not architecture. Five causes are in play and the record distinguishes them only in prose: intentional aesthetic convention, toolchain and component-library default, conversion practice, accessibility requirement, and imitation of a small set of high-status companies. The basis vocabulary already routes accessibility and our own guesses correctly. It does NOT separate \"designers chose this\" from \"the framework shipped it\". The ontology pass considered a claim_kind axis alongside basis and rejected it as maximum taxonomy rather than minimum architecture. Revisit only if a claim cannot be stated truthfully without it." }, { "kind": "open_question", "question": "[research_question] THE EIGHT-SITE SAMPLE IS A FALSIFICATION SAMPLE AND MUST NOT BE CITED AS PREVALENCE. It refutes universals and establishes nothing about how common anything is. The reconnaissance proposed a stratified N=300 study with gallery sampling explicitly banned; that study was NOT run. Until it is, no rule in this record may say \"most SaaS sites\" and none does. HTTP Archive is the only population-scale instrument identified, and its 2022 CSS chapter contains no radius distribution and no font ranking." }, { "kind": "open_question", "question": "[research_question] UNTESTED REQUIREMENT. All eight measurements are of MARKETING pages. Whether product/dashboard UI shares the same conventions was not examined, and the reconnaissance argues strongly that it does not — density, chrome and colour-as-status differ. The record therefore describes a marketing surface while being named for a product category. Measuring a dashboard sample is the next cheap piece of evidence work available." }, { "kind": "open_question", "question": "[research_question] V2.6 EXISTS BECAUSE OF THIS RECORD AND THIS RECORD CANNOT YET USE IT. No source opened in this project establishes a start, an end or a window for any Modern SaaS claim. The eight-site measurement is a single 2026-09-20 snapshot: it dates the EVIDENCE, not the claim. Every rule is therefore UNDATED, which means nobody has dated it — not that it is timeless. The entity carries Periods (origin circa 2014, currency live) and NO CLAIM MAY INHERIT IT. Longitudinal Wayback work is what would change this." }, { "kind": "open_question", "question": "[research_question] CARRIED FROM THE ONTOLOGY PASS, NOT REOPENED HERE. The record stays a visual_language with origin_kind market_convention and attestation constructed. Whether a coherent visual language exists here is a DIFFERENT QUESTION from whether the record can be stated truthfully, and this ingestion answers only the second. After adjudication the record asserts zero canonical constraints, which is the strongest available signal that the first question is still open. Do not treat the successful ingestion as having settled it." }, { "kind": "open_question", "question": "Module gap: A ui_treatment module for low-opacity, large-radius, short-offset shadow used to lift cards a single step off the ground." }, { "kind": "missing_research", "question": "Does a characteristic accent hue or motion exist on SaaS marketing pages?" }, { "kind": "missing_research", "question": "Do product and dashboard UIs share the marketing conventions (review-queue-140)?" }, { "kind": "missing_research", "question": "Dating of claims (review-queue-141)" } ], "aesthetary_build": { "note": "Values Aesthetary built with. Not claims about the Aesthetic.", "measured": { "note": "Read from the page's own stylesheet at build time. Values Aesthetary built with, not claims about the Aesthetic.", "slug": "modern-saas", "stylesheet": "modern-saas.css", "bytes": 16219, "colours": [ "#5B6270", "#F7F7F8", "#0F1115", "#F5A524", "#C9CCD3", "#FFFFFF", "#E6E7EB", "#1A1204", "#E8981A", "#D5D7DD", "#FCFCFD", "#FFF4DF", "#F2D29A", "#3A3F4A" ], "radii": [ "4px", "6px", "10px", "50%", "999px" ], "fontSizes": [ "12px", "13px", "14px", "15px", "16px", "19px", "22px", "88px" ], "faces": [ "GeistX", "GeistMonoX" ], "tokens": [ { "name": "--sa-bg", "value": "#FFFFFF" }, { "name": "--sa-bg2", "value": "#F7F7F8" }, { "name": "--sa-ink", "value": "#0F1115" }, { "name": "--sa-muted", "value": "#5B6270" }, { "name": "--sa-line", "value": "#E6E7EB" }, { "name": "--sa-acc", "value": "#F5A524" }, { "name": "--sa-acc-ink", "value": "#1A1204" }, { "name": "--sa-r", "value": "10px" }, { "name": "--sa-el", "value": "0 8px 24px -6px rgba(15, 17, 21, 0.10), 0 2px 4px rgba(15, 17, 21, 0.04)" }, { "name": "--sa-sans", "value": "\"GeistX\", system-ui, -apple-system, \"Segoe UI\", sans-serif" }, { "name": "--sa-mono", "value": "\"GeistMonoX\", ui-monospace, Menlo, monospace" }, { "name": "--p", "value": "hover, .sa-rec .sa-btn--p:hover { background: #E8981A" }, { "name": "--s", "value": "hover { background: var(--sa-bg2)" }, { "name": "--d", "value": "hover { border-color: #FFFFFF" } ], "animates": false, "absent": [ "no gradient anywhere", "no text-shadow anywhere", "nothing animates" ] }, "design_grammar": { "note": "Aesthetary's translation of this record into web primitives. Every value carries a basis: \"record\" is a rule the record holds (cites names it), \"translation\" is our choice derived from the cited rules (because says how), \"not_recorded\" means the record is silent (guidance says what to do). A \"record\" value restates a claim the record holds; its standing is that claim's own kind in the record (a requirement, period practice, modern practice, or our interpretation), which the cited rule states. \"record\" does not by itself make a value a property of the language.", "slug": "modern-saas", "version": "2026-09-29", "summary": "A starting grammar for a Modern SaaS marketing page: a neutral ground, one saturated accent kept for the primary action, sans-serif in two weights, one radius, one elevation step, an 8px rhythm, and a hero that shows the product. None of it is required; all of it is recognisable.", "color": { "roles": [ { "role": "ground", "value": "#FFFFFF", "use": "The page: near-white, the most common case.", "basis": "record", "cites": [ "token_rule:ground-light-default" ] }, { "role": "band", "value": "#F7F7F8", "use": "Alternate sections.", "basis": "translation", "cites": [ "token_rule:ground-light-default" ] }, { "role": "ink", "value": "#0F1115", "contrast": "18.9:1", "use": "Headings and body.", "basis": "translation", "cites": [ "token_rule:ground-light-default" ] }, { "role": "muted", "value": "#5B6270", "contrast": "6.1:1", "use": "Secondary text, never below 4.5:1.", "basis": "translation", "cites": [ "token_rule:secondary-text-contrast" ] }, { "role": "line", "value": "#E6E7EB", "use": "Hairlines on cards and dividers.", "basis": "translation", "cites": [ "token_rule:one-elevation-step" ] }, { "role": "accent", "value": "#F5A524", "contrast": "9.1:1 (near-black on it)", "use": "The primary action, and nothing else.", "basis": "translation", "cites": [ "token_rule:single-accent" ] }, { "role": "accent-ink", "value": "#1A1204", "use": "Text on the accent.", "basis": "translation", "cites": [ "token_rule:single-accent" ] } ], "alternates": [ { "label": "dark-first", "recorded": "the register also occurs dark-first", "value": "#0F1115", "basis": "record", "cites": [ "token_rule:ground-light-default" ] } ], "rules": [ { "rule": "One saturated accent, reserved for the primary action. No hue is characteristic: choose freely.", "basis": "record", "cites": [ "token_rule:single-accent" ] }, { "rule": "Most often a near-white ground; dark-first also occurs, and neither is required.", "basis": "record", "cites": [ "token_rule:ground-light-default" ] }, { "rule": "Secondary text must still meet 4.5:1.", "basis": "record", "cites": [ "token_rule:secondary-text-contrast" ] }, { "rule": "A gradient field is background only and never the contrast source for text.", "basis": "record", "cites": [ "token_rule:gradient-not-contrast-source" ] }, { "rule": "Use amber as the accent.", "basis": "translation", "cites": [ "token_rule:single-accent" ], "because": "The hue is free; this page’s amber was chosen against the falsified indigo and against Aesthetary’s own violet." } ] }, "typography": { "family": { "stack": "\"Geist\", system-ui, -apple-system, \"Segoe UI\", sans-serif", "class": "a neutral grotesque sans" }, "roles": [ { "role": "display", "size": "clamp(2.75rem, 7vw, 4.75rem)", "weight": 600, "lineHeight": "1.02", "case": null, "tracking": "-0.03em", "measure": "14ch", "use": "The hero headline." }, { "role": "heading", "size": "2rem", "weight": 600, "lineHeight": "1.15", "case": null, "tracking": "-0.02em", "measure": null, "use": "Section heads." }, { "role": "body", "size": "1.0625rem", "weight": 400, "lineHeight": "1.6", "case": null, "tracking": null, "measure": "70ch", "use": "Reading text." } ], "rules": [ { "rule": "Sans-serif throughout, two weights, tight tracking on display sizes.", "basis": "record", "cites": [ "token_rule:sans-serif" ] }, { "rule": "Set it in Geist at 400 and 600.", "basis": "translation", "cites": [ "token_rule:sans-serif" ], "because": "Sans-serif identifies nothing on its own; the measured sites mostly use their own faces, so the face is ours to choose." } ] }, "gridLayout": { "summary": "A centred 1140px column on an 8px base unit, with generous section spacing: marketing pages are the spacious half of the pair.", "columns": [ { "width": "1024px and up", "columns": 12 }, { "width": "640–1023px", "columns": 6 }, { "width": "under 640px", "columns": 1 } ], "module": "8px", "gutter": "24px", "margin": "24px", "tokens": { "container": "1140px", "section": "88px" }, "rules": [ { "rule": "Section rhythm from a consistent base unit, commonly 4 or 8 px.", "basis": "record", "cites": [ "token_rule:spacing-base-unit" ] }, { "rule": "Spacing comes from a scale on a fixed base unit (8 px at Atlassian), smaller steps kept for compact UI.", "basis": "record", "cites": [ "claim:kcc:density-2" ] }, { "rule": "Density belongs to product; marketing pages are the spacious ones.", "basis": "record", "cites": [ "claim:kcc:density-1" ] }, { "rule": "Centre a 1140px container and space sections 88px apart.", "basis": "translation", "cites": [ "token_rule:spacing-base-unit", "claim:kcc:density-1" ], "because": "Both are multiples of the 8px unit; the large section step is the marketing side of the density pair." } ] }, "shapeGeometry": { "tokens": { "radius": "10px", "elevation": "0 8px 24px -6px rgba(15,17,21,.10), 0 2px 4px rgba(15,17,21,.04)" }, "rules": [ { "rule": "One consistent corner radius across components; no magnitude is characteristic.", "basis": "record", "cites": [ "token_rule:radius-consistent" ] }, { "rule": "Exactly one elevation step.", "basis": "record", "cites": [ "token_rule:one-elevation-step" ] }, { "rule": "Use 10px.", "basis": "translation", "cites": [ "token_rule:radius-consistent" ], "because": "Any single radius satisfies the rule; 10px is the room’s." } ] }, "imagery": { "rules": [ { "rule": "Put the product interface in the hero, not photography or illustration.", "basis": "record", "cites": [ "token_rule:product-screenshot-hero" ] }, { "rule": "Show your own product as it is, and put only real customers in a logo bar.", "basis": "translation", "cites": [ "gestalt", "token_rule:product-screenshot-hero" ], "because": "The screenshot and the logo bar are proof devices; a staged interface or an invented logo is a false claim, not a style." }, { "rule": "The sources do not specify illustration or photography outside the hero.", "basis": "not_recorded", "cites": [], "guidance": "Use them only if the product needs them; do not treat them as part of the register.", "silence": "source" } ] }, "components": { "button": { "name": "Button", "becomes": "One filled button in the accent for the primary action; every other action is a quiet outline.", "anatomy": [ "accent fill, 10px radius", "label in Geist 500", "secondary: white fill, 1px line" ], "tokens": { "fill": "#F5A524", "label": "#1A1204", "radius": "10px", "min-height": "44px", "transition": "background-color 150ms" }, "states": { "default": "Amber fill, near-black label (9.1:1).", "hover": "A darker amber, #E8981A.", "focus": "2px ink outline, 3px offset.", "active": "The hover amber.", "disabled": "Grey fill #F7F7F8, muted label, and “unavailable” in the accessible name." }, "accessibility": [ "The accent is a fill under dark text, never text on white.", "Targets clear 24 by 24 px; these are 44 high." ], "values": [ { "rule": "Reserve the one saturated accent for the primary action.", "basis": "record", "cites": [ "token_rule:single-accent" ] }, { "rule": "One primary call to action per page or area.", "basis": "record", "cites": [ "claim:kcc:hierarchy-1" ] }, { "rule": "Interactive targets at least 24 by 24 CSS px.", "basis": "record", "cites": [ "token_rule:target-size" ] }, { "rule": "Set every other action as a white outline button.", "basis": "translation", "cites": [ "token_rule:single-accent", "claim:kcc:hierarchy-1" ], "because": "With the accent reserved, a secondary action needs a shape that is clearly a button and clearly not the primary one." } ] }, "card": { "name": "Card", "becomes": "A white panel on the one radius, under the one elevation step.", "anatomy": [ "white fill, 1px hairline", "10px radius", "one soft shadow", "heading, text" ], "tokens": { "fill": "#FFFFFF", "line": "1px solid #E6E7EB", "radius": "10px", "shadow": "0 8px 24px -6px rgba(15,17,21,.10), 0 2px 4px rgba(15,17,21,.04)", "padding": "24px" }, "states": { "default": "Raised one step.", "hover": "Nothing moves.", "focus": "2px ink outline on the link inside." }, "accessibility": [ "The hairline keeps the edge visible where the shadow is too faint to see." ], "values": [ { "rule": "One consistent corner radius across components.", "basis": "record", "cites": [ "token_rule:radius-consistent" ] }, { "rule": "Exactly one elevation step: large blur, low opacity, small downward offset.", "basis": "record", "cites": [ "token_rule:one-elevation-step" ] }, { "rule": "Raised elevation used for emphasis is limited to one section or focal point.", "basis": "record", "cites": [ "claim:kcc:hierarchy-2" ] } ] }, "input": { "name": "Input", "becomes": "A white field with a hairline, on the same radius, label above.", "anatomy": [ "label above, Geist 500", "white fill, 1px muted #5B6270 line", "10px radius" ], "tokens": { "fill": "#FFFFFF", "line": "1px solid #5B6270", "radius": "10px", "height": "44px" }, "states": { "default": "Hairline.", "focus": "2px ink outline.", "error": "A sentence under the field in ink, prefixed “Error:”, and aria-invalid.", "disabled": "#F7F7F8 fill." }, "accessibility": [ "A visible label on every field.", "Placeholder text is never the label, and meets 4.5:1 if used." ], "values": [ { "rule": "One consistent corner radius across components.", "basis": "record", "cites": [ "token_rule:radius-consistent" ] }, { "rule": "Secondary text must still meet 4.5:1.", "basis": "record", "cites": [ "token_rule:secondary-text-contrast" ] }, { "rule": "Keep the field’s line darker than the card hairline.", "basis": "translation", "cites": [ "token_rule:secondary-text-contrast", "token_rule:radius-consistent" ], "because": "A field has to be found without a shadow: the muted grey line is 6.1:1 on white, where the card hairline is too faint for a control." } ] }, "navigation": { "name": "Navigation", "becomes": "A white top bar: wordmark left, a few text links, one accent button right.", "anatomy": [ "wordmark", "text links in muted grey", "one primary button" ], "tokens": { "height": "64px", "link": "#5B6270", "current": "#0F1115", "button": "#F5A524" }, "states": { "default": "Muted links.", "hover": "Links darken to ink.", "focus": "2px ink outline.", "current": "Ink, weight 500, and aria-current." }, "accessibility": [ "Muted links on white are 6.1:1.", "aria-current on the current page, not colour alone." ], "values": [ { "rule": "One primary call to action per page or area.", "basis": "record", "cites": [ "claim:kcc:hierarchy-1" ] }, { "rule": "Put the area’s one accent button at the right of the bar.", "basis": "translation", "cites": [ "token_rule:single-accent", "claim:kcc:hierarchy-1" ], "because": "The bar is an area; its primary action takes the accent and nothing else in it does." } ] } }, "motion": { "spec": { "durations": { "state": "150ms" }, "easing": { "state": "ease" }, "transforms": "none", "entrance": "none", "hover": "Colour only, 150ms.", "reducedMotion": "The colour changes instantly." }, "rules": [ { "rule": "Motion identifies nothing: transitions and animations are near-universal on the web.", "basis": "record", "cites": [ "claim:kcc:motion-2" ] }, { "rule": "Use motion for clarity in core components; branded experiences may be richer.", "basis": "record", "cites": [ "claim:kcc:motion-1" ] }, { "rule": "150 ms is Tailwind’s default transition, a toolchain default rather than a stylistic choice.", "basis": "record", "cites": [ "claim:kcc:motion-3" ] }, { "rule": "Handle prefers-reduced-motion; about a third of pages do.", "basis": "record", "cites": [ "claim:kcc:motion-4" ] }, { "rule": "Scroll reveals and entrance animation are left open by the record.", "basis": "not_recorded", "cites": [ "slot_posture:motion" ], "guidance": "Add none by default; left open is not permission.", "silence": "source" } ] }, "dimensions": [ { "key": "scope", "label": "Marketing, not product", "summary": "Vendors design the two apart. This grammar is for the marketing page; the dashboard behind the login is outside it until studied.", "values": [ { "rule": "The record covers the marketing-site presentation of business-software vendors; product and dashboard UI are outside it.", "basis": "record", "cites": [ "claim:kcc:scope" ] }, { "rule": "Product pages aim for compact density; marketing pages for spaciousness.", "basis": "record", "cites": [ "claim:kcc:density-1" ] } ] } ], "notRecorded": [ { "category": "components", "what": "Product and dashboard components", "why": "Outside the record’s scope until studied." }, { "category": "motion", "what": "Scroll and entrance motion", "why": "Left open on the record." }, { "category": "imagery", "what": "Illustration and photography outside the hero", "why": "Not specified by the source." } ], "silence": { "color": "source", "typography": "source", "gridLayout": "source", "shapeGeometry": "source", "imagery": "source", "components": "source", "motion": "source" }, "uiNote": "The record sets interface conventions for Modern SaaS. These four components are contemporary builds on them, not historical artefacts." } } }