Mobbin — UI & UX design inspiration for mobile & web apps

Design Specification — Mobbin — UI & UX design inspiration for mobile & web apps

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#CE2B04). All type is set in "Inter". Detected font weights: 300, 380, 400, 450, 456, 570, 600, 652, 700, 900. Detected style signatures: technical / mono accents.

Logo asset(s): https://framerusercontent.com/images/oPS7zaP2iinQmw4du221pyfo.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• linear-gradient(#000 85%,#0000 100%)
• linear-gradient(#000 95%,#0000 100%)

Typography

Primary typeface: Inter — stack: "Inter"

Font stacks (most used first)

• "Inter"
• var(--framer-code-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))
• var(--font-family)
• var(--framer-font-family)
• "Geist Mono"
• "M Saans 600"
• "M Saans Variable Light"
• "M Saans 456"
• "M Saans 652"
• "M Saans Medium Italic"

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 380, 400, 450, 456, 570, 600, 652, 700, 900

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 8px 40px #0000000a

Layout

Container max-width: 810px

Breakpoints

• 720px
• 809.98px
• 1199.98px
• 1200px

Source Design Tokens (CSS custom properties)

:root {
  --token-3e7d342c-a5e5-4556-ae33-887ada111c73: #141414;
  --token-662d2a7f-e597-4a32-be93-c2f821051388: #717171;
  --token-5707e2a9-c8d7-465c-a544-e581e05fec20: #adadad;
  --token-d42e56aa-71c9-4894-94d6-73b495623e87: #fff;
  --token-194ef549-e035-4f73-8575-0d0cbff5bb36: #fff;
  --token-df820a06-1784-4115-b5dc-72ce279935f3: #adadad;
  --token-0beb7490-e400-4a55-9f89-085170c41a65: #adadad;
  --token-7eb91d81-d2de-4d10-804a-fafa6159b8c2: #0065ff;
  --token-dc680f4d-ffb1-476f-ae6a-8b69457cfdf3: #0079ff;
  --token-746b29d3-48ed-4272-8c0b-c0681e9cc4c4: #141414;
  --token-847127aa-19d6-45c6-bf84-f7c8a016c354: #262626;
  --token-70a2473b-9c28-4926-a9e4-a9f3c02081a9: #217f08;
  --token-3b637242-e729-4602-918d-04a2dbcc1817: #fff;
  --token-ccd502a6-05e9-40de-b816-6314aa51cb29: #8b4e00;
  --token-f116450f-6387-4cce-812c-e971732201b7: #fff;
  --token-7bf4c5de-e69e-49e1-b80e-27a14cd27f03: #ce2b04;
  --token-cbaafa3e-1c9f-4d4d-8019-334d7ef161a3: #fff;
  --token-ab755c7f-1e05-4c83-86ad-3197b87d17a7: #ce2b04;
  --token-bebfc192-9950-4c1c-9ed3-2f6daf4d7424: #40404014;
  --token-d8444109-13f1-43be-a611-cd94a7286890: #fff;
  --token-7c8951c3-ce46-4aa1-86b7-2cc61aca85ed: #0009;
  --token-6e197c37-e5e0-4ab7-86e7-060cd0d9e592: #4040401a;
  --token-f43ee7a6-eb3c-4060-9079-58fa2b6a69a7: #fff;
  --token-1e3b28be-e4b9-499d-b5e8-2ea118c7a6e3: #4040400f;
  --token-7cc60c9a-826b-4e45-923b-cb9f0a2a8e6c: #4040400f;
  --token-3eb72dff-069e-43c7-88dc-6761a230db5b: #4040401a;
  --token-3ba8affa-f2f7-41c0-a0a3-be41ff216dce: #40404014;
  --token-726361a7-7287-4a5b-9dd4-e50c7ffab262: #4040401f;
  --token-c3c68325-a431-4923-9fc7-cf35ccc48dd6: #41414129;
  --token-34d12eee-059c-4216-ad36-1c29ea71b980: #4141413d;
  --token-6cb7ee71-748a-4dc7-a378-e20d47d33067: #141414;
  --token-f73c2b95-d22d-4675-b02d-4b20837f7a50: #262626;
  --token-f66a9581-aaa3-49a0-a5bd-84c609f99bf6: #0065ff;
  --token-a7a7126d-f520-4f96-b3a3-510345b93ff6: #0047f0;
  --token-6296d2d1-9466-48ce-82be-32772185684c: #3ba213;
  --token-af890351-712c-4347-aed3-34a2188c0f4f: #a86500;
  --token-21d30aa7-ef22-4b1c-bc36-346cd19be6f8: #df4300;
  --token-9e03bc27-e50b-4a83-86e6-090acad3825f: #ce2b04;
  --token-1771de71-4d6a-4fcb-85a1-51183aea6937: #ffe3d8;
  --token-577df7fe-d6f9-46b4-bd85-4c78210079ad: #ffc8b0;
  --token-60f9d13a-36a9-4222-9191-e573b296ae9a: #fff0;
  --token-f3c88806-b7d3-49b6-b453-bf83ce72eade: #ffe3d8;
  --token-b96b79ae-34e6-4b4e-949f-4d676dd8c0a4: #4040400f;
  --token-a2e71ff0-512a-4a83-8756-a5d194d5d834: #4040400f;
  --token-88fcd038-c7ae-4802-b38e-49098cee3c0d: #141414;
  --token-7afa8de7-98fe-4964-aa92-10d17a3adf74: #141414;
  --token-53cc593c-a003-41f4-86cf-9e7f4861c843: #262626;
  --token-8daf290f-7b3c-4c86-89af-2b02712d8073: #40404014;
  --token-27359ecf-5352-493c-89ae-467348391e49: #41414129;
  --token-474dfaae-6c0b-42e0-ba2a-e1be3c4f0e51: #41414129;
  --token-cc20525a-66d3-4eca-ad99-4cfc4b507189: #4141413d;
  --token-5b2044cf-7b02-44dd-a728-d4fa0dd62e93: #fff;
  --token-b74b5379-8971-434e-8569-bcb8dade9253: #ededed;
  --token-d3ffe7ab-2390-4837-a891-ff4fa735d46e: #0065ff;
  --token-dab8d9f2-1e0d-4179-96f2-2c5f831e5887: #0047f0;
  --token-1eda22c6-298e-4c8b-a13b-c943e09cbad0: #3ba213;
  --token-8dd1d1f7-a784-4d07-bc94-2c09f1ab6736: #217f08;
  --token-cad4b2d5-103b-4105-813f-6e05204646a9: #a86500;
  --token-8e6c6972-37ab-4ca9-90ac-f0f04d862b42: #8b4e00;
  --token-6cb3a730-2861-452a-ab6e-2856fce41d09: #df4300;
}

Do's and Don'ts

Do

• Do reserve the accent #CE2B04 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 380, 400, 450, 456, 570, 600, 652, 700, 900.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #0065FF;
  --color-accent: #CE2B04;
  --color-background: #FFFFFF;
  --color-surface: #EDEDED;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #ADADAD;
  --color-border: #404040;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: "Inter";
  --font-size-label-sm: 12px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --shadow-md: 0 8px 40px #0000000a;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 80px;
  --container-max: 810px;
}