# Freckle — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://freckle.tech/
Captured: 2026-10-08
CSS measured: 2026-10-08T01:51:01.414Z at 1440×1000 — https://freckle.tech/
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: anthropic/claude-sonnet-5

## Design direction

Freckle is a minimalist, product-focused marketing site targeting families with kids. The visual language relies heavily on centered layouts, ample whitespace, a rounded sans-serif font (Diatype Rounded), and a core brand color of vibrant green, paired with 3D product imagery and a playful claymation mascot. Scroll-linked animations guide the user through the hardware features and companion app.

## Classification

- Industry: technology
- Site type: Landing, Store
- Business model: Software, E-commerce
- Styles: minimal, playful, product-led
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Heading: Diatype Rounded — weight 500; size 36px; line-height 48px; tracking -0.3px; Regular (90% role confidence, computed values)
- Body: Diatype Rounded — weight 500; size 20px; line-height 32px; tracking -0.3px; Regular (85% role confidence, computed values)
- Mono: Diatype Rounded — weight 500; size 11.9px; line-height 15.1px; tracking -0.3px; Regular (70% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White background (#FFFFFF) dominates the page layout. (95% role confidence, computed values)
- Primary Action — primary action #3FB23B: color-2: computed rgb(63, 178, 59); AI role: Vibrant green (#3FB23B) used for text highlights and the primary 'Pre-Order' button. (95% role confidence, computed values)
- Surface — surface #FCF5EA: color-7: computed rgb(252, 245, 234); AI role: Off-white (#FCF5EA) used for the footer background area. (85% role confidence, computed values)
- Surface — surface #EAF7E6: color-3: computed rgb(234, 247, 230); AI role: Light green (#EAF7E6) used as background for unselected feature pill buttons. (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": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Freckle Technologies, Inc. © 2026",
        "top": 17878,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "—",
        "top": 17878,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "X/Twitter",
        "top": 17878,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "36px",
    "lineHeight": "48px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Freckle is a phone that offers kids more tools to explore the world, free from feeds designed to pul",
        "top": 7000,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Freckle is for families learning how to give kids more independence without opening every door all a",
        "top": 9223,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The hardware is custom-built for kids. Sized for smaller hands, and engineered to withstand unexpect",
        "top": 12875,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Artifacts let you see the world through your kid’s eyes. The things they noticed, created, and captu",
        "top": 10991,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Equipped with two cameras so kids can capture their favorite moments, and share them with the people",
        "top": 14418,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "11.9px",
    "lineHeight": "15.1px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "online now",
        "top": 10133,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Today 9:50 PM",
        "top": 10664,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "17.6px",
    "lineHeight": "17.6px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "sound on",
        "top": 8560,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "17.3px",
    "lineHeight": "48px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "F",
        "top": 10110,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "14.3px",
    "lineHeight": "17.5px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Freckle FAQ",
        "top": 10110,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Text\", \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "13.5px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "9:50",
        "top": 10062,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "20px",
    "lineHeight": "32px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "button",
        "text": "Quests & activities",
        "top": 650,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Collect artifacts",
        "top": 650,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Learn anything",
        "top": 650,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Diatype Rounded",
    "fontStack": "\"Diatype Rounded\"",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Pre-Order",
        "top": 16,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 6,
    "contexts": [
      {
        "tag": "body",
        "text": "a kids phone built for real-world adventureQuests & activitiesCollect artifactsLearn anythingMusic p",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 8565,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 8565,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#3FB23B",
    "alpha": 1,
    "cssValue": "rgb(63, 178, 59)",
    "count": 60,
    "contexts": [
      {
        "tag": "p",
        "text": "Freckle is a phone that offers kids more tools to explore the world, free from feeds designed to pul",
        "top": 7000,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "sound on",
        "top": 8560,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 8539,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#EAF7E6",
    "alpha": 1,
    "cssValue": "rgb(234, 247, 230)",
    "count": 15,
    "contexts": [
      {
        "tag": "button",
        "text": "Quests & activities",
        "top": 650,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 13568,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#E8F0E0",
    "alpha": 1,
    "cssValue": "rgb(232, 240, 224)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "9:50FFreckle FAQonline nowToday 9:50 PM",
        "top": 10060,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "F",
        "top": 10110,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#83CE7F",
    "alpha": 1,
    "cssValue": "color(srgb 0.515294 0.806275 0.499608)",
    "count": 14,
    "contexts": [
      {
        "tag": "button",
        "text": "Quests & activities",
        "top": 650,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 9,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 478,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "9:50",
        "top": 10062,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 10071,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FCF5EA",
    "alpha": 1,
    "cssValue": "rgb(252, 245, 234)",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Freckle Technologies, Inc. © 2026",
        "top": 17878,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "—",
        "top": 17878,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "X/Twitter",
        "top": 17878,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#DEEBD9",
    "alpha": 1,
    "cssValue": "rgb(222, 235, 217)",
    "count": 1,
    "contexts": [
      {
        "tag": "label",
        "text": "",
        "top": 10711,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#2B7D5C",
    "alpha": 1,
    "cssValue": "rgb(43, 125, 92)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "F",
        "top": 10110,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Freckle FAQ",
        "top": 10110,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 10120,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#789FCC",
    "alpha": 1,
    "cssValue": "rgb(120, 159, 204)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 13602,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#D44C0E",
    "alpha": 1,
    "cssValue": "rgb(212, 76, 14)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 13602,
        "property": "background"
      }
    ]
  }
]
```

### 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: Very loose rhythm, favoring massive vertical whitespace between sections to isolate product shots and allow for scroll-driven animations.
- Corner style: Fully rounded (pill-shaped)
- Radius: Large border radii on buttons and feature tags to match the rounded typography and playful brand.
- Borders: Mostly borderless, relying on color fills for buttons.
- Buttons: Pill-shaped, filled backgrounds with centered text.
- Content width: Single column, narrow text measure centered in the viewport.
- Density: Low density, prioritizing imagery and animation over text content.
- Evidence: DOM/CSS facts show no strict grid system, heavily rounded buttons ('Pre-Order', feature pills), and sparse text usage.

## Sections

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

1. **Hero — Opening screen** (Home)
   Opening hero composition from Home, organized around “Opening screen”.
   Capture: 1440×1000px; page bounds 0–1000px of 17928px; source section ID: `9cf32c04-54c8-42ee-8b71-b2b1b50d4fc7`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/499bcabc29348f92c5d93c62c15e2f669ddac77bec9471ea3fb186eda520b4a3/section_crop-9cf32c04-2026-10-08T01-51-16-548Z.webp
   SECTION.md v3.2: `9cf32c04-54c8-42ee-8b71-b2b1b50d4fc7` (deterministic evidence; editorial review pending)
2. **Editorial — Family Independence Mission** (Home)
   AI suggestion (82% confidence): A complete, self-contained storytelling block pairing a large rounded lifestyle visual with a concise two-paragraph product philosophy; it ends before the partially visible app carousel begins.
   Capture: 1440×1722px; page bounds 7938–9660px of 17928px; source section ID: `8a27fcbf-55b6-458c-bcbb-a3ed4f74219c`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/7cc3c625f909617efae31fd71cdfd375416a18600556d19e2b0d0549b4cb061e/8a27fcbf-55b6-458c-bcbb-a3ed4f74219c.webp
   SECTION.md v3.2: `8a27fcbf-55b6-458c-bcbb-a3ed4f74219c` (deterministic evidence; editorial review pending)
3. **Features — Tabbed Phone Hardware Showcase** (Home)
   AI suggestion (93% confidence): Complete, self-contained product feature module with a large device render, color selectors, hardware-category tabs, and supporting camera copy.
   Capture: 1440×957px; page bounds 13564–14521px of 17928px; source section ID: `99abeb70-2731-4b0d-ae32-e56fd5636132`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/f55def1117de32c3070f99a2ab730d60cf644a041523d930ce29df3fcde6ed70/99abeb70-2731-4b0d-ae32-e56fd5636132.webp
   SECTION.md v3.2: `99abeb70-2731-4b0d-ae32-e56fd5636132` (deterministic evidence; editorial review pending)
4. **Footer — Scenic Pre-Order Footer** (Home)
   AI suggestion (96% confidence): Complete page-ending footer with a full-bleed lifestyle image, centered pre-order CTA, and bottom copyright, social, and privacy links.
   Capture: 1440×999px; page bounds 16929–17928px of 17928px; source section ID: `d610c25f-41c9-48ac-b1cf-313134938865`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/0b8499ee4dd5d48dcc81c589a3f199690b99bb81c0e766eb8e287e51222bc1a0/d610c25f-41c9-48ac-b1cf-313134938865.webp
   SECTION.md v3.2: `d610c25f-41c9-48ac-b1cf-313134938865` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/d73b7882eb91e801d7600f5be69c8db4430259fb31646f12fa18703b6af5856b/desktop_full-d1ae6bd3-2026-10-08T01-51-01-458Z.jpg
- Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/043f9e4f24200836adfd1edc6b5ce68678389ce632384178a179c4a46a0ea03e/mobile_full-d1ae6bd3-2026-10-08T01-51-52-807Z.webp
- Open Graph image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/564ade03fdfe629fe2bffdce3c73ee0f1c6de1b75b34ec21bdc767476e3974e1/og_image-d1ae6bd3-2026-10-08T01-51-15-354Z.webp
- Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/8bb3e5ea321c147270f73217614d70eb6f4d7ba652c4b50f824f44e9d373e3d7/motion-1791425711364.mp4
- Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/44f4a4ec25dfd8eb1ade8786744dedf3b076c1f760a29ecd0027a51b67ab13e0/motion-poster-1791425711364.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

- Primary Button
- Carousel
- Footer
- Hero
- Scroll Driven Story Sequence
- Floating Fixed CTA

## Quality rubric

Overall: 54/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Freckle executes a clean, on-brand, scroll-driven product story with one genuinely charming idea — a claymation mascot physically entering and later exiting the phone — but the rest of the page (centered single-column layout, a near-monochrome green palette, one typeface at a handful of sizes, and generic carousel/toggle/pill components) follows a very common consumer-hardware landing-page template. It's a competent, coherent execution of a familiar pattern rather than a landmark or highly original system.

- Typography (15%): 55 — A single rounded typeface (Diatype Rounded, weight 500) is used almost everywhere with only two or three real size steps (36px headings, 20px body, small utility text). This produces brand consistency but a flat hierarchy with little typographic range, contrast, or structural variety.
- Color (10%): 53 — The palette is coherent and on-brand (white canvas, single vibrant green #3FB23B, pale green surfaces, warm off-white footer) but it is thin — essentially one hue family plus neutrals, with only incidental accents (blue lanyard, orange mascot, a blue/orange pair in one UI panel) that aren't woven into a broader system.
- Layout (20%): 54 — The page is a single, centered, narrow-column scroll stack with generous whitespace — a structure extremely common to hardware/app launch sites. DOM facts confirm no underlying grid system; the layout relies on isolated, stacked content blocks rather than compositional variation (asymmetry, multi-column tension, varied alignment).
- Motion (20%): 60 — Motion is the site's most developed axis: a scroll-driven sequence ties a mascot entering/exiting a phone to feature reveals, an app carousel, and hardware toggles, with the entry animation convincingly reversed on scroll-up. However, the vocabulary (fade/slide-in, scale, simple reversal) is standard scrollytelling, and no evidence substantiates animation quality (easing, frame rate) beyond what is visibly described.
- Originality (25%): 47 — The mascot-jumping-into-the-phone metaphor is a genuinely cute conceptual device linking character and hardware, but it is one idea riding on an otherwise highly conventional template: centered hero, scroll-revealed feature pills, app-screenshot carousel, hardware toggle tabs, and a photographic CTA footer — a pattern common across countless kids-tech and consumer-hardware launch sites. Per rubric, a single novel moment cannot justify a high score when the surrounding system is formulaic.
- Content (10%): 59 — Copy and visuals are well matched to the product story — short declarative statements about independence and real-world play are paired with outdoor photography and device shots, and feature pills align with the described capabilities. The pairing is coherent, if plainly literal, throughout.

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
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A chunky clay mascot and bouncy green bubble logo set a friendly tone before any text, so parents sense this is a kid's product right away. Generous white space between short, centered sections and photos of kids outdoors pace the long page into easy bites, while the rounded green device repeats the mascot's soft shapes for visual consistency.

## 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.