# Design subscription for startups · Baked Design Studio — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://baked.design/
Captured: 2026-11-11
CSS measured: 2026-11-11T08:03:40.838Z at 1440×1000 — https://baked.design/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The website employs a modern, minimal aesthetic heavily leaning on a playful yet clean structure. The design language features a stark contrast between a dynamic, highly photographic hero grid and generous whitespace in the typography-driven sections. A prominent recurring motif is the use of fully rounded 'pill' shapes for navigation items, tags, and primary calls to action, contrasting with softly rounded rectangular project cards. The stark black and white palette is softened by muted grays and off-white surface colors.

## Classification

- Industry: creative
- Site type: Landing, Portfolio
- Business model: Software, Portfolio, Agency
- Styles: minimal, playful, photographic, pill-based-ui, masonry-presentation
- Platform: Custom code
- Technology: Astro

## Typography

- Heading: Inter — weight 500; size 15px; line-height 22px; tracking -0.1px; Regular (80% role confidence, computed values)
- Body: Inter — weight 400; size 15px; line-height 22px; tracking -0.1px; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: #FFFFFF used as the primary background color for the main document body, revealed fully after the hero transition. (95% role confidence, computed values)
- Text — text #111111: color-6: computed rgb(17, 17, 17); AI role: #111111 used for high-contrast primary text, including headings and the 'baked.design' logo. (95% role confidence, computed values)
- Surface — surface #F2F2F0: color-1: computed rgb(242, 242, 240); AI role: #F2F2F0 used for the background of testimonial blocks and other grouped content areas. (90% role confidence, computed values)
- Surface — surface #EFEFEF: color-8: computed rgb(239, 239, 239); AI role: #EFEFEF used for the control background of secondary navigation pills and the 'Pause motion' button. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "22px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -50,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "case studies",
        "top": 6,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "services",
        "top": 6,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 82,
    "contexts": [
      {
        "tag": "span",
        "text": "$5.3M seed",
        "top": 970,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$9M, General Catalyst",
        "top": 968,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$37.5M raised",
        "top": 966,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "600",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "OpenTag",
        "top": 915,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Pause motion",
        "top": 819,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "22px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "baked.design",
        "top": 6,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F2F2F0",
    "alpha": 1,
    "cssValue": "rgb(242, 242, 240)",
    "count": 92,
    "contexts": [
      {
        "tag": "a",
        "text": "",
        "top": -1447,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2520,
        "property": "background"
      },
      {
        "tag": "figure",
        "text": "huge kudos to both of you. incredible work in helping alfi get off the ground since day 1. hope you ",
        "top": 3861,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 7,
    "contexts": [
      {
        "tag": "body",
        "text": "<iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-N8QGQG9X\" height=\"0\" width=\"0\" style=\"d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -50,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "(opens in new tab)",
        "top": 20,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 12619,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 12630,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#111111",
    "alpha": 0.6,
    "cssValue": "rgba(17, 17, 17, 0.6)",
    "count": 56,
    "contexts": [
      {
        "tag": "p",
        "text": "Currently working with ai health research, compute markets, ai agents for businesses, marketing agen",
        "top": 462,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "$5.3M seed",
        "top": 970,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "A few favourites",
        "top": 12573,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "Case study$5.3M seed",
        "top": 856,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 17)",
    "count": 61,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -50,
        "property": "control-background"
      },
      {
        "tag": "a",
        "text": "baked.design",
        "top": 6,
        "property": "text"
      },
      {
        "tag": "h1",
        "text": "Product design & creative brand studio for founder led companies looking to accelerate through desig",
        "top": 372,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#A8A39B",
    "alpha": 1,
    "cssValue": "rgb(168, 163, 155)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12631,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#EFEFEF",
    "alpha": 1,
    "cssValue": "rgb(239, 239, 239)",
    "count": 15,
    "contexts": [
      {
        "tag": "a",
        "text": "case studies",
        "top": 6,
        "property": "control-background"
      },
      {
        "tag": "button",
        "text": "Pause motion",
        "top": 814,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#101010",
    "alpha": 0.25098039215686274,
    "cssValue": "rgba(17, 17, 17, 0.25)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Case study",
        "top": 869,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#E4E4E4",
    "alpha": 1,
    "cssValue": "rgb(228, 228, 228)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "baked.design",
        "top": 6,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#D9C3A0",
    "alpha": 1,
    "cssValue": "rgb(217, 195, 160)",
    "count": 10,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 12630,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#B59D78",
    "alpha": 1,
    "cssValue": "rgb(181, 157, 120)",
    "count": 10,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 12630,
        "property": "svg-stroke"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Tight padding inside navigational pills; generous vertical margins separating major sections like the hero and the project grid.
- Corner style: A distinct dual-approach: fully rounded (stadium/pill) shapes for interactive controls and navigation, and moderately rounded corners for large media blocks.
- Radius: Maximum radius (e.g., 9999px) for pills; approximately 12-16px for image and video elements.
- Borders: Mostly borderless, relying on solid background fills (like off-white or black) to define component boundaries against the white canvas.
- Buttons: Solid fill with stark contrast (black background with white text for primary CTA, light gray with black text for secondary elements).
- Content width: Edge-to-edge for the dynamic hero grid; max-width constrained for the two-column main project gallery.
- Density: High visual density in the hero and 'favourites' sections, contrasted with low text density and high whitespace in editorial areas.
- Evidence: Visible in the structural difference between the dense image grid crop and the spaced-out testimonial and project crops.

## Sections

Gallery section count: 4. Each entry corresponds to one gallery capture.

1. **Hero — Tilted work collage with centered statement** (Home)
   A moving wall of brand work shows craft before any copy is read, while the small centered statement and one button keep the action clear.
   Capture: 1440×2000px; page bounds 0–2000px of 12790px; source section ID: `3c351174-84ec-4705-8052-dfa5f41690aa`; image: https://media.designdetails.io/library/91be439fae579b14d822ad322d7fec26e162671840b45655752e1dcdd3854628/3c351174-84ec-4705-8052-dfa5f41690aa.webp
   SECTION.md v3.2: `3c351174-84ec-4705-8052-dfa5f41690aa` (deterministic evidence; editorial review pending)
2. **Gallery — Two-column grid of project images** (Home)
   Large, full-bleed project images with small captions for type and year let visitors scan range of work quickly, with a quote breaking up the rhythm.
   Capture: 960×600px; page bounds 2000–12125px of 12790px; source section ID: `772c57ae-bf39-4bc9-a95d-25d27f5c4b0f`; image: https://media.designdetails.io/library/5dd2b8b367d00b962aaa80a06fb92effcdc42db976f1fa3d1b66e85be68eeca9/772c57ae-bf39-4bc9-a95d-25d27f5c4b0f.webp
   SECTION.md v3.2: `772c57ae-bf39-4bc9-a95d-25d27f5c4b0f` (deterministic evidence; editorial review pending)
3. **Gallery — Polaroids hung on a string** (Home)
   The clothesline layout turns a short list of favourite projects into a playful, tactile row that fits the studio's personality and stays compact.
   Capture: 1440×505px; page bounds 12125–12630px of 12790px; source section ID: `56053314-11e9-4632-ac1d-217295fcca57`; image: https://media.designdetails.io/library/51a446a4af79da9e3516a831e09e602c03b41da04d321bb4c3e7889422211d00/56053314-11e9-4632-ac1d-217295fcca57.webp
   SECTION.md v3.2: `56053314-11e9-4632-ac1d-217295fcca57` (deterministic evidence; editorial review pending)
4. **Footer — Compact pill-style footer links** (Home)
   Small grey pill links repeat the main navigation in one quiet row, giving visitors a last way to move around without adding visual weight.
   Capture: 1440×160px; page bounds 12630–12790px of 12790px; source section ID: `5b3f6725-1f72-4d8a-bb4d-3de3d0f708d9`; image: https://media.designdetails.io/library/50e15c04e2dc3cdaa2cc7bf20994dfc859a3698201fd508f10a1340ec30f2097/5b3f6725-1f72-4d8a-bb4d-3de3d0f708d9.webp
   SECTION.md v3.2: `5b3f6725-1f72-4d8a-bb4d-3de3d0f708d9` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/008d82e4787b69273293edd30518baa2e3d96c0c98ed843c116bb2ef5bf09ea2/desktop_full-a9c81a4d-2026-11-11T08-03-40-851Z.webp
- Mobile screenshot: https://media.designdetails.io/library/cbb86b31d71aaa7ecd67650bd08ead017a212178f3964235807547ba7e9a4532/mobile_full-a9c81a4d-2026-11-11T08-04-23-127Z.webp
- Open Graph image: https://media.designdetails.io/library/68a4d2c0b301f0905163574fd26c46529d417c0b48f7c6dd5f6b73b9cecd68a7/og_image-a9c81a4d-2026-11-11T08-03-49-354Z.webp
- Full-page video: https://media.designdetails.io/library/2bb9aef04d75dc85972956fa84a01eee7f4b17d1ea1002b23e6cde66b30881b0/motion-1794391927205.mp4
- Video poster: https://media.designdetails.io/library/38345a9b2ea16dbccf76e960e5b2fdde27ae5039d46b0d297c5090d3eebf98f3/motion-poster-1794391927205.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Primary Button
- Editorial Card
- Testimonial Card
- Tag
- Hanging Cards
- Floating Split Navigation

## Quality rubric

Overall: 61/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: This is a well-assembled startup-studio portfolio executed competently across its scope: a diagonal masonry hero with pause-aware panning motion, a restrained black/white/off-white palette that lets client work supply color, a logically sequenced set of sections (hero, intro, social proof, case studies, testimonials, footer), and a genuinely playful hanging-card footer with hover-lift physics. The dual pill/rounded-rectangle corner system gives the UI chrome a consistent identity. However, the site largely operates within a now-familiar genre of YC-adjacent design-studio sites—panning hero collage, logo marquee, two-column case gallery, black CTA pill—so while execution is clean and the hanging-card motif and pause-motion control show some original thinking, the overall format doesn't introduce enough hard-to-substitute ideas across type, color, and layout simultaneously to clear the 'strong' threshold. Content integration is reasonably tight (funding figures as tags, attributed testimonials) but case-study copy remains thin. The result is a solid, professional, good-tier portfolio rather than an exceptional or landmark one.

- Typography (15%): 58 — Single Inter family across all contexts with minimal weight/size variation (mostly 13-15px, one 20px/600 outlier for a logotype). Spacing and letter-tracking are consistent and legible, but the system shows little hierarchy craft beyond size and opacity shifts (color-4 at 60% opacity for secondary text).
- Color (10%): 60 — Restrained black/white/off-white system (#111111, #FFFFFF, #F2F2F0, #EFEFEF) that lets photographic project thumbnails carry color. This is a coherent, intentional choice for an agency reel, but the palette itself takes no risks and offers little chromatic personality of its own.
- Layout (20%): 66 — The site moves through a clear sequence of structurally distinct sections—diagonal masonry hero, centered intro copy, logo marquee, two-column case-study gallery with testimonial interludes, and a hanging-card footer—each internally consistent in spacing and alignment. This is a legitimate multi-section system rather than a single hero gimmick, though the two-column gallery itself is a common editorial pattern.
- Motion (20%): 67 — Multiple distinct, purposeful motion moments are documented: a continuously panning hero grid that collapses into static content on scroll and mirrors back on return, a horizontal logo marquee, and hover-triggered hanging-card physics (lift/rotate/scale). A user-facing 'Pause motion' control indicates deliberate restraint and accessibility awareness. However, claims of smoothness/easing/frame-rate cannot be verified from the evidence, and the repertoire—panning grid, marquee, hover-lift—is a familiar motion vocabulary rather than a novel system.
- Originality (25%): 54 — The dual-radius pill/rounded-card system and the clothesline 'hanging cards' footer are the most distinctive, hard-to-substitute ideas present. But the overall format—panning hero collage, logo marquee, two-column case studies, black CTA pill—closely follows the now-common 'YC startup design studio' portfolio template, limiting its claim to true novelty.
- Content (10%): 62 — Case studies integrate funding/traction metadata (e.g., '$9M, General Catalyst', '€110k ARR now') directly into tags and testimonials, grounding the portfolio in business outcomes alongside visuals. Testimonials pair quotes with named attribution and avatars. This is a reasonably tight content-design integration for a studio selling outcomes, though copy remains sparse and generic in places.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A dense wall of mismatched project thumbnails, from plush mascots to app screens, sets a busy scrollable mood board tone before the page calms into a plain white section with small grey type and a single black button. That contrast makes the range of past work easy to skim while keeping the pitch itself simple and trustworthy.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.