Student Housing Made Simple | Student.com

Design Specification — Student Housing Made Simple | Student.com

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#6FDA86). All type is set in var(--font-family-display). Detected font weights: 200, 400, 500, 600, 700. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents; dark-mode aware.

Logo asset(s): https://www.student.com/favicon.ico?favicon.1_e6gqo5m9d1i.ico

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(100deg, 0.78%, 97.64%)
• linear-gradient(139deg, 33%, 80%, 100%)
• linear-gradient(100deg, #bfb9f6 0%, #e3a9e3 50%, #ff9a48 100%)
• linear-gradient(100deg, #e5e3fb 0%, #fff 100%)
• linear-gradient(in lab, red, red))
• linear-gradient(90deg,#fed7aa 0%,#ddd6fe 30%,#c4b5fd 50%,#ddd6fe 70%,#fed7aa 100%)
• linear-gradient(90deg,#ddd6fe 0%,#fed7aa 30%,#fdba74 50%,#fed7aa 70%,#ddd6fe 100%)
• linear-gradient(108deg,#0000 25%,#ffffff47 50%,#0000 75%)
• linear-gradient(to bottom, 0%, #e5e3fb00 100%)
• linear-gradient(to top, 0%, #e5e3fb00 100%)

> 4 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--font-family-display) — stack: var(--font-family-display)

Font stacks (most used first)

• var(--font-family-display)
• DM Sans
• var(--font-family-sans)
• var(--font-sans)
• var(--font-mono)
• DM Sans Fallback
• clashDisplay
• clashDisplay Fallback
• var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)

Derived type scale

Font sizes (by frequency)

Weights in use: 200, 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 1px 2px 0 #0000000d
• inset 1px 1px 10px 2px #00000073
• 0 4px 34.3px #3a3b3e33

Layout

Container max-width: 768px

Grid columns (largest detected grid): 8

Breakpoints

• 475px
• 639px
• 640px
• 768px
• 1024px
• 1280px
• 1400px

Animation & Motion

Transitions

• opacity .55s ease-out,transform .55s cubic-bezier(.34,1.4,.64,1),visibility 0s linear .55s
• opacity .15s ease-out,visibility 0s linear .15s

Easing curves

• cubic-bezier(.4, 0, 1, 1)
• cubic-bezier(0, 0, .2, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.4, 0, .6, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.16,1,.3,1)
• cubic-bezier(.34,1.56,.64,1)
• cubic-bezier(.34,1.4,.64,1)

Keyframes

@keyframes filmstrip-scroll-up { 0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--filmstrip-half-gap)))} }
@keyframes filmstrip-scroll-down { 0%{transform:translateY(calc(-50% - var(--filmstrip-half-gap)))}to{transform:translateY(0)} }
@keyframes filmstrip-scroll-left { 0%{transform:translate(0)}to{transform:translateX(calc(-50% - var(--filmstrip-half-gap)))} }
@keyframes filmstrip-shimmer-sweep { 0%{opacity:0;background-position:-100% 0}2%{opacity:1}14%{opacity:1;background-position:220% 0}16%,to{opacity:0;background-position:220% 0} }
@keyframes filmstrip-scroll-right { 0%{transform:translateX(calc(-50% - var(--filmstrip-half-gap)))}to{transform:translate(0)} }
@keyframes ripple { 0%,to{background-color:var(--color-surface-muted);transform:scale(1)}50%{background-color:var(--color-surface-primary);transform:scale(1.4)} }
@keyframes heart-pulse { 0%{fill:var(--color-destructive-100);filter:none;transform:scale(.625)}45%{fill:var(--color-destructive-400);filter:drop-shadow(0 0 8px var(--color-destructive-300));transform:scale(1.08)}65%{fill:var(--color-destructive-300);filter:drop-shadow(0 0 5px var(--color-destructive-200));transform:scale(.97)}80%{transform:scale(1.02)}to{fill:var(--color-destructive-300);filter:drop-shadow(0 0 3px var(--color-destructive-100));transform:scale(1)} }
@keyframes ken-burns { 0%{transform:scale(1.12)translate(-4%)}to{transform:scale(1.18)translate(4%)} }
@keyframes fade-up-reveal { 0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)} }
@keyframes pop-in-reveal { 0%{opacity:0;transform:translate(-24px)scale(.5)}65%{opacity:1;transform:translate(2px)scale(1.12)}to{opacity:1;transform:translate(0)scale(1)} }
@keyframes landing-badge-pop { 0%{opacity:0;transform:scale(.6)rotate(-6deg)}60%{opacity:1;transform:scale(1.08)rotate(1deg)}to{opacity:1;transform:scale(1)rotate(0)} }
@keyframes reviews-card-deal { 0%{opacity:0;transform:translateY(60px)scale(.85)}to{opacity:1;transform:translateY(0)scale(1)} }
@keyframes reviews-photo-settle { 0%{transform:rotate(var(--photo-tilt,2deg))}to{transform:rotate(0)} }
@keyframes reviews-quote-boing { 0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.15,.8)}65%{transform:scale(.95,1.1)}to{opacity:1;transform:scale(1)} }
@keyframes scroll-text { 0%{transform:translate(0)}20%{transform:translate(0)}80%{transform:translateX(var(--scroll-distance,-50%))}to{transform:translateX(var(--scroll-distance,-50%))} }
@keyframes gradientCycle { 0%{background-position:0%}50%{background-position:100%}to{background-position:0%} }
@keyframes search-pumpkin-settle { 0%{transform:translateY(0) rotate(var(--pumpkin-rest-angle))}4%{transform:translateY(var(--pumpkin-jump-height)) rotate(var(--pumpkin-wobble-left))}8%{transform:translateY(0) rotate(var(--pumpkin-wobble-right))}11%{transform:translateY(-3px)rotate(-7deg)}14%{transform:translateY(0)rotate(4deg)}16%{transform:rotate(-2deg)}18%,to{transform:translateY(0) rotate(var(--pumpkin-rest-angle))} }
@keyframes hero-spider-silk-drop { 0%,12%,to{transform:translate(-50%)scaleY(0)}35%,68%{transform:translate(-50%)scaleY(1)} }

Animations

• .5s ease-out forwards reviews-quote-boing
• .8s ease-out forwards heart-pulse
• .9s cubic-bezier(.16,1,.3,1) forwards fade-up-reveal
• .8s cubic-bezier(.34,1.56,.64,1) forwards pop-in-reveal
• .55s cubic-bezier(.34,1.4,.64,1) forwards reviews-card-deal
• .45s cubic-bezier(.34,1.4,.64,1) forwards reviews-photo-settle
• 1.2s ease-in-out infinite ripple
• var(--animate-fade-in)
• 6s ease-in-out forwards ken-burns
• var(--animate-pulse)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Enter a college, city, or property”

button-secondary — sample text: “Sign in”

Source Design Tokens (CSS custom properties)

:root {
  --font-dm-sans: "DM Sans", "DM Sans Fallback";
  --font-clash-display: "clashDisplay", "clashDisplay Fallback";
  --font-sans: var(--font-dm-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --spacing: .25rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -.025em;
  --tracking-wide: .025em;
  --tracking-widest: .1em;
  --leading-snug: 1.375;
  --shadow-sm: 0 1px 2px 0 #0000000d;
  --drop-shadow-md: 0 3px 3px #0000001f;
  --drop-shadow-lg: 0 4px 4px #00000026;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --blur-xs: 4px;
  --blur-sm: 4px;
  --blur-md: 12px;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --blur: 8px;
  --color-purple-600: #9994c5;
  --color-purple-500: #aca7dd;
  --color-purple-400: #bfb9f6;
  --color-purple-300: #ccc7f8;
  --color-purple-200: #e5e3fb;
  --color-purple-100: #f2f1fd;
  --color-yellow-500: #fecf01;
  --color-yellow-400: #fedd4d;
  --color-yellow-300: #ffe780;
  --color-yellow-200: #fff1b3;
  --color-yellow-100: #fffae6;
  --color-orange-600: #e68b41;
  --color-orange-500: #ff9a48;
  --color-orange-400: #ffa45a;
  --color-orange-300: #ffb87f;
  --color-orange-100: #ffe1c8;
  --color-white: #fff;
  --color-black: #000;
  --color-grey-800: #1f1f1f;
  --color-grey-700: #262626;
  --color-grey-600: #3a3b3e;
  --color-grey-500: #505154;
  --color-grey-400: #7c7c7f;
}

Do's and Don'ts

Do

• Do reserve the accent #6FDA86 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 200, 400, 500, 600, 700.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #BFB9F6;
  --color-accent: #6FDA86;
  --color-background: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #E5E3FB;
  --color-border: #3A3B3E;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container: #F8F8F8;
  --color-surface-container-high: #F7F5F3;
  --color-surface-container-highest: #DFDCD7;
  --font-sans: var(--font-family-display);
  --font-size-headline-lg: 43px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 19px;
  --font-size-body-md: 16px;
  --font-size-label-sm: 10px;
  --radius-lg: 34px;
  --shadow-sm: 0 1px 2px 0 #0000000d;
  --shadow-md: 0 4px 34.3px #3a3b3e33;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --container-max: 768px;
}