Standard — DASLint

Web Tiles vs Open Graph Protocol

The Open Graph Protocol (OGP) is the current industry standard for link previews. Web Tiles offer a fundamentally different model — interactive, verifiable micro-apps vs static image cards. Here's how they compare:

Aspect	Open Graph Protocol	Web Tiles (DASL)
Dimensions	1200×630px, 1.91:1 ratio — universal standard	No standard dimensions. Each tile defines its own sizing.
File Format	JPG or PNG only	Any web content (HTML/CSS/JS). No format constraints.
File Size	Under 1MB (ideally 200–500KB)	No size limits specified. Can bundle megabytes of resources.
Preview Image	One og:image — simple, universal	Icons/screenshots arrays optional. No standard "card image."
Response Time	<3 seconds expected	4–6 network hops to render. No latency guidance.
Authentication	Must be publicly crawlable. No verification.	Public via PDS. Content-addressed — cryptographically verified.
Fallback	Graceful — worst case, a plain link	Host page's OGP tags serve as fallback for legacy clients.

Where Web Tiles Excel

🎮 Interactive

Tiles run HTML/CSS/JS — forms, animations, games. OGP is a static image.

🔐 Verifiable

Content-addressed via CIDs. Tamper-proof, no CDN dependency. OGP images can change at any time.

🧩 Composable

Tiles can communicate with each other. Multiple tiles can be assembled into complex UIs.

🛡️ Privacy-First

No network access after load. No tracking pixels, no data exfiltration by design.

📐 Tile Interface Guidelines

Sizing

The DASL Tiles Lexicon defines an optional sizing object with width and height integers (pixels). No minimum, maximum, or aspect ratio is enforced by the spec.

Lexicon Definition

"sizing": {
  "type": "object",
  "properties": {
    "width":  { "type": "integer", "minimum": 1 },
    "height": { "type": "integer", "minimum": 1 }
  },
  "required": ["width", "height"]
}

Recommended Card Layout

For maximum compatibility with existing link preview infrastructure, TIG recommends tile devs to adopt the industry standard that emerged from platforms. The full tile card consists of two parts: the tile content (interactive viewport) and the tile info (name + description rendered by the consuming app).

630px

Tile Content Area
HTML / CSS / JS viewport

1200px

Tile Name

Tile description — one to two lines of text providing context about the tile content…

webtil.es

Tile Content Area (Interactive Viewport)

Width1200px

Height630px

Aspect Ratio1.91 : 1

Sizing Field{ "width": 1200, "height": 630 }

Safe Zone~80% center (avoid edges for key content)

Tile Info Area (Rendered by Consuming App)

Padding12px horizontal, 8px vertical

NameSemi-bold, 16px, max 3 lines, line-height 1.25

DescriptionRegular, 14px, max 2 lines (with image), line-height 1.25

Divider1px border separating description from URL

URL🌐 Globe icon + domain, 12px, 1 line, muted

Link BehaviorEntire info area is a clickable link to tile.url — display shows domain only

BackgroundSubtle card background (#f0f0f0 light / #1a1a1a dark)

Element Gap3px between text elements

Tile Record Metadata (Written by Publishing App)

tile.nameSame convention as og:title

tile.descriptionSame convention as og:description

tile.urlSame convention as og:url — consuming apps display domain only

tile.iconsArray of icon sources

tile.sizing{ "width": 1200, "height": 630 } for TIG compliance

tile.tigtrue — signals TIG card rendering support (see below)

tile.background_colorLight mode background color

tile.background_color_darkDark mode background color

Example — Wikipedia OGP equivalent

tile.name:        "Wikipedia, the free encyclopedia"
tile.description: "Wikipedia is a free online encyclopedia, created and
                   edited by volunteers around the world."
tile.url:         "https://www.wikipedia.org/"

These fields follow the same conventions as Open Graph Protocol metadata. Consuming apps render name and description in the info area below the tile content, with url displayed as domain-only.

Theme Awareness (Light/Dark Mode)

Primary mechanismprefers-color-scheme CSS media query inside tile HTML

Color scheme meta<meta name="color-scheme" content="light dark">

Record fieldsbackground_color (light) + background_color_dark (dark)

Client overrideRendering clients MAY set color-scheme: dark on the iframe to override OS preference

Tiles SHOULD support both light and dark variants via @media (prefers-color-scheme: dark). The light variant is the default. The tile's <meta name="color-scheme" content="light dark"> tag signals theme awareness to the browser. Rendering clients that use a manual theme toggle can set color-scheme on the iframe element to cascade into the tile's media query.

Dual-Mode Tiles: Custom Sizing + TIG Card Support

PurposeTiles with non-standard native sizing can opt in to TIG 1200×630 card rendering

SignalSet tile.tig: true in the tile record

Native sizingKeep tile.sizing at the tile's native dimensions (e.g. 1200×1200)

Consumer behaviorApps that display link card previews render the tile at 1200×630

Tile HTMLMust be responsive — adapt layout based on viewport height

Example — Custom widget that also supports TIG card preview

tile.sizing:      { "width": 1200, "height": 1200 }
tile.tig:         true
tile.name:        "My Bookshelf"
tile.description: "Books I've been reading lately."
tile.url:         "https://example.com/books"

Tile HTML uses CSS to adapt:
  @media (max-height: 700px) {
    /* Compact card layout for TIG consumers */
  }

Tiles with native sizing of 1200×630 are implicitly TIG-compliant — the tig field is not needed. For tiles with other dimensions (e.g. 1200×1200 widgets, portrait tiles, square profile cards), setting tig: true tells consuming apps that the tile HTML is designed to also render correctly at 1200×630. The publishing app (e.g. Linkname) renders the tile at its native size, while TIG-aware consumers (e.g. DASLint, feed readers, chat apps) render it as a standard link card preview.

Dark/Light Theme Awareness on the Web

Most modern websites implement dark and light themes using CSS custom properties (variables) toggled by a class or data attribute on the root element — for example, <html class="dark"> or <html data-theme="light">. The operating system's color preference is exposed to CSS via the prefers-color-scheme media query, part of the W3C's CSS Media Queries Level 5 specification. Pages declare their supported schemes with <meta name="color-scheme" content="light dark">, which tells the browser to adjust default UA styles (scrollbars, form controls, default backgrounds) accordingly.

For embedded content like Web Tiles rendered in iframes, theme inheritance is more complex. The CSS specification states that setting the color-scheme property on an iframe element should cascade into the embedded document's prefers-color-scheme evaluation. However, in practice this does not work reliably across all browsers — particularly in sandboxed srcdoc iframes where the document has an opaque origin. Rendering clients that implement a manual theme toggle should not rely solely on CSS property inheritance. Instead, the recommended approach is to rewrite the tile's HTML directly — either by replacing inline style values or by injecting unconditional dark/light CSS rules before setting srcdoc. Tiles that use @media (prefers-color-scheme: dark) will respond correctly to the user's OS-level preference without any client-side intervention.

Reference Implementation — Bluesky (social-app)

Image:       aspectRatio: 1200 / 630  (CARD_ASPECT_RATIO)
Title:       text_md (16px), font_semi_bold, numberOfLines: 3
Description: text_sm (14px), numberOfLines: 2 (with thumb)
Divider:     1px border between description and domain
Domain:      text_xs (12px), Globe icon + toNiceDomain(uri)
Padding:     px_md (12px) horizontal, pt_sm/pb_sm (8px) vertical
Gap:         3px between title/description

Full Card Summary

Total Width1200px (scales to container)

Total Height~730px (630 content + ~100 info)

Border Radius8–12px

Max File SizeUnder 1MB total resources (ideally 200–500KB)

Load TimeUnder 3 seconds to interactive

These dimensions follow the conventions established by Bluesky, Facebook, LinkedIn, Slack, and Discord for link preview cards. The tile content area maps directly to the OGP image dimensions (confirmed as CARD_ASPECT_RATIO = 1200/630 in Bluesky's open-source codebase). The info area follows the text rendering pattern used by Bluesky's ExternalEmbed component — the reference implementation for ATProto link cards.

Tile authors may use other dimensions for specific use cases (e.g. portrait tiles for games, square tiles for profile cards), but 1200×630 should be treated as the default when no specific layout is required.