{ "name": "Motion Interactive", "version": "1.0.0", "description": "Brand tokens for Motion Interactive. Source of truth for the web kit (tokens.css) and for any other stack (desktop splash, store assets).", "color": { "chalk": { "value": "#F3EFE6", "role": "Primary background. Warm paper, never pure white." }, "chalk-deep": { "value": "#E6E0D2", "role": "Surfaces, rules and dividers on chalk." }, "ink": { "value": "#141311", "role": "Primary text and the mono-light mark. Warm near-black, never pure black." }, "graphite": { "value": "#4B4842", "role": "Secondary text on chalk." }, "ash": { "value": "#7D786F", "role": "Large text, captions over 24px, and rules. Fails AA for body text on chalk, do not use it for that." }, "vermilion": { "value": "#E8461E", "role": "The signal colour. The present frame of the mark, large display text, and graphic accents. Not body text on chalk." }, "vermilion-deep": { "value": "#B52E0A", "role": "Vermilion for text under 24px on chalk. Passes AA." } }, "frames": { "description": "The mark is one M captured in three frames. Frame 0 is the present and is painted solid. Frames -1 and -2 are the past, painted in the base colour at reduced opacity, knocked out where a later frame covers them. Offsets are fractions of the M's glyph width (824 units at 1000 upm).", "list": [ { "frame": -2, "offsetX": -0.28, "opacity": 0.22 }, { "frame": -1, "offsetX": -0.14, "opacity": 0.5 }, { "frame": 0, "offsetX": 0, "opacity": 1 } ] }, "pairings": [ { "fg": "ink", "bg": "chalk", "use": "Body text, headings, the mono-light mark." }, { "fg": "graphite", "bg": "chalk", "use": "Secondary text, captions, metadata." }, { "fg": "ash", "bg": "chalk", "use": "Large text only (24px+, or 19px+ bold). Rules and dividers." }, { "fg": "vermilion-deep", "bg": "chalk", "use": "Links and small accent text on chalk." }, { "fg": "vermilion", "bg": "chalk", "use": "Large display text (24px+) and graphics only." }, { "fg": "chalk", "bg": "ink", "use": "Text on dark surfaces, the mono-dark mark." }, { "fg": "vermilion", "bg": "ink", "use": "Accent text and the colour mark on dark surfaces." }, { "fg": "ink", "bg": "chalk-deep", "use": "Text on raised surfaces." }, { "fg": "graphite", "bg": "chalk-deep", "use": "Secondary text on raised surfaces." } ], "type": { "display": { "family": "Archivo Black", "fallback": "'Arial Black', 'Helvetica Neue', Arial, sans-serif", "license": "SIL Open Font License 1.1", "source": "https://github.com/Omnibus-Type/ArchivoBlack", "weights": [400], "role": "Headlines and the wordmark. Always set in caps or sentence case, never letterspaced below 40px." }, "body": { "family": "IBM Plex Sans", "fallback": "'Helvetica Neue', Arial, sans-serif", "license": "SIL Open Font License 1.1", "source": "https://github.com/IBM/plex", "weights": [400, 500, 600], "role": "Everything else. 400 for reading, 500 for UI, 600 for the INTERACTIVE line and small caps labels." }, "scale": { "description": "Sizes in rem on a 16px root. Fluid sizes use clamp() between the 360px and 1280px viewports.", "steps": { "xs": { "size": "0.75rem", "lineHeight": "1.5", "tracking": "0.02em" }, "sm": { "size": "0.875rem", "lineHeight": "1.5", "tracking": "0.01em" }, "base": { "size": "1rem", "lineHeight": "1.6", "tracking": "0" }, "lg": { "size": "1.125rem", "lineHeight": "1.55", "tracking": "0" }, "xl": { "size": "1.25rem", "lineHeight": "1.45", "tracking": "-0.005em" }, "2xl": { "size": "1.5rem", "lineHeight": "1.3", "tracking": "-0.01em" }, "3xl": { "size": "2rem", "lineHeight": "1.15", "tracking": "-0.015em" }, "4xl": { "size": "2.75rem", "lineHeight": "1.05", "tracking": "-0.02em" }, "5xl": { "size": "3.75rem", "lineHeight": "1", "tracking": "-0.025em" }, "6xl": { "size": "5rem", "lineHeight": "0.95", "tracking": "-0.03em" } }, "fluid": { "display": "clamp(2.75rem, 1.5rem + 5.5vw, 6rem)", "title": "clamp(1.5rem, 1.1rem + 1.75vw, 2.5rem)", "lead": "clamp(1.125rem, 1rem + 0.5vw, 1.375rem)" }, "label": { "size": "0.75rem", "lineHeight": "1.4", "tracking": "0.14em", "transform": "uppercase", "weight": 600 } } }, "space": { "unit": "4px", "scale": { "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem", "5": "1.25rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem", "16": "4rem", "20": "5rem", "24": "6rem", "32": "8rem" }, "gutter": "clamp(1.25rem, 4vw, 4rem)", "measure": "62ch" }, "radius": { "none": "0", "description": "The brand has no rounded corners. Frames are rectangles." }, "motion": { "principles": [ "Frames, not fades. Things arrive in discrete steps, like a stop-frame sequence, not a smooth tween.", "The brand runs at 12.5 frames per second. One frame is 80ms. Every duration is a whole number of frames.", "Leave a trail. When something moves, its previous position may linger for a frame or two at reduced opacity, then vanish. That is the mark, in motion.", "Arrive with weight. Continuous motion, where it must exist (hover, scroll), decelerates hard and settles. Nothing bounces, nothing floats.", "Exit fast. Leaving takes half the time of arriving and never trails.", "Motion is optional. With prefers-reduced-motion the finished frame is shown at once. The static design must look intended, not broken." ], "frameMs": 80, "duration": { "frame": "80ms", "hold": "160ms", "step": "240ms", "sequence": "480ms", "long": "720ms" }, "easing": { "strobe3": "steps(3, end)", "strobe2": "steps(2, end)", "settle": "cubic-bezier(0.2, 0, 0, 1)", "exit": "cubic-bezier(0.4, 0, 1, 1)" }, "enter": "Opacity 0 to 1 over 240ms with steps(3, end). Three frames: 33%, 66%, 100%. No transform.", "exit": "Opacity 1 to 0 over 80ms, one frame, no easing. Elements leave, they do not fade.", "hover": "Colour and underline changes are instant (0ms). Position changes, if any, use settle over 160ms.", "mark": { "description": "The animated mark. One M travels from frame -2 to frame 0 in two jumps, leaving a ghost at each position it vacates. The wordmark text then enters in three-step opacity. Total 720ms. Coordinates are in the symbol's own units where the M glyph is 824 wide.", "totalMs": 720, "tracks": [ { "layer": "frame0 (solid M)", "property": "translateX", "keyframes": [ { "t": 0, "value": "-230.7 (-0.28 x 824)" }, { "t": 160, "value": "-115.4 (-0.14 x 824)" }, { "t": 320, "value": "0" } ], "easing": "steps(2, end) over 0-320ms, i.e. hold each position for 160ms" }, { "layer": "frame-2 (ghost, opacity 0.22)", "property": "opacity", "keyframes": [ { "t": 0, "value": 0 }, { "t": 160, "value": 0.22 } ], "easing": "step at 160ms" }, { "layer": "frame-1 (ghost, opacity 0.5)", "property": "opacity", "keyframes": [ { "t": 0, "value": 0 }, { "t": 320, "value": 0.5 } ], "easing": "step at 320ms" }, { "layer": "OTION", "property": "opacity", "keyframes": [ { "t": 320, "value": 0 }, { "t": 400, "value": 0.33 }, { "t": 480, "value": 0.66 }, { "t": 560, "value": 1 } ], "easing": "steps(3, end) over 320-560ms" }, { "layer": "INTERACTIVE", "property": "opacity", "keyframes": [ { "t": 480, "value": 0 }, { "t": 560, "value": 0.33 }, { "t": 640, "value": 0.66 }, { "t": 720, "value": 1 } ], "easing": "steps(3, end) over 480-720ms" } ], "reducedMotion": "Show the finished lockup immediately. No animation." } }, "logo": { "unit": "The stem width of the M. In the symbol's own units that is 203 (the M glyph is 824 wide, 688 tall, at 1000 units per em).", "clearSpace": "One stem width on every side, measured from the outermost ink, including the ghost frames.", "minSize": { "symbol": "16px tall. Below 24px the ghost frames read as a soft edge, which is fine.", "primary": "120px wide. Below that use the symbol.", "stacked": "96px wide.", "inline": "160px wide." }, "variants": ["symbol", "primary", "stacked", "inline"], "colourways": ["colour", "mono-light", "mono-dark"], "rules": [ "The ghost frames always trail to the left. The M moves right. Never flip the mark.", "Never add more or fewer frames, and never blur them. Three flat frames, always.", "Never rotate, skew or outline the mark.", "On photography or busy backgrounds use mono-light or mono-dark on a chalk or ink tile.", "Do not recolour the ghost frames. They take the text colour at 50% and 22% opacity." ] }, "voice": { "summary": "Short, confident, a bit dry. British without being twee. We say what we are doing and stop.", "rules": [ "Short sentences. If a sentence has a comma and an 'and', it is probably two sentences.", "No adjectives you would not say out loud to a friend. Nothing is 'immersive', 'passionate', 'crafted' or 'unforgettable'.", "Say what it is, not what it feels like. 'A card game about tax returns' beats 'an emotional journey'.", "Understate. If it is good, people will notice. If we have to tell them, it is not.", "First person plural is fine. It is one person, but a studio is a 'we'.", "Show the work, skip the hype. Devlogs, clips and an early Steam page are how people find a game, so share them freely. 'Big news soon', countdowns and vague teasers are not, so never post them.", "Dry humour is allowed. Jokes about the industry are not." ], "examples": { "yes": [ "Motion Interactive makes games. The first one is in development.", "We are based in the West Midlands, which is not a marketing decision.", "Something is in development. We will say what when it is worth saying.", "Press enquiries: hello@motioninteractive.dev. We read everything and reply to most of it.", "The Steam page is up. Wishlisting it helps more than you would think." ], "no": [ "We are passionate about crafting immersive experiences that push the boundaries of play.", "Get ready for a revolutionary new take on the genre.", "Big things are coming. Stay tuned!", "Join our journey as we build the game of our dreams." ] } } }