This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Superlist’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Playful-but-refined consumer productivity. Near-black (#181824) and near-white (#f7f7ff) hold the structure while two committed brand hues — electric blue #0000ee and hot pink #f866db — carry all the personality as accents and type, never as floods. Display voice is Haffer XH SemiBold at heavy negative px tracking (-1.76px on hero), with a pixel/arcade face (Jersey 10) used sparingly as a wink. Geometry is pill-first: a dominant 20px radius and full 100px buttons make every surface soft and pressable. Elevation is friendly — soft 10-15px drop shadows lifted by an inset white top-highlight. Motion is one disciplined curve, cubic-bezier(0.44, 0, 0.56, 1) at 0.2s, applied everywhere. Joy held inside discipline.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (near-black #181824 / near-white #f7f7ff structure + committed brand accents electric blue #0000ee and hot pink #f866db used as type and highlights, never as large fills), typographic voice (Haffer XH SemiBold display with heavy negative px tracking, Inter for body, one playful pixel display face used sparingly), pill-first shape language (20px dominant radius, 100px full-round buttons), friendly elevation (soft 0 10px 15px rgba(0,0,0,0.08) drop shadow + inset white top-highlight rgba(255,255,255,0.45) 0 0.5px 0), and a single motion curve cubic-bezier(0.44, 0, 0.56, 1) at 0.2s across every page and component I ship. Treat this as my project's constitution — any new component should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Layout
Flow
Content width
Bounded
Framing
Layered
Grid strength
Soft
Structure-by-neutral, personality-by-saturation. Near-black #181824 and near-white #f7f7ff/#ffffff do ~95% of the surface work; the two brand-tier hues — electric blue #0000ee and hot pink #f866db — appear almost exclusively as accent type, links, and highlights at single-digit surface share. A secondary expressive set (teal #22c55e, yellow #fbe74e, red #ff4a36, periwinkle #7577e0) provides categorical pops for list/tag states. Cool slate #8e8da0 handles de-emphasized text.
Mode strategydual-paired
Black #000000 text (1620 measured occurrences) on near-white background — dominant reading layer
Near-white #f7f7ff / pure #ffffff (413+54 occurrences) — primary inverse text and light surface
Electric blue #0000ee (brand tier, 122 occurrences) — primary accent: links, focus, key emphasis. Surface share kept low
Hot pink #f866db (brand tier, 34 occurrences) — secondary accent for delight moments and highlights, never a fill
Body / UI family: Inter (self-hosted woff2, display:swap) at 14-18px. Also: Satoshi 500 for select UI labels, Inter for captions.
Playful accent face: Jersey 10 (pixel/arcade Google font) — used sparingly as a wink on a single hero word or playful marker, never for body or multiple headings. Fragment Mono available for code/tabular.
Display tracking in px, not em — and heavily negative: -1.76px on 88px hero (heading-1), -1.4px on 48-70px headings, -0.96px on 48px, -0.48px on 24px, -0.16px on 16px UI. Constant optical tightening at every display size.
Heading line-height runs tight on display: 83.6px on 88px hero (~0.95), 52.8px on 48px (1.1), 28.8px on 24px (1.2). Body Inter sits at 1.3-1.4 (18.2px on 14px, 21.6px on 18px).
Weight usage: Haffer SemiBold ~600 for headings and strong UI; Inter 400 for body, 500 for emphasis; Satoshi 500 for select labels. Don't introduce a third sans display family.
Body copy max ~45-60ch at 16-18px Inter; small print 12-14px with line-height 1.3.
Base rhythm leans on 10px and 20px (the two dominant gaps — 201 and 158 occurrences). Effective scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 23 / 25 px.
Primary gap/gutter values for flex layouts: 10 and 20px dominate; 8px for tight clusters; 2px for micro inline overlap; larger 30 / 60 / 64 / 70px for generous section-level breathing.
Card padding clusters around 16-25px (the 23 and 25px values are padding-specific). Always pick from the scale; no magic numbers.
Section vertical rhythm leans on the 30-70px tier for desktop air; mobile compresses toward the 16-25px band.
Surface styleLayered
Primary elevation is a soft drop shadow `rgba(0, 0, 0, 0.08) 0px 10px 15px 0px` — gentle, low-opacity, no harsh edge. This is the default card lift.
Pair the drop shadow with an inset white top-highlight `rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset` — the hairline that makes cards feel physically pressable, not flat.
On dark surfaces, lift uses an inset white highlight `rgba(255, 255, 255, 0.25) 0px -1px 1px 0px` for a subtle rim instead of a dark drop shadow.
Hairline structural borders use a 1px inset `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset` for low-contrast delimiting — never a heavy stroke.
Techniques
Tactile two-part card lift
Cards combine a soft drop shadow `box-shadow: rgba(0,0,0,0.08) 0 10px 15px` with an inset white top-highlight `rgba(255,255,255,0.45) 0 0.5px 0 inset`. The drop shadow detaches the card from the page; the inset highlight catches light on the top edge so it reads as a raised, pressable object. This is the signature 'friendly software' elevation.
Dark-section inverse rim
On #181824 inverse sections, swap the dark drop shadow for an inset white rim `rgba(255,255,255,0.25) 0 -1px 1px` plus the linear fade `linear-gradient(rgb(24,24,36) 0%, rgba(25,28,43,0) 100%)` to blend section edges without a hard seam.
Radius scale is small and rounded-biased: 2 / 4 / 8 / 10 / 20 / 100. The 20px radius dominates the surface (51 occurrences) — it is the default card/container radius.
Buttons and pills use full 100px `rounded-full` (5 occurrences) — the entire interactive language reads as soft capsules.
Cards default to 20px radius; inner controls and inputs step down to 8-10px; chips/tags 8px; tiny inline markers 2-4px.
Icons are stroke-based, friendly weight (1.5-2px); avoid harsh thin or heavy filled variants that would fight the soft geometry.
Tap targets minimum 44×44 on touch; full-pill buttons keep generous horizontal padding so the capsule never looks cramped.
Hovercolor shift (0.2s on cubic-bezier(0.44, 0, 0.56, 1)) — the dominant measured transition (28 occurrences), translateY lift on cards/buttons (0.2s on cubic-bezier(0.44, 0, 0.56, 1)) — pairs with the tactile shadow recipe, shadow deepen on hover (0.2s on cubic-bezier(0.44, 0, 0.56, 1)) — soft drop shadow grows to reinforce press affordance
Scroll patterns
Framer Motion whileInView opacity + translateY reveals at 0.2s on cubic-bezier(0.44, 0, 0.56, 1)
Stagger 40-80ms between grouped cards for a lively but controlled cascade
No parallax beyond a few percent translateY — keep depth playful, never theatrical
Single easing curve: cubic-bezier(0.44, 0, 0.56, 1) — a symmetric ease-in-out, the only measured timing function (28 occurrences). Use it everywhere.
Single duration tier: 0.2s — the only captured duration. Interactive transitions and reveals share it; do not invent slower/faster values without reason.
Framer Motion is the animation engine (evidence: window.MotionIsMounted). Use `motion.*` with whileInView for scroll reveals.
useReducedMotion mandatory — all animations collapse to opacity-only or disable.
transform (translateY) and opacity are the first-class animated properties — pair translateY lift with the shadow recipe for the tactile signature.
Spring animations forbidden unless explicitly modeling a bouncy delight moment — default to the deterministic cubic-bezier.
No loop animations except explicit loaders (a __framer-loading-spin spinner exists in the source).
Full-pill buttons (100px radius) for all primary/secondary actions — the capsule is the core interactive shape.
Cards lift on hover (translateY + shadow deepen) to telegraph pressability — the page rewards interaction with motion.
Tabs / segmented controls for switching list views or feature demos — not toggle switches.
Tooltips reveal on hover + focus with a short delay; dismiss instantly on blur.
Form validation inline below field on blur; submit disabled until valid.
Empty states lean on personality — a friendly one-line message + a full-pill primary action; the playful display face may appear here.
Loading states: skeleton shimmer for content; the Framer loading spinner for inline waits. No full-page overlays.
Approachdesktop-first
Desktop-first marketing surface bounded at 1500px, reflowing into the same playful language on mobile rather than a stripped alternate. The observed media-query system pivots around an 810px tablet boundary (max-width 809.98px for mobile, 810-1199 for tablet, 1400+ for wide). Color, shape, and motion stay constant across tiers; only column count and type scale compress.
Breakpoints: sm 640 / md 810 / lg 1024 / xl 1280 / 2xl 1536 — note the md tablet boundary sits at 810, not the generic 768.
Hide-on-mobile is discouraged — if a control exists on desktop it should reach mobile via reflow.
Tap target minimum 44×44 on touch; full-pill buttons keep generous padding so capsules stay finger-friendly.
Typography compresses proportionally: hero 88 → ~56 → ~40px, headings drop ~25% per tier while negative tracking eases (less negative at smaller sizes).
focus-visible: 2px ring or inset shadow in brand blue #0000ee (use #f866db on dark/blue surfaces for contrast). Mandatory on every interactive element.
All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
Color contrast: #000000 on #ffffff ≈ 21:1 (AAA); #f7f7ff on #181824 ≈ 16:1 (AAA). Brand blue #0000ee on white ≈ 8.6:1 (AAA) — safe for link text. Slate #8e8da0 on white ≈ 2.9:1 — use for large/de-emphasized text only, never small body.
Never signal list/tag state with the expressive color set alone — pair color pops with text or icon labels.
ARIA labels on icon-only buttons; aria-expanded on collapsibles; aria-live='polite' on toasts and status updates.
Motion respects prefers-reduced-motion — translateY/scroll reveals reduce to opacity-only or disable.
Tap targets minimum 44×44 on touch; 40×40 on pointer.
Form errors announced via aria-describedby on the associated input; never color-only signaling.
Framer MotionFramerNext/Image
Built on Framer (framerusercontent asset pipeline) with Framer Motion as the animation engine (evidence: window.MotionIsMounted). Animation profile is a single cubic-bezier(0.44, 0, 0.56, 1) at 0.2s across color/transform/opacity transitions. Images are PNG/SVG served via Framer's CDN with responsive srcset; the hero (2664×1538 source) is the LCP candidate. Icons stroke-based, friendly weight.
Framer Motion `motion.div` with `whileInView` + `viewport={{ once: true, margin: '-10%' }}` for scroll reveals
Transitions use `ease: [0.44, 0, 0.56, 1]` and `duration: 0.2` — constants only
useReducedMotion guard wraps every animation primitive — no exceptions
Next/Image (or a Framer-equivalent) with responsive `sizes`/`srcset`; `priority` only on the hero LCP image
Pair translateY hover lift with the two-part shadow recipe to reproduce the tactile card feel
No canvas, no WebGL, no Lottie — static-first, animated-discreet
Hold structure with #181824 / #f7f7ff neutrals and let brand blue #0000ee + pink #f866db arrive as accents and type — keep brand-hue surface share single-digit.
Default buttons and pills to full 100px radius; default cards/containers to 20px — pill-first geometry is the signature.
Use the two-part elevation: soft `rgba(0,0,0,0.08) 0 10px 15px` drop shadow + inset white top-highlight `rgba(255,255,255,0.45) 0 0.5px 0 inset` for tactile cards.
Set display headings in Haffer XH SemiBold with heavy negative px tracking (-1.76px hero, scaling down with size).
Use the playful display face (Jersey 10) sparingly — one word or marker, never body or multiple headings.
Animate translateY + opacity with the single cubic-bezier(0.44, 0, 0.56, 1) curve at 0.2s; pass every page through useReducedMotion.
Lean on 10px and 20px as the dominant spacing rhythm; bound full pages at 1500px.
Never flood large surfaces with the brand blue or pink — they are accents and type, not backgrounds. The neutrals carry the page.
Never over-use the novelty pixel display face — rarity is what keeps it 'rafine oyunbaz' instead of theme-park.
Never introduce a second easing curve or a divergent duration — the single 0.2s cubic-bezier(0.44, 0, 0.56, 1) is the motion fingerprint.
Never replace the soft drop-shadow-plus-inset-highlight elevation with hard borders or heavy shadows — the friendly lighting is the feel.
Never use slate #8e8da0 for small body text (contrast ≈ 2.9:1) — reserve it for large or de-emphasized labels.
Never abandon pill geometry on buttons — sharp or lightly-rounded buttons break the soft, pressable language.
Never signal categorical state with the expressive color set alone — always pair with a text or icon label.
Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
Spacing rhythm anchored on 10/20px; scale 2/4/6/8/10/12/14/16/18/20/23/25.
Container max 1500px — do not exceed (rails at 400 / 800 / 1500).
Type families: Haffer XH SemiBold (display) + Inter (body) + Jersey 10 (sparing playful accent); Satoshi/Fragment Mono optional. No third sans display family.
Brand-tier accents fixed: electric blue #0000ee + hot pink #f866db; neutrals #181824 / #f7f7ff / #000000 / #ffffff.
Motion: single duration 0.2s, single easing cubic-bezier(0.44, 0, 0.56, 1). No springs by default.
Brand-hue audit: #0000ee and #f866db appear only as type, links, accents, or highlights — never as a large background fill.
Radius grep: button/pill elements use 100px (rounded-full); cards/containers use 20px; no sharp 0px corners on interactive surfaces.
Shadow audit: card elevation uses the soft `rgba(0,0,0,0.08) 0 10px 15px` drop shadow paired with the inset white top-highlight; no hard heavy shadows.
Transition grep: `transition-timing-function` is cubic-bezier(0.44, 0, 0.56, 1) everywhere; duration is 0.2s — no rogue curves or durations.
Font audit: headings in Haffer XH SemiBold with negative px tracking; body in Inter; Jersey 10 appears at most once or twice as accent.
Spacing grep: gaps/padding draw from the 2/4/6/8/10/12/14/16/18/20/23/25 ladder, leaning on 10 and 20.
Contrast audit: body text on its background ≥ 4.5:1 (slate #8e8da0 used only for large/de-emphasized text).
Motion audit: every animation passes through useReducedMotion; no springs, no second curve.
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 2 nodes across 2 levels, shallow to deep by color.
body1
div
Accessibility
Contrast matrix
84 combinations - 38 pass AA - 24 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox19.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#F7F7FF
APCA Lc
+102
Use
foreground on background
AaThe quick brown fox19.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F7F7FF
bg
#000000
APCA Lc
-103
Use
background on foreground
AaThe quick brown fox17.57
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#181824
APCA Lc
-107
Use
background on background
AaThe quick brown fox17.57
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#181824
bg
#FFFFFF
APCA Lc
+104
Use
background on background
AaThe quick brown fox16.64
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FBE74E
APCA Lc
+91
Use
foreground on accent
AaThe quick brown fox16.64
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FBE74E
bg
#000000
APCA Lc
-91
Use
accent on foreground
AaThe quick brown fox16.49
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F7F7FF
bg
#181824
APCA Lc
-102
Use
background on background
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
