# Frequently asked questions — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://21oaks.org/
Website: 21Oaks Student Apartments • USC & Williams-Brice
Section ID: c00d787f-dec1-4bfa-a67b-0e951116c6eb
Status: deterministic evidence captured; editorial AI review pending

## Purpose

This is a faq section on the Home page. Use the attached crop and measured browser facts to reconstruct its composition. Do not infer unmeasured source values.

## Layout

1440×866px root; block

## Visual signature

playful, editorial, soft, photographic, hand-drawn, parallax-scrolling treatment at 1440×866px. The crop spans 17738–18604px of a 20824px page.

## Components

- Navigation Bar
- Hero With Background Imagery
- Gallery
- Product Card
- Testimonial Card
- Footer
- Primary Button
- Badge
- Stat Block
- Horizontal Scroll Container
- Scroll Triggered Background Color Transition
- Hand Drawn Heading Accents

## Evidence note

The geometry, typography, colors, media, and animation parameters below come from saved HTML/CSS/browser evidence when present. Website-level roles are supplied separately. Editorial section judgment remains pending unless the MCP resolves this source ID to a promoted canonical record.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: faq
- Source type: faq
- Structure: 1440×866px root; block
- Layout: 1440×866px root; block
- Styles: playful, editorial, soft, photographic, hand-drawn, parallax-scrolling
- Components: Navigation Bar, Hero With Background Imagery, Gallery, Product Card, Testimonial Card, Footer, Primary Button, Badge, Stat Block, Horizontal Scroll Container, Scroll Triggered Background Color Transition, Hand Drawn Heading Accents
- Purpose: faq section from the Home page of 21Oaks Student Apartments • USC & Williams-Brice.
- Visual signature: rgba(0, 0, 0, 0) with 1440×866px root; block. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×866px; aspect ratio 1.663:1
- Page bounds: 17738–18604px of 20824px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "body/supporting copy",
      "family": "Exposure",
      "stack": "Exposure, Georgia, sans-serif",
      "size": "13px",
      "weight": "400",
      "lineHeight": "18.1px",
      "letterSpacing": "normal",
      "sample": "Click “Apply Now,” choose your lease term and floor plan, and complete the online application. If ap",
      "element": "p",
      "occurrences": 7,
      "sourceId": "font-8"
    },
    {
      "role": "UI/supporting text",
      "family": "Exposure",
      "stack": "Exposure, Georgia, sans-serif",
      "size": "15.8px",
      "weight": "400",
      "lineHeight": "20.6px",
      "letterSpacing": "0.2px",
      "sample": "Didn’t find what you werelooking for?",
      "element": "div",
      "occurrences": 1,
      "sourceId": "font-34"
    },
    {
      "role": "UI/supporting text",
      "family": "Exposure",
      "stack": "Exposure, Georgia, sans-serif",
      "size": "14.4px",
      "weight": "400",
      "lineHeight": "20.2px",
      "letterSpacing": "normal",
      "sample": "Everything you might want to know before moving in.",
      "element": "div",
      "occurrences": 1,
      "sourceId": "font-35"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "66.2px",
      "family": "Exposure",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Large serif font (Exposure) used for prominent headlines like 'Made for everyday living' and 'Where student life feels balanced' at sizes 66px-93px.",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "66.2px",
      "letterSpacing": "-1.3px"
    },
    {
      "role": "heading",
      "size": "18px",
      "family": "Exposure",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Serif font (Exposure) used at 18px for smaller structural headings or navigation items like 'Apartments', 'Amenities'.",
      "sampleId": "font-9",
      "confidence": 0.8,
      "lineHeight": "21.6px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "13px",
      "family": "Exposure",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: Serif font (Exposure) used at 13px for general paragraph text, such as the lease application details.",
      "sampleId": "font-8",
      "confidence": 0.85,
      "lineHeight": "18.1px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#282828",
      "cssValue": "rgba(41, 41, 41, 0.2)",
      "alpha": 0.2,
      "appliedAs": [
        "border"
      ],
      "occurrences": 8,
      "sourceId": "color-13"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: White background used for major sections of the page.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#292929",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(41, 41, 41); AI role: Dark grey (#292929) used extensively for typography across light backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#E8CEFF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-5: computed rgb(232, 206, 255); AI role: Light purple (#E8CEFF) used for primary buttons ('Schedule a Tour', 'Apply Now') and interactive elements.",
      "sampleId": "color-5",
      "confidence": 0.9
    },
    {
      "hex": "#121214",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-3: computed rgb(18, 18, 20); AI role: Very dark grey/black (#121214) used as the background color for the large footer section.",
      "sampleId": "color-3",
      "confidence": 0.85
    },
    {
      "hex": "#DAEBC8",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-12: computed rgb(218, 235, 200); AI role: Light green (#DAEBC8) used as an accent color for 'Available' badges on product cards.",
      "sampleId": "color-12",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Small to medium border-radius used on buttons, badges, and card components to soften the UI.",
  "density": "Low to medium density. The design embraces negative space to let the typography and photography breathe, rather than packing information tightly.",
  "evidence": "Observation of layout structure in full-page screenshots, button shapes in the navigation and product cards, and spacing around typographic elements.",
  "borderStyle": "Subtle, semi-transparent dark borders (color-13) used on elements like FAQ accordions, while most cards rely on subtle shadows or background contrast rather than harsh solid borders.",
  "buttonStyle": "Solid fill pastel buttons with rounded corners and dark text, often featuring a subtle icon or arrow. Hover states likely involve slight opacity or scale changes based on standard patterns.",
  "cornerStyle": "Consistent use of soft, rounded corners on buttons, product cards, image frames, and floating UI elements, contrasting with the sharp serif typography.",
  "contentWidth": "A mix of full-bleed sections (like the hero and background color transitions) and constrained content areas (like the text layouts and card grids) to guide the eye.",
  "spacingRhythm": "Generous use of vertical and horizontal whitespace, especially between large heading sections and floating image galleries, creating an airy, editorial feel. Padding within components like product cards is structured and balanced."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1440×866px; block; padding {"top":"0px","right":"0px","bottom":"0px","left":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 2.9px.
- Representative content widths: 688, 626, 598, 300, 276, 259, 258, 245px.
- Layout containers: 7; cards/surfaces: 0; media elements: 1; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 17738,
      "bottom": 18604,
      "pageHeight": 20824
    }
  },
  "container": {
    "size": "1440×866px",
    "position": "x 0px, y 17738px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(41, 41, 41)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      2.9
    ],
    "representativeContentWidthsPx": [
      688,
      626,
      598,
      300,
      276,
      259,
      258,
      245
    ]
  },
  "columns": [
    {
      "element": "div · How do I apply for an apartment?Click “Apply Now,” choose your lease term and floor plan, and comple",
      "size": "688×43px",
      "position": "x 720px, y 18140px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "div · What does by-the-bed leasing mean?Each resident signs an individual lease and is only responsible fo",
      "size": "688×43px",
      "position": "x 720px, y 18183px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "div · What do I need to apply?To guarantee your bed space, you’ll need a signed lease agreement. Leases ar",
      "size": "688×43px",
      "position": "x 720px, y 18227px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "div · Do I need a guarantor?Most applicants require a guarantor to meet the income requirement and ensure",
      "size": "688×43px",
      "position": "x 720px, y 18270px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "div · How long does approval take?Typically 24–48 hours, depending on how quickly your guarantor submits t",
      "size": "688×43px",
      "position": "x 720px, y 18314px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "div · Can I apply if I’m not a student?Yes. All applicants who meet the qualifying criteria are welcome.",
      "size": "688×43px",
      "position": "x 720px, y 18357px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "div · How is rent paid?Rent is divided into 12 equal installments and is due on the 1st of each month. Add",
      "size": "688×43px",
      "position": "x 720px, y 18401px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "29×29px",
    "position": "x 162px, y 18408px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "capturedAt": "2026-10-10T05:32:41.096Z",
  "viewportWidth": 1440,
  "bounds": {
    "top": 17738,
    "bottom": 18604,
    "pageHeight": 20824
  },
  "root": {
    "id": "ld-978",
    "tag": "section",
    "role": null,
    "label": "Frequently asked questionsEverything you might want to know before moving in.Didn’t find what you we",
    "rect": {
      "x": 0,
      "y": 17738,
      "width": 1440,
      "height": 866
    },
    "display": "block",
    "position": "static",
    "padding": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "normal",
    "columns": null,
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(41, 41, 41)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "gapsPx": [
      2.9
    ],
    "representativeContentWidthsPx": [
      688,
      626,
      598,
      300,
      276,
      259,
      258,
      245
    ]
  },
  "columns": [
    {
      "id": "ld-1006",
      "tag": "div",
      "role": "listitem",
      "label": "How do I apply for an apartment?Click “Apply Now,” choose your lease term and floor plan, and comple",
      "rect": {
        "x": 720,
        "y": 18140,
        "width": 688,
        "height": 43
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    },
    {
      "id": "ld-1016",
      "tag": "div",
      "role": "listitem",
      "label": "What does by-the-bed leasing mean?Each resident signs an individual lease and is only responsible fo",
      "rect": {
        "x": 720,
        "y": 18183,
        "width": 688,
        "height": 43
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    },
    {
      "id": "ld-1026",
      "tag": "div",
      "role": "listitem",
      "label": "What do I need to apply?To guarantee your bed space, you’ll need a signed lease agreement. Leases ar",
      "rect": {
        "x": 720,
        "y": 18227,
        "width": 688,
        "height": 43
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    },
    {
      "id": "ld-1036",
      "tag": "div",
      "role": "listitem",
      "label": "Do I need a guarantor?Most applicants require a guarantor to meet the income requirement and ensure ",
      "rect": {
        "x": 720,
        "y": 18270,
        "width": 688,
        "height": 43
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    },
    {
      "id": "ld-1046",
      "tag": "div",
      "role": "listitem",
      "label": "How long does approval take?Typically 24–48 hours, depending on how quickly your guarantor submits t",
      "rect": {
        "x": 720,
        "y": 18314,
        "width": 688,
        "height": 43
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    },
    {
      "id": "ld-1056",
      "tag": "div",
      "role": "listitem",
      "label": "Can I apply if I’m not a student?Yes. All applicants who meet the qualifying criteria are welcome.",
      "rect": {
        "x": 720,
        "y": 18357,
        "width": 688,
        "height": 43
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    },
    {
      "id": "ld-1066",
      "tag": "div",
      "role": "listitem",
      "label": "How is rent paid?Rent is divided into 12 equal installments and is due on the 1st of each month. Add",
      "rect": {
        "x": 720,
        "y": 18401,
        "width": 688,
        "height": 43
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    }
  ],
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  },
  "media": [
    {
      "id": "ld-1001",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 162,
        "y": 18408,
        "width": 29,
        "height": 29
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    }
  ],
  "animations": [],
  "coverage": {
    "elementsInSection": 29,
    "cards": 0,
    "media": 1,
    "animations": 0
  },
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ]
}
```

### Observed motion

No timestamped authored motion is attached. Use only restrained baseline transitions.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: Not assessed
- What transfers: Documented hierarchy and composition
- Dependencies: None recorded
- Guidance: Adapt the pattern to the new product and content.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original faq section inspired by the design evidence titled “Frequently asked questions”.

Purpose: faq section from the Home page of 21Oaks Student Apartments • USC & Williams-Brice.

Structure: 1440×866px root; block. Source layout label: 1440×866px root; block. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: rgba(0, 0, 0, 0) with 1440×866px root; block. Inspect the crop for image and content hierarchy.

Components: Navigation Bar, Hero With Background Imagery, Gallery, Product Card, Testimonial Card, Footer, Primary Button, Badge, Stat Block, Horizontal Scroll Container, Scroll Triggered Background Color Transition, Hand Drawn Heading Accents.

Style direction: playful, editorial, soft, photographic, hand-drawn, parallax-scrolling.

Observed crop: 1440×866px (1.663:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"66.2px","family":"Exposure","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Large serif font (Exposure) used for prominent headlines like 'Made for everyday living' and 'Where student life feels balanced' at sizes 66px-93px.","sampleId":"font-1","confidence":0.95,"lineHeight":"66.2px","letterSpacing":"-1.3px"} {"role":"heading","size":"18px","family":"Exposure","source":"computed","traits":"Regular","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Serif font (Exposure) used at 18px for smaller structural headings or navigation items like 'Apartments', 'Amenities'.","sampleId":"font-9","confidence":0.8,"lineHeight":"21.6px","letterSpacing":"normal"} {"role":"body","size":"13px","family":"Exposure","source":"computed","traits":"Regular","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: Serif font (Exposure) used at 13px for general paragraph text, such as the lease application details.","sampleId":"font-8","confidence":0.85,"lineHeight":"18.1px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White background used for major sections of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#292929","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(41, 41, 41); AI role: Dark grey (#292929) used extensively for typography across light backgrounds.","sampleId":"color-2","confidence":0.9} {"hex":"#E8CEFF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-5: computed rgb(232, 206, 255); AI role: Light purple (#E8CEFF) used for primary buttons ('Schedule a Tour', 'Apply Now') and interactive elements.","sampleId":"color-5","confidence":0.9} {"hex":"#121214","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(18, 18, 20); AI role: Very dark grey/black (#121214) used as the background color for the large footer section.","sampleId":"color-3","confidence":0.85} {"hex":"#DAEBC8","name":"accent","role":"accent","source":"computed","evidence":"color-12: computed rgb(218, 235, 200); AI role: Light green (#DAEBC8) used as an accent color for 'Available' badges on product cards.","sampleId":"color-12","confidence":0.8}

Typography measured inside this section: {"id":"font-8","family":"Exposure","fontStack":"Exposure, Georgia, sans-serif","weight":"400","size":"13px","lineHeight":"18.1px","letterSpacing":"normal","traits":"Regular","count":7,"contexts":[{"tag":"p","text":"Click “Apply Now,” choose your lease term and floor plan, and complete the online application. If ap","top":18190,"property":"font"},{"tag":"p","text":"Each resident signs an individual lease and is only responsible for their portion of the rent.","top":18229,"property":"font"},{"tag":"p","text":"To guarantee your bed space, you’ll need a signed lease agreement. Leases are generated once your ap","top":18276,"property":"font"}]} {"id":"font-34","family":"Exposure","fontStack":"Exposure, Georgia, sans-serif","weight":"400","size":"15.8px","lineHeight":"20.6px","letterSpacing":"0.2px","traits":"Regular","count":1,"contexts":[{"tag":"div","text":"Didn’t find what you werelooking for?","top":18352,"property":"font"}]} {"id":"font-35","family":"Exposure","fontStack":"Exposure, Georgia, sans-serif","weight":"400","size":"14.4px","lineHeight":"20.2px","letterSpacing":"normal","traits":"Regular","count":1,"contexts":[{"tag":"div","text":"Everything you might want to know before moving in.","top":18139,"property":"font"}]}

Colors measured inside this section: {"id":"color-13","hex":"#282828","alpha":0.2,"cssValue":"rgba(41, 41, 41, 0.2)","count":8,"contexts":[{"tag":"div","text":"How do I apply for an apartment?Click “Apply Now,” choose your lease term and floor plan, and comple","top":18139,"property":"border"}]}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":17738,"width":1440,"height":866},"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[2.9],"representativeContentWidthsPx":[688,626,598,300,276,259,258,245]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":162,"y":18408,"width":29,"height":29},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer the documented hierarchy and composition rather than source copy or assets.

No explicit dependencies were recorded.

Adapt the pattern to the new product and content.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.