Device identity checks
Copy sits at 15px on a 1.65 leading, in --muted, never in the strong ink.
Start a lookupDesign system · iUnlockMobile
The system, not the skin.
Transferred from a design canvas captured in the Website design patterns session: the ratios, the rhythm and the component anatomy carried over, while the palette, the type and the marks are ours. Every value on this page is a live token — switch the theme and the specimens follow.
01 · Colour tokens
Warm-tinted whites, green-black ink.
Surfaces carry a warm cast rather than a neutral grey, and the darkest ink is #14241B — nothing on the page is #000. Chips render the token for the theme you are in; hexes list light, then dark.
Dark is re-pitched per role, never inverted: accents lighten so they stay legible on green-black, and the soft tints stop being pale washes and become deep chips behind a light glyph. Every text pair clears 4.5:1 on the surface it sits on; --faint is decorative only — placeholders and window chrome, never copy a reader needs.
02 · Type ramp
Two faces, negative tracking that scales.
Bricolage Grotesque for display, Instrument Sans for body. The tracking is the ramp’s whole character: −0.058em at the hero, −0.045em at a section head, −0.025em on a card title, none at body size.
Hero H1
Know the device
before you commit.
before you commit.
clamp(38 → 68px) · lh 0.98 · ls −0.058em · w700 · 2nd line = --primary
Display H2 · band
One workflow for the device details that matter.
clamp(34 → 62px) · lh 1.04 · ls −0.048em · w620
Section H2
Helpful answers before your first check.
clamp(31 → 52px) · lh 1.08 · ls −0.045em · w680
Card H3
Device identity checks
20px · lh 1.35 · ls −0.025em · w680
Lead
Check IMEI and serial details, carrier and SIM-lock state, blacklist status and activation locks.
19 / 1.7 · w400 · --muted
Body
Provider data is organised into readable results so buyers, repair teams and resellers find what matters quickly.
16 / 1.65 · w400 · --ink
Body small
Return to completed results without exposing provider cost data.
15 / 1.65 · w400 · --muted
Nav / link
Services · How it works · FAQ
13px · w620 · active = 2px --moss underline
Section kicker
Common questions
11px · w740 · +0.09em upper · --moss · icon 14px · gap 7
Eyebrow pill
Readable device reports
11px · w720 · +0.045em · pill 999 · pad 7/10
Micro caption
IMEI unlocking
9px · +0.14em upper · w700 · brand lockup & table heads
03 · Component anatomy
Measured, not eyeballed.
Radii, control heights, border weights and shadow spreads — the part people usually guess at.
.button--quietbg --surface · 1px --line · radius 14 · min-h 46 · pad 10/17 · 13px w680 · gap 8 · no shadow
.button--accentbg --accent · radius 14 · min-h 46 · shadow 0 13px 30px rgba(217,123,30,.20) · the second action, never the first
.button--primarybg --primary · radius 14 · min-h 52 · pad 10/21 · the only 52px control on the page
.icon-action40×40 · radius 13 · 1px --line · bg --surface · glyph 17px
Readable device reports
.eyebrowpill 999 · pad 7/10 · 11px w720 +.045em upper · --moss on --moss-soft · 1px tinted border
Common questions
.kicker11px w740 +.09em upper · --moss · icon 14 · gap 7 · no background. The moss hue appears here and nowhere else.
The tint is the category signal: emerald = identity, amber = accounts & locks, moss = delivery. Same box, same glyph weight, only the pairing changes.
.icon-tile68×68 · radius 22 · glyph 28px line-style · tints --primary-soft / --accent-soft / --moss-soft · no border, no shadow
.card--benefitradius 26 · pad 30 · 1px --line · --shadow-soft · min-h 310 in the grid · ends with an 11px link, not a button
Blacklist statusClean
Identifier typesIMEI · SN
Saved checksHistory
.float-card & .mini-statfloat: radius 16 · pad 12/13 · gap 10 · 92% surface + blur · mini-stat: radius 11 · pad 11 · flat, no shadow
.trust-barone panel, radius 22, equal columns divided by 1px hairlines — not four cards. Item pad 22/24 · headline 19px w700 · caption 12.5px --muted
What information can I check?
The first row opens by default so the pattern is legible without a click.
.faq-itemradius 24 · pad 18/22 · summary 15px w700 --ink-strong · toggle 26×26 radius 8 on --primary-soft, rotated 45° when open · rows gap 12
Checksum looks right
.field1px --line · radius 14 · min-h 50 · mono value at +.06em · label 11px w720 +.06em upper --muted · note carries the state colour
IdentifierServiceStatus
35······2145Basic infoSaved
R5C····K2XVWarrantySaved
.data-tablehead 10px +.09em upper --muted on --surface-strong · rows divided by hairlines · identifier in mono, masked to first 2 + last 4 · status in --success w700
04 · Section patterns
The page is ten repeated blocks.
Every screen is assembled from the same short vocabulary, and the order barely changes between pages.
| Block | What makes it work |
|---|---|
| 01 · Sticky header — 74px | Translucent page colour at 88% + backdrop blur, 1px bottom hairline. Nav gap 28, header gap 24. Actions read toggle → quiet → accent, so the strongest colour sits furthest right. |
| 02 · Hero — min-height 620 | Two columns 1.15fr / 0.85fr, gap 80, padding 78 top. Headline breaks across two lines with the second in --primary. Backdrop is two very low-opacity radial washes — never a linear gradient. |
| 03 · Trust bar | One panel, radius 22, divided by hairlines. Sits directly under the hero with no section padding above it. |
| 04 · Benefit grid — 3 × card, gap 28 | Cards are min-height 310 so ragged copy never breaks the row. Each carries a different icon tint and ends with an 11px link. |
| 05 · Steps | The numeral is the decoration: 68px, weight 800, tinted to --numeral so it reads as texture. Section head is centred here, left-aligned everywhere else. |
| 06 · Gradient band — full bleed | The one saturated block, and the only place the headline goes to 62px / weight 620. The panel inside is glass on gradient, not a solid card. |
| 07 · Product split | A browser-chrome mock with a phone frame overlapping its lower-right corner — the overlap is what stops it reading as a flat screenshot. |
| 08 · FAQ — 407 / 702, gap 70 | Asymmetric: a narrow intro column against a wide list. The first row opens by default. |
| 09 · CTA band — radius 28 | Not full-bleed — a contained panel on --primary-soft with a tinted border, padding 40/44, plus a moss radial from the top-right corner. |
| 10 · Footer — margin-top 100 | Ground is #0D2018, its own value rather than a surface token. Padding 65 top / 26 bottom, column heads 12px uppercase at +.10em, links 13.5px. |
05 · Using this
What actually makes it work.
Copying hex values gets you a palette, not the feel. Six decisions do most of the work, and all six transfer to a completely different brand.
1
Hairlines, never heavy borders
Every edge is 1px and always one of two values. Structure is drawn with the lightest possible line and then separated by whitespace — which is why a dense page still reads as calm.
2
Big radii, small padding ratio
Cards run to radius 26 with 30px padding — the corner is nearly as large as the inset. Drop the radius to 8 and it becomes an ordinary dashboard.
3
One shadow, very wide and very soft
A 40px blur at 8% opacity, tinted with the ink colour rather than pure black. It reads as ambient light, not elevation. There is no ramp — panels take this one or the 80px version, nothing between.
4
Headlines are huge and tracked tight
The hero runs at −0.058em with line-height 0.98, and the negative tracking scales down with the size. Get this ramp wrong and everything else looks generic no matter how correct the colours are.
5
Colour is rationed
Long stretches of near-white, then one saturated moment: an emerald CTA, an amber secondary, one gradient band. Accents are load-bearing precisely because they are rare — the moss only ever appears as a small uppercase kicker, never as a fill.
6
Whites are tinted, blacks are not black
Surfaces carry a warm cast and the darkest text is #14241B. Nothing is #000 or a neutral grey, so the whole page sits in one temperature.
Keep these
- One shell width and one gutter for every page — 1180 / 72.
- Section padding as a constant, not a per-section judgement call.
- Kicker → headline → lead, in that order, at the top of every block.
- Body copy in --muted; only headings earn the strong ink.
- Line-style icons on one grid, in a tinted rounded square.
- Every token redefined once under a single dark-theme selector.
Where it goes wrong
- Rounding the values to a 4/8px grid. 11, 13, 26, 46, 52 are real numbers here — snapping them flattens the character.
- Adding a second gradient. One band per page is the budget.
- Using emerald and amber as primary in the same block — amber is the second action, never the first.
- Letting card copy set the row height. min-height is what keeps the grids honest.
- Inverting the palette for dark mode instead of re-pitching it per role.
- Keeping the 11px uppercase labels at that size on a phone without checking them on glass.
Transfer
Reusing the structure without borrowing the identity.
The canvas this came from documents a third-party site, so what travels is the system — the ratios, the rhythm, the component anatomy — while palette, type and marks stay ours. This build is exactly that swap.
| What was kept | What was replaced |
|---|---|
| 1px hairlines, radius 11–28, one wide soft shadow | Nothing — geometry is not brand, it is craft. |
| Constant section padding, 1180px shell, kicker→headline→lead | Padding tuned to 104px and a fluid gutter with three breakpoints. |
| Tinted whites, ink that is never black | Cast moved cool teal → warm: #F8F7F3 instead of #F5FAFA. |
| One primary, one secondary, rationed accents | Blue + coral → emerald #0F7A52 + amber #D97B1E, with moss for kickers. |
| Display face paired with a plainer body face, tight tracking at scale | Google Sans Flex → Bricolage Grotesque + Instrument Sans. |
| Full dark theme driven by one token block | Same mechanism, own values — green-black instead of teal-black. |
Source artboards are preserved in docs/reference/. They document measurements taken from a third-party page on 21 Aug 2026 and are reference material only — reuse the ratios and the rhythm, keep palette, type and marks your own.