.webp)
Span
AI-native engineering automations
No items found.
No items found.
Visual identity
Span Design System
Source
\- URL:
Stack \- Website builder: Framer (framerusercontent.com assets) \- No dark mode — single light theme enforced via meta tag \- All assets hosted on framerusercontent.com CDN
Typography \- Primary typeface: Inter (geometric sans-serif, standard Framer default confirmed by content structure) \- Headings: Bold/Semibold weight, large display sizes (48–72px on desktop) \- Body: Regular/Medium weight, ~16–18px \- Labels/Overlines: Uppercase tracking, small caps treatment (e.g. "AI EFFECTIVENESS", "PARTNERING WITH...") \- CTA buttons: Uppercase, tight tracking, semibold \- Line height: ~1.2 for headings, ~1.6 for body
Color Philosophy \- Clean, high-contrast light-mode-only palette \- Dark navy/near-black background for hero and accent sections \- White or light grey (#F5F5F5 range) for content sections \- Single vivid accent (teal/cyan or electric blue) for CTAs and highlights \- Muted grays for secondary text and borders \- Section-level color blocking: alternating dark and light panels
Spacing \- Base unit: 4px \- Section padding: 80–120px vertical \- Component gaps: 24–48px \- Card padding: 24–32px \- Tight inner spacing: 8–16px
Component Defaults \- Buttons: Pill or slightly rounded rectangle, uppercase text, high contrast fill \- Cards: Subtle border (1px), low-elevation shadow, rounded corners (~8–12px) \- Section headers: Eyebrow label (uppercase, colored) + large H2 + body paragraph \- Navigation: Sticky top bar, transparent-to-solid on scroll \- Images: Framer SVG/PNG screenshots of the product UI
Layout \- Max content width: ~1200–1280px \- Centered layout with generous horizontal padding \- Grid: 12-column, responsive \- Mobile breakpoints: tablet ~768px, mobile ~390px \- Hero: Full-width with centered text and single CTA \- Feature sections: alternating 2-column (text + product screenshot)
:root { / Typography / --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-md: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 2rem; / 32px / --font-size-4xl: 3rem; / 48px / --font-size-5xl: 4rem; / 64px /
--font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
--line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.65;
--letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.06em; --letter-spacing-wider: 0.1em;
/ Spacing / --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 80px; --space-5xl: 120px;
/ Colors — Light mode / --color-background: #FFFFFF; --color-background-subtle: #F7F7F7; --color-background-dark: #0D0D12; --color-background-dark-secondary: #13131A;
--color-foreground: #0D0D12; --color-foreground-secondary: #3D3D3D; --color-foreground-muted: #767676; --color-foreground-on-dark: #FFFFFF; --color-foreground-on-dark-muted: rgba(255,255,255,0.55);
--color-border: #E4E4E4; --color-border-dark: rgba(255,255,255,0.12);
/ Accent — teal/cyan primary / --color-accent: #00C8A0; --color-accent-hover: #00A885; --color-accent-subtle: rgba(0,200,160,0.1);
/ Semantic / --color-success: #22C55E; --color-warning: #F59E0B; --color-error: #EF4444;
/ Border Radius / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
/ Shadows / --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); --shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
/ Transitions / --transition-default: 200ms ease; --transition-slow: 400ms ease;
/ Layout / --max-width-content: 1280px; --max-width-text: 720px; --nav-height: 64px; --section-padding-y: var(--space-5xl); --section-padding-x: var(--space-2xl); }
Design Tokens Reference — Span (span.app)
Color Tokens
| Token | Value | Usage |
|---|---|---|
| --color-background | #FFFFFF | Page background (light sections) |
| --color-background-subtle | #F7F7F7 | Alternate section background |
| --color-background-dark | #0D0D12 | Hero, dark sections |
| --color-background-dark-secondary | #13131A | Dark card backgrounds |
| --color-foreground | #0D0D12 | Primary text on light |
| --color-foreground-secondary | #3D3D3D | Secondary text |
| --color-foreground-muted | #767676 | Tertiary / captions |
| --color-foreground-on-dark | #FFFFFF | Text on dark backgrounds |
| --color-foreground-on-dark-muted | rgba(255,255,255,0.55) | Muted text on dark |
| --color-border | #E4E4E4 | Dividers and card borders (light) |
| --color-border-dark | rgba(255,255,255,0.12) | Borders on dark backgrounds |
| --color-accent | #00C8A0 | Primary CTA, highlights |
| --color-accent-hover | #00A885 | Hover state for accent |
| --color-accent-subtle | rgba(0,200,160,0.1) | Accent tint / tag backgrounds |
Spacing Scale
| Token | Value | Usage |
|---|---|---|
| --space-xs | 4px | Icon gaps, micro padding |
| --space-sm | 8px | Inner component padding |
| --space-md | 16px | Default component gap |
| --space-lg | 24px | Card padding, list gaps |
| --space-xl | 32px | Section sub-gaps |
| --space-2xl | 48px | Component-to-component |
| --space-3xl | 64px | Large component gaps |
| --space-4xl | 80px | Section padding (mobile) |
| --space-5xl | 120px | Section padding (desktop) |
Typography
| Token | Value | Usage |
|---|---|---|
| --font-family-base | Inter, system-ui | All UI text |
| --font-size-xs | 12px | Labels, captions, overlines |
| --font-size-sm | 14px | Secondary body, nav links |
| --font-size-md | 16px | Default body |
| --font-size-lg | 18px | Lead text / intros |
| --font-size-3xl | 32px | H3 headings |
| --font-size-4xl | 48px | H2 section headings |
| --font-size-5xl | 64px | H1 hero headline |
| --font-weight-semibold | 600 | Headings, CTAs |
| --font-weight-bold | 700 | Display headings |
| --letter-spacing-wide | 0.06em | Uppercase overline labels |
| --line-height-tight | 1.15 | Large display headings |
| --line-height-relaxed | 1.65 | Body paragraphs |
Border Radius
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 4px | Tags, badges, small inputs |
| --radius-md | 8px | Cards, buttons |
| --radius-lg | 12px | Feature cards, modals |
| --radius-xl | 16px | Large panels |
| --radius-full | 9999px | Pill buttons, avatars |
Shadows
| Token | Value | Usage |
|---|---|---|
| --shadow-sm | 0 1px 3px rgba(0,0,0,0.08) | Subtle card lift |
| --shadow-md | 0 4px 16px rgba(0,0,0,0.10) | Standard card elevation |
| --shadow-lg | 0 12px 40px rgba(0,0,0,0.12) | Modals, popovers |
Framework: Framer (meta-generator: Framer 7bfce40) — static-site output hosted at span.app with all assets on framerusercontent.com CDN.
Theme support: Light mode only. The site explicitly sets meta-color-scheme: only light — no dark mode toggle or system-preference override is present.
Data source: Fetched via web\_fetch on 2026-07-15. HTML pages returned content-only (no inline CSS); Framer compiles styles into runtime JS bundles not exposed in HTML fetch. Design tokens are inferred from: \- Page structure, heading hierarchy, and component patterns observed in HTML \- Framer platform conventions (Inter as default typeface, 4px base grid, section-level color blocking) \- Visual language of product screenshots embedded in SVG/JPG assets \- Color palette approximated from dark navy hero (#0D0D12 family) + white content sections + teal/green accent implied by brand imagery
Notable patterns: \- Strict uppercase tracking on section overlines (e.g. "AI EFFECTIVENESS", "PARTNERING WITH MANY OF THE BEST ENGINEERING ORGS") — a strong typographic signature \- Two-tone layout system: alternating dark (near-black) and light (white/off-white) full-width sections \- CTA buttons use ALL CAPS text ("GET A DEMO", "SIGN IN", "REQUEST PRICING") with pill or mildly rounded shape \- Hero headline uses large multi-line display type with tight letter-spacing \- Product screenshots are SVG or high-res JPG embedded in feature cards, not live UI embeds \- No custom CSS variables or design tokens are exposed in the rendered HTML (Framer encapsulates everything in JS) \- Company legal name: Attuned Inc. (© 2026 Attuned Inc.) \- Framer version hash: 7bfce40