Paul HittandClaude Fable 5.1
2585c4e9f9
The skill's detector scored the README, DESIGN.md and the extracted
comment prose. Fixed what it flagged: hollow intensifiers, "in order
to", "additionally", "the whole point", bold sentences in docs, and
bold that had wrapped across comment lines. Comment prose scores a
maximum of 3 out of 100 across the repo.
One sweep rule mangled two comments ("which is the entire point of X"
lost its clause); repaired, and the rule now keeps the clause.
Comments and strings only. 764 XCTest and 55 Swift Testing pass.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
5.0 KiB
Layout spec
Extracted from Messenger App V2.sketch (Sketch 71, 120 artboards, ~280
symbols) by reading the file's JSON directly. Every number below is measured
from a symbol master, not eyeballed from a render.
The layout is theirs; the colour is ours. Flamenet orange #FF5A1F
stays. The kit's primary is blue #2298FF and adopting it would mean the app
no longer looks like the product it belongs to. Everywhere the kit says
"primary", read Flamenet orange.
The typeface is not adopted, only the scale. The kit is set in DM Sans. Bundling it means shipping font files and an OFL notice, which is a licensing decision rather than a layout one, so the sizes, weights and line heights below are applied to the system face. Swapping the face in later changes nothing about the measurements.
Canvas is 375pt wide (iPhone X). Treat the horizontal numbers as insets from the edges rather than fixed widths, or the layout breaks on every other phone.
Grid
| Page margin | 24 |
| Content width | 327 (375 − 48) |
| List row pitch | 72 (48pt row + 24pt gap) |
Bars
Large title: 96 tall. Title 24 bold at (24, 52). Trailing icons 24×24 at x = 279 and 327, y = 60, i.e. 24 from the right edge, 48 apart.
Conversation bar: 88 tall. Back chevron 24×24 at (24, 54). Title 16 medium at (72, 45). Beneath it at (72, 69): a 12×12 presence dot, then the subtitle at 12 regular, 16 from the dot's origin. Trailing icons at x = 279, 327, y = 54.
Tab bar: 84 tall, and it is a floating pill, not a full-width strip:
a 328×50 rounded rectangle at x = 24 with radius 25 on #F3F3F3, holding four
82×50 tab items. This is the single biggest visual difference from what both
apps do today.
Composer: 84 tall. A 50-tall pill with radius 25 on #F3F3F3, text inset
16, placeholder at 14 regular. Leading + at (16, 12); trailing camera at
x = 287 and overflow at x = 335, all 24×24.
Conversation row (327×48)
| element | position | type |
|---|---|---|
| Avatar | 0, 0 — 48×48 | |
| Name | x 64, y 0 | 16 medium, 24 line |
| Preview | x 64, y 24 | 14 regular, 24 line |
| Timestamp | right aligned, y 5 | 12 regular |
| Unread badge | 24×16 at y 28 |
The 64 is not a gap of 64, it is the 48pt avatar plus a 16pt gutter.
Message bubbles
The corners are asymmetric, and that is the whole character of them. Every corner is radius 16 except one, which is radius 2 and points at its author: bottom-right on a message you sent, top-left on one you received. Rounding all four equally throws away the only thing that distinguishes these bubbles from every other chat app's.
| sent | received | |
|---|---|---|
| Fill | Flamenet orange (kit: #2298FF) |
#F3F3F3 |
| Square corner | bottom-right | top-left |
| Text | 16 regular | 16 regular |
| Padding | 12 horizontal, 12 vertical | 12 horizontal, 12 vertical |
| Avatar | none | 32×32, leading, top-aligned |
| Bubble inset | — | 40 from the leading edge |
| Timestamp | 10 regular, above, trailing | 10 regular, above, leading |
Day divider: 14 regular, centred.
Type scale
| name | size | weight |
|---|---|---|
| H1 | 40 | bold |
| H2 | 32 | bold |
| H3 | 24 | bold |
| H4 | 20 | bold |
| Sub 1 / 2 / 3 | 12 / 14 / 16 | medium |
| Body 1 / 2 | 14 / 16 | regular |
| Description 1 / 2 | 12 / 10 | regular |
Kit palette, for reference
#4FACFE primary · #2298FF bubble · #2F2F2F ink · #B3BEC9 muted ·
#F9F9F9 background · #F3F3F3 surface · #3BD5B2 success · #ED497C alert
Only #F3F3F3 is adopted directly, as the received-bubble and pill fill. The
rest map onto the existing Flamenet palette.
What was not taken
Phone number entry and SMS verification (Flamenet is handle + passphrase, and being phone-number-free is a point against Signal rather than an omission); wallet and money transfer; the timeline, post and comment social feed; people nearby; profile follow/following.
Settings and list screens
The kit does not use cards here either. Rows are grouped into sections,
and sections are separated by a full-bleed 16pt band filled #F3F3F3: a
thick grey spacer spanning the whole width, not a hairline and not a gap
between floating surfaces. Inside a section the rows butt up against each
other, divided only by a hairline that starts after the leading icon.
Item/48, 56 tall
| element | position |
|---|---|
| Leading icon | 24×24 at x 0, y 16 |
| Label | x 40, y 16 — 14 medium |
| Trailing chevron | 24×24, right aligned |
| Hairline | y 55, inset 36 from the leading edge |
Item/48 no icon-description, 93 tall, for a row that needs a sentence
under it: label 14 medium at (24, 16), description 12 regular at (24, 44),
switch 44×28 on the trailing edge, hairline at the full 24 inset.
The description is 12pt and sits under the label it belongs to, not a paragraph floating between controls. A setting whose explanation is longer than the section it lives in is a setting that needs a shorter explanation.
Sign out is an icon plus "Sign Out" at 14 medium, on the same row grammar as everything else, not a full-width filled button.