Point first
Lead with the conclusion. The reader should be able to stop after the first sentence and still act.
Visual identity
Brand bookSmedley Group
Foundations
The mark and its lockups, colour, type, voice, the one surface, pictures and the grid everything sits on.
Foundations
The logo
A single drawn lockup in one colour, placed in the same corner at the same size every time. Its consistency is what lets everything else in the system move.
Primary lockup
Ink on white #F0F0F0
A three-bar diagonal glyph set left of a two-line wordmark. A full-height vertical divider separates Smedley Group from the division name, here Advanced Technology. The lockup is drawn as a single asset: never rebuild it from live text.
Reversed
White on the signature surface
A 100 % white knockout on the black to navy gradient, on photography and on any value darker than Mist #8497B0. The logo is monochrome in both directions: it carries no colour of its own.
Which way it goes
Ink on light grounds, white on anything darker than Mist
Canvas
Cloud
Pale Blue
Mist
Steel
Slate
Deep Navy
The surface
Clear space and minimum size
The cap height of the wordmark on every side
Clear space on all four sides equals the cap height of the wordmark, about the width of one bar of the glyph. Nothing enters this field: type, rules, image edges or charts. The lockup is never narrower than 110 px on screen or 30 mm in print.
Placement
Same size, same corner, every time
| Slides | Bottom-left on every slide, origin x 0.50 in, y 4.96 in |
| Size on a slide | 2.26 × 0.44 in, fixed |
| Clear zone below | 0.22 in to the slide edge |
| Interface | Top-left of the header, around 150 px wide |
| Minimum width | 1.20 in, 30 mm or 110 px |
Construction
Drawn in glyph units, on the 56 × 86 artboard
| Glyph | Three bars of one width on one pitch, inside a 55.0 × 87.0 envelope |
| Module | 23.75 |
| Long bar | 71.3 × 14.2, three modules |
| Short bars | 47.7 × 14.2, two modules, offset by one |
| Pitch and gap | 17.9 centre to centre, 3.7 clear |
The wordmark
Sora SemiBold, two lines
| Type | Sora SemiBold, two lines, leading 0.94, tracking −0.025 em |
| Divider | A full-height rule, 4.6 units wide and 62 tall, never a slash or a hyphen |
| Spacing | 16 units from glyph to wordmark, 17 either side of the divider |
| Glyph alone | Only as the app icon and favicon, 16 px at the smallest, never beside type |
Never
Build it from the kit, never by eye
Recolour itInk or white only. It carries no colour of its own.
Add effectsNo shadow, glow, outline or bevel.
Distort itNo stretching, condensing or rotating.
Box itNo white plate behind it on a dark ground.
Separate the glyphThe glyph stays with the wordmark. App icons and favicons are the exception.
Swap the dividerNever a slash or a hyphen in place of the rule.
Retype itAlways the drawn asset, never live text in another font or weight.
Crowd itNever on a busy passage of an image.
Foundations
Business lockups
One mark for the group and one lockup per business. The glyph, the wordmark and the divider never change; only the name after the divider does. Every lockup is monochrome: ink on white, white on the surface.
Smedley Group
The group itself: corporate, investor and group-wide material.
Advanced Technology
Hardware and software engineering, for the group and for clients in motorsport, sport and automotive.
Insight Labs
Sports data, simulation and modelling for fan engagement.
FAT Racing
Driver development: funding drivers promoted from the league into Formula 4.
FAT Karting League
The global karting series, run by hubs and overseen from the UK.
Product names
Product Blue #ADB9CA, under the division only
TalentID
A product is named under the division on its title slide or cover, in Sora SemiBold in Product Blue, tracked −0.024 em. The lockup itself stays white. Product Blue sits on the surface only: on white it falls to 1.7 : 1.
| Division name | Two lines, set in Sora SemiBold at the same size and leading as Smedley Group |
| Line break | Break where the name reads in two parts: Advanced / Technology, FAT Karting / League, FAT / Racing, Insight / Labs |
| Divider | Always present between the group and the business, 4.6 units wide and 62 tall |
| Order | Group first, business second. Never abbreviated, never stacked vertically |
| Colour | Ink or white, chosen by the ground. No business has a colour of its own |
| Files | Every lockup in white and ink, outlined, in Resources |
FAT Karting League has its own brand
Fans, drivers and hubs meet FKL through its own identity: the FAT Pill logo, FKL Blue #0000FF and ST Rapid Black Extended, as set out in the FKL brand guidelines. Use the lockup above only where the group speaks about the league: investor and corporate material, TalentID and internal tools. On FKL's own material the group appears, if at all, as an endorsement. See Co-branding.
Foundations
Colour
A near-monochrome palette: ink and navy for structure, one pale blue for light, and a tightly rationed green and red that carry meaning rather than decoration.
Core
The spine of the system
Everything structural is built from Ink, Deep Navy and Pale Blue. The navies all derive from Steel; Mist and Pale Blue are the light that falls on them.
Surface and neutral
The ground, panels and quiet text
The ground is white. White is for type reversed out of the gradient and for photo plates.
Signal
Used sparingly, always in pairs
Signal colours never appear as a surface, a background or a chart fill: only as short bold labels on their own tint. The palette carries no red, orange or yellow outside the negative pair.
On screen
How the palette becomes two themes
The light theme is the default: white ground, Ink type, Slate and Steel for quieter text, grey hairlines. The dark theme sets the same parts on #10141A. Anything drawn in the signature surface (cards, menus, dialogs, toasts) carries the dark theme wherever it sits.
| Pairing | Use, contrast |
|---|---|
| Ink on white | Titles and body copy. 21 : 1 |
| Slate and Steel on white | Secondary copy and quiet labels. 10.7 : 1 and 7.7 : 1 |
| White on the gradient | Cards, the primary action, the strapline band. 14.5 : 1 at the navy end |
| Negative on its tint | Problems, errors. 5.3 : 1 |
| #007A3D on the positive tint | Gains on screen; #00B050 is too light for small type. 4.6 : 1 |
| Never | Mist or Caption for text on white (3.0 : 1 and 2.6 : 1), signal colours as fills |
Foundations
Typography
Sora in three weights, tracked tight at display sizes. The weight does the work that colour and rules do in other systems. No italics, no fourth weight, no second family.
One family, three weights
Geometric grotesque, open licence
Sora
Regular may be set bold for emphasis inside a sentence. Uppercase is kept for two things: card titles and the eyebrow over a title.
Light 300Card body, captions
Regular 400Running text, bullets
SemiBold 600Titles, labels, straplines
Figures
Sora with tabular figures, never a mono family
1:02.418
| Measured values | Times, amounts and codes in Sora with tabular figures, so columns line up |
| Units | Always given, with a space: 0.18 s, 57 %, 1,040 mm |
| Tracking | Display sizes −0.024 em, the book's −0.68 pt at 28 pt. 16 px and below normal |
Interface scale
px, from the page title to the 11 px floor
Driver poolPage title · SemiBold 32, −0.024 em
0.18 sFigure · SemiBold 28, −0.024 em, tabular
Remove from shortlist?Dialog title · SemiBold 20
Data inputsSection label · SemiBold 15
Sessions appear here after the first timed lap at a hub.Body · Regular 13
Transponder IDField label · SemiBold 12; help text Regular 12
Timing dataCard title · SemiBold 12 uppercase, +0.02 em
03 · IdentityEyebrow · SemiBold 11 uppercase, +0.2 em, Steel
Laps, sectors, split timesCaption · Light 11, the floor for interface text
Slide scale
Absolute sizes on a 10 × 5.625 in canvas, pt
| Role | Weight, size, leading | Tracking | Where |
|---|---|---|---|
| Cover headline | SemiBold 34.2, leading 34.2 | −0.68 pt | Product or division name on the title slide |
| Slide title | SemiBold 28, leading 34.2 | −0.68 pt | One per slide, sentence case, at y 0.44 in |
| Strapline | SemiBold 16 | 0 | White on the dark band |
| Lead statement | Regular 14, set bold | 0 | Full-width claim directly under a title |
| Section label | SemiBold 12 | 0 | Pill and column headers |
| Column header | SemiBold 11 | 0 | Above a divider |
| Card body | Light 10.5, leading 1.35 | 0 | Long-form copy inside a dark card |
| Body and bullets | Regular 10, leading 1.4 | 0 | Default running text |
| Card title | SemiBold 9 | 0.02 em | Uppercase, inside cards |
| Column subtitle | SemiBold 7 | 0.02 em | Caption #9AA0A8, under a column header |
| Card caption | Light 7, leading 1.3 | 0 | Two-line descriptor under a card title |
Foundations
Voice
We write the way a good engineer explains a result: the point first, specific, calm. Plain words, full sentences, and numbers that mean something.
Specific
Numbers with units, names with places, dates in full. 0.18 s, not nearly there. FKL Łódź, not a hub. 26 September 2026, not 26/09.
Calm
Confidence comes from facts, not volume. Sentence case, no exclamation marks, no capitals for emphasis, no hype words.
| Moment | Write | Not |
|---|---|---|
| Headline | Maja is ready for an F4 test day this winter. | UNLEASH YOUR RACING POTENTIAL! |
| Data | 0.18 s off the F4 entry pace, closing by 0.03 s a session. | So close to greatness! |
| Error | The transponder ID is missing. Add it and save again. | Oops! Something went wrong. |
| Action | Add to F4 shortlist | Submit |
| Empty state | Sessions appear here after the first timed lap at a hub. | Nothing to see here yet :) |
| Strapline | Our model isolates performance from contextual factors. | Key findings |
Straplines
One sentence, the conclusion
A strapline closes a slide or a view with what the reader should take away. One sentence, one idea, no punctuation beyond a full stop. It never restates the title, and a view carries one at most.
| Title | Data inputs |
| Strapline | Every session becomes a comparable measure of the driver |
| Not | Here are our data inputs |
This is moneyball applied to motorsports
Our model isolates performance from contextual factors
| Speaking for | Tone, in the same plain words |
|---|---|
| Smedley Group | Considered and confident. The long view, stated once |
| Advanced Technology | Precise and measured. Show the method: what was measured, how, and how sure we are |
| Insight Labs | Clear and curious. The finding first, then the model behind it |
| FAT Racing | Direct and factual. Short sentences, present tense, names first |
FAT Karting League writes in its own voice, set out in the FKL brand guidelines: direct, bold and future-forward.
Foundations
Gradients and surfaces
Everything dark in this system is the same 45° gradient with the same edge light. That single decision is what makes cards, tiles, circles and bands read as one object. The ground stays flat Canvas.
The signature surface
One fill for everything dark
| Angle | 45°, top-left to bottom-right |
| Stops | Ink #000000 at 0 % to Deep Navy #222A35 at 100 % |
| CSS | linear-gradient(135deg,#000 0%,#222A35 100%) |
| In the book | var(--sg-surface), or class .sg-surface with the edge light |
One fill does all the work: cards, icon tiles, the intelligence circle, the strapline band and the cover. Because it is angular rather than radial, shapes of any proportion sit together without the gradient breaking.
Edge light
A 1 px stroke, pale at the top, dark at the foot
- #8497B0 Mist, at the top
- #ABC0E4 Pale Blue, at 53 %
- #333F50 Slate, at the foot
| Stroke | 0.5 pt on slides, 1 px on screen |
| CSS | linear-gradient(180deg,#8497B0 0%,#ABC0E4 53%,#333F50 100%), var(--sg-edge) |
It reads as a single light source above the page and is what separates a card from the ground. No shadow, glow or bevel does that job.
What it makes
Cards, tiles and the one circle, all in the same fill
Timing dataLaps, sectors,
split times
split times
TelemetrySpeed, throttle,
brake pressure
brake pressure
Anything drawn in the surface takes class sg-dark, so the text, fields and buttons inside it read in the dark theme. The circle marks the centre of a process, once per view at most; it is the only surface that is not a rounded rectangle.
Divider line
A grey hairline, solid to 83 %, then fading to nothing
Data inputsWhat we collect
A hairline that holds solid for 83 % of its length, then fades to zero. It sits under every section label and never closes a box: the fade is the point. Use .shead for a section header and hr.fade on its own.
Strapline band
The conclusion, dark or light
This is moneyball applied to motorsports
Dark: the signature surface with white Sora SemiBold, centred. On a slide it runs full bleed, 0.45 in tall at y 4.37 in, in 16 pt.
Our model isolates performance from contextual factors
Light: solid Cloud #D6DCE5 with black type, 11 pt on a slide. Used when the area above is already dense with dark cards, so the band recedes instead of competing.
Every slide or view carries at most one band. It is the conclusion, not a caption.
| Never | A gradient at any angle but 45°, a radial gradient or glow, a tinted wash behind content, drop shadows or bevels, a second dark fill |
Foundations
Imagery
Documentary photography of the real environment: track-side, in the paddock, in the seat. Real people doing real work, in available light, with no filters and no stock gloss.
Maja Kowalczyk, FKL Łódź, 26 September 2026
| Subject | Track-side, the paddock, in the seat. People first, then machines |
| Light and grade | Available light, true colour. No filters, no tint, no stock gloss |
| Shape | Hard-edged rectangles, 4.62 × 2.95 in in the two-up layout, or full bleed. No masks, cut shapes or rounded frames |
| Caption | White Sora SemiBold 14 pt (14 px on screen) over the lower left of the frame, with no plate |
| Other text | Beside or below the picture, never over it |
| The logo | White knockout on photography, clear of any busy passage |
| Facts | Real people named, real numbers sourced |
Foundations
Layout and grid
A 16:9 canvas with fixed margins, a fixed title position, a four-column field and a full-bleed conclusion band. Every slide is a variation on this frame, and every screen keeps its order.
Canvas
| Slide size | 10 × 5.625 in, 16:9 |
| Background | White #FFFFFF, solid, on every slide |
| Side margin | 0.46 in left and right |
Vertical rhythm
| Title block | y 0.44 in, 0.46 to 0.55 in tall |
| Content | y 1.12 to 4.22 in |
| Strapline band | y 4.37 in, 0.45 in tall, full bleed |
| Logo | x 0.50, y 4.96 in, 2.26 × 0.44 in |
Four-column grid
| Column origins | 0.46, 2.78, 5.10, 7.42 in |
| Column width | 2.05 in |
| Gutter | 0.27 in |
| Wide variant | 1.93 in columns at 0.44, 2.78, 5.11, 7.44 in |
Two-up slides split the grid down the middle: a 4.62 × 2.95 in image on one side, stacked label-and-content blocks on the other. Nothing but the band and full-bleed imagery touches the edge.
On screen
The same frame, measured by the window
| Ground | White #FFFFFF, #10141A in the dark theme |
| Side margin | Page gutter 32 px, 16 px on phones; app padding 24 px, 16 px under 480 px |
| Title | The page title in SemiBold 32 at the top, with one quiet line of context |
| Content | The one lead element, then calmer sections, each opened by the divider |
| Columns | Four at most, with 16 or 24 px gutters; metrics two or four across |
| Strapline | One at most, closing the view, inside the margins |
| Logo | Top-left of the header, around 150 px wide, never under 110 px |
Columns by app width
AppScreen lays out by its own width, from 260 px
260 pxNarrow, one column
480 pxHalf, two columns
800 pxWide, main and a 280 to 320 px side column
1200 pxDesk, up to four columns
Apps respond to the width of their own window, never the viewport, because an app may fill the screen or sit in a 260 px column of the desk. Nothing scrolls sideways.
At work
Drawings and data, the same system across every business, and how the mark moves.
At work
Drawings and data
Where something is measured, built or read, the system draws it plainly. Technical drawings sit on white in ink, measured in Steel; values are Sora with tabular figures; and green and red appear only where a number has gone up or down. The same rules serve a kart, a sensor housing and a results table.
Drawings
The drawing ground
Canvas, or the signature surface when reversed
Drawings sit on the page's own ground, with no grid behind them. The part is drawn in Ink, set out in grey hairlines and measured in Steel. Reversed on the signature surface, the part turns white and the measurements Pale Blue. Labels and values are set in Sora; a value that needs attention is set in the negative red, as text and nothing more.
Every drawing carries a title block: sheet, subject, place and date in ruled cells. Dimensions end in short ticks at 45 degrees, or straight ones, never arrowheads.
| On white, reversed | Line | Use |
|---|---|---|
| Object line | Ink, 1.25 px; white when reversed. What exists: the outline of the part. | |
| Construction line | Pale Blue, 0.75 px. How it was set out: modules, envelopes, extensions. | |
| Centre line | Steel, long and short dash; Pale Blue when reversed. Axes and symmetry. | |
| Hidden or planned | Slate, dashed; Cloud when reversed. What is out of sight or not built yet. | |
| Dimension | Steel; Pale Blue when reversed. Short ticks at 45 degrees, or straight, never arrowheads. The value in Sora above the line. | |
| Callout | A dot on the part, a shelf to the label in the text colour. Balloons name items in a set. |
Setup sheet
The kart in plan view, front at the top, dimensions in mm
- Sheet
- Setup
- Hub
- FKL Łódź
- Class
- Cadet
- Driver
- Maja Kowalczyk
- Session
- Qualifying
- Date
- 24 September 2026
The kart in Ink, centre and dimension lines in Steel outside it, one large figure per corner on a leader to its tyre. The rear surface temperatures sit above the 50 °C working window, so they are the only red on the sheet. The same drawing works for a chassis, a sensor housing or a simulator rig.
Tool icons
Tools
24 px grid, 1.5 px stroke, rounded ends and joins
Drawn like every other icon, on the same keylines. Hand tools lie on the 45 degree diagonal, head to the top right; instruments sit level, because they read true. Each tool sits white in an icon tile on the signature surface, never loose on white and never in a signal colour. Tool icons mark engineering work: setup, service, hardware and data. They live in the icon library with the rest.
| Lean | 45 degrees, head to the top right, hand tools only |
| Live area | 20 px inside the 24 px square, one idea per tile |
| Sizes | 16, 24, 32 and 48 px; 32 px tiles in interfaces, 48 px icons on plates |
Data
Timing table
Qualifying, FKL Łódź, cadet, 24 September 2026
| Pos | Driver | Best | Gap | Places | S1 | S2 | S3 |
|---|---|---|---|---|---|---|---|
| 1 | KOWMaja Kowalczyk | 1:02.418 | Leader | +1 | 20.904 | 20.771 | 20.743 |
| 2 | HARLeo Hartmann | 1:02.521 | +0.103 | −1 | 20.951 | 20.868 | 20.702 |
| 3 | MEHAarav Mehta | 1:02.977 | +0.559 | 0 | 20.887 | 21.101 | 20.989 |
Positions are rounded chips; the leader's takes the selected fill. Places gained since the last run read in positive, places lost in negative, as text. The fastest time in each sector is set in positive SemiBold.
Readouts
Value, then unit, in Sora with tabular figures
Speed87.4km/h
Throttle100%
Brake0.0bar
Delta−0.183s
Anything read off an instrument is set in Sora with tabular figures: lap and sector times, channels, units and axis ticks. Values keep a true minus and a fixed number of decimals so columns never jitter. A gain or a loss is told by the colour of the number, never by a filled bar.
Position
P1P2P3P4
A place in an order: a grid slot, a ranking, a sheet. A rounded chip in SemiBold with tabular figures; the leader or the current item takes the selected fill, the rest the quiet tint.
Against a limit
Index against F4 entry82.6
F4 entry 80.02.6 above
A value against a threshold: the subject in the text colour on the quiet track, the limit as a short mark in the accent. Over or under is said in words with a signal label.
Steps
Hub trial
FKL season
F4 test day
F4 seat
Progress through a known sequence: done steps in the text colour, the current one half filled and SemiBold, the rest in the quiet tint. The last step needs no special mark.
At work
Across the group
One system serves the whole group. Smedley Group, Advanced Technology, Insight Labs and FAT Racing share the same palette, the same surface and the same type; only the division name in the lockup changes. FAT Karting League keeps its own brand.
One system, four names
What changes from one division to the next
Nothing in the look tells the divisions apart: not a colour, not a typeface, not a shape. The name to the right of the divider says who is speaking, and the work does the rest. A product takes its name in Product Blue under the division name, in a title on the signature surface, and nowhere else.
| Part | Everywhere in the group |
|---|---|
| Palette | Ink, navy and Pale Blue for structure; green and red only as labels |
| Surface | The white ground and one 45 degree signature surface for everything dark |
| Type | Sora in Light, Regular and SemiBold, with tabular figures for numbers |
| Lockup | The glyph, Smedley Group, the divider and the division name |
| Product name | Product Blue #ADB9CA under the division name, titles only |
The divisions
| Division | What it does | Typical material |
|---|---|---|
| Smedley Group | The group itself | Investor and corporate material, group policies, this book. The glyph and Smedley Group alone, with no division name |
| Advanced Technology | Hardware and software engineering for the group and for clients in motorsport, sport and automotive | Product pages, specifications, technical drawings, proposals |
| Insight Labs | Sports data, simulation and modelling for fan engagement | Predictions, dashboards, broadcast and fan graphics, reports |
| FAT Racing | Funds and develops drivers promoted from the league into Formula 4 | Driver reports, partner decks, team kit and paddock material |
| FAT Karting League | The global karting series, run by hubs and overseen from the UK | Its own brand: the FAT Pill, FKL Blue and ST Rapid. Never restyle it in Smedley Group colours. League data shown in a group app stays in group styling |
The same parts, different work
Advanced TechnologyA product title and its offer
TalentID
Talent identification for karting hubs, from lap data to an F4 shortlist.
Timing dataLaps, sectors,
split times
split times
Driver profilesPace, consistency,
racecraft
racecraft
PathwayFrom FKL
to an F4 seat
to an F4 seat
Every driver measured on one timebase
Insight LabsA fan prediction
Prediction · British F4, Donington Park
Who takes pole on Saturday
Leo Hartmann41 %+6 pts
Maja Kowalczyk33 %−2 pts
Aarav Mehta14 %+1 pt
Change since Friday practice. Model run 26 September 2026, 18:00.
Our model isolates performance from context
FAT RacingA driver report
MKMaja KowalczykFKL Łódź, cadet, 14F4 shortlist
Race pace
Consistency
Wet running
Racecraft
Maja is ready for an F4 test day this winter
Smedley GroupAn investor update
Investor update · Q3 2026
One ladder from karting to Formula 4
Running cost against petrol karting
95 %lower
Drivers promoted to F4
3+1 this season
Four divisions, one kit of parts: the same surface, content cards, chips, strapline and figures. Only the name in the lockup and the work change. Product Blue appears once, for TalentID.
At work
Motion
Motion brakes: fast in, hard stop, like a car arriving on its marks. Each view has one moment and no more. The logo's moment is the hero: the lockup draws itself, flat, in ink on white, white on the dark theme. No box, no glow: the drawn asset and nothing around it.
- 1The bars
The three bars draw one after another, each from its upper end down the diagonal: the top bar at 0.2 s, the long bar at 0.38 s, the bottom bar at 0.56 s, 0.7 s each.
- 2The group
At 0.85 s Smedley Group reveals from left to right over 0.9 s, moving the last 6 px into place.
- 3The divider
At 1.35 s the divider grows from its centre to full height over 0.6 s.
- 4The division
At 1.55 s the division name reveals the same way, and the lockup holds still at 2.45 s. It is the outlined artwork from the kit throughout, never live text.
- 5Stillness
Everything is in place by 2.5 s and nothing moves again. The sequence plays once; Replay runs it on request.
- 6The press
A pressed control scales to 98 % for 80 ms and comes back. The primary action's hover gradient fades in over its resting one in 0.45 s; nothing moves.
| Brake | cubic-bezier(.16, 1, .3, 1), for anything arriving |
| Arrive | 0.8 to 0.9 s; parts that belong together follow 0.2 s apart |
| Press | Scale to 98 % for 80 ms, then back |
| Progress fill | 1.4 s, quint-out, bar by bar |
| One moment per view | No loops outside loaders, no blinking, no hover choreography, no streaks or wipes |
| Reduced motion | Show the end state at once |
At work
The glyph as progress
The three bars are the three rungs of the ladder: FAT Karting League, Formula 4, Formula 1. One value runs through them in order, so a driver completes the whole mark only on reaching F1. The same three bars are the loader.
57%
of the way to F1. Filled bars are drawn in the text colour, black on white and white on dark, over the same bar in the quiet tint, with the logo's square ends. Each bar fills from its upper end down the lean, and the next starts only when the one before is full.
57%
FKL0 to 33 %, the bottom bar
F433 to 67 %, the long bar
F167 to 100 %, the top bar
The loader
For waits without a known length: the three bars brighten in turn, bottom to top, in the text colour. It is the one loop the system allows. With reduced motion the bars hold still.
When to use it
The gauge shows progress along the driver pathway only. For a task with a known length use a progress bar; for steps use the steps pattern. Label the value in words and as a percentage.
Interface
Every control, screen and chart, built from the foundations.
Interface
Controls
Everything a person presses, types into or chooses. Controls are rounded and sit on white. What is chosen, checked or current takes the selected fill, the signature surface with its edge light (Pale Blue in the dark theme). Everything else is a hairline and weight.
Actions
Buttons
One primary per view, in the selected fill with white type. Secondary is a Steel hairline on white. Text buttons carry a grey underline that turns to the accent on hover.
States and sizes
Three heights: 34, 44 and 52 px. Disabled drops to 40 %. Destructive actions use the negative pair, red text on its tint, never a red fill.
Icon buttons and loading
Icon buttons are 44 px squares with the 8 px radius and an accessible name; a pressed one takes the selected fill. Buttons that belong together sit 8 px apart, the primary first. The loader is the glyph, its three bars lighting in turn. Loaders are the only looping motion in the system.
Buttons with icons
The icon leads the label, 16 px, 8 px gap, in the button's own colour, always from the icon library. A trailing arrow only ever means go on.
Inputs
bar
White, 44 px tall, 8 px radius, a Steel edge and a SemiBold label above. Focus turns the edge ink and adds a Pale Blue halo. Measured values use tabular figures, with the unit inside the field.
Transponder IDs have six digits, for example TX-448210.
An error turns the edge and the message negative, and says under the field what is wrong and how to fix it.
Laps per stint
Selection
Checkboxes
Radio buttons
Checked boxes take the selected fill; the chosen radio fills with a dot in the text colour.
Toggles
Segmented control
Filter chips and tags
Ready for F4In FKLInjury hold
Slider
Identity parts
Section header
13 · Interface
Data inputsWhat we collect
A bold label, a quiet subtitle and the divider, a grey hairline, solid to 83 % and then fading. It opens every column and every block and never closes a box. The eyebrow is the one other uppercase line.
Icon tiles
A white monoline icon seated in the signature surface, 44 px or 32 px, 10 px radius. One icon per idea; icons never sit loose in a signal colour.
Content card
Timing dataLaps, sectors,
split times
split times
The surface with its edge light, 12 px radius: an uppercase SemiBold title over a two-line Light caption. Cards are for things you pick up.
Strapline band
This is gut feeling disguised as data
Our model isolates performance from context
One sentence, the conclusion of the view, never a caption that repeats the title. Dark by default; light when the area above is already dense with dark cards. One per view at most.
Signal chips
ScalableObjectiveGlobalReal insights
A bold signal on its own tint, always in a 2 × 2 block. Green and red never share a block.
Interaction
Hold to confirm
Irreversible actions ask for one second of held pressure, in the negative pair. Let go early and nothing happens.
Try them
Hover lightens the fill or turns the underline to the accent. Arrows move on by 3 px. Press scales to 98 %.
| Moment | Motion |
|---|---|
| Hover | A quieter fill or a lighter surface, 200 ms. The primary action's lighter gradient fades in over 0.45 s; nothing moves. Text buttons turn their underline to the accent |
| Press | Scale to 98 %, 80 ms, straight back |
| Focus | A 2 px ring in the accent, 2 px out. Fields turn their edge ink and add a Pale Blue halo, 200 ms |
| Change of state | Indicators slide and brake, 450 ms, easing cubic-bezier(.16, 1, .3, 1). Checks and marks pop from 60 %, 320 ms |
| Commit | One second of held pressure for anything that cannot be undone. Everything else commits on one press |
| Reduced motion | No pops, no slides, no press scale: every state changes at once |
Interface
Data and charts
Structure in ink, navy and Pale Blue. The subject is the text colour, the reference and the line to beat are the accent, the field is Mist. Bars are upright with a 2 px radius, points are small circles, and readouts are Sora with tabular figures. Speed runs one ramp, Pale Blue to Mist to Slate. Gains and losses are told by the numbers in the signal colours, never by green or red fills.
Telemetry, one lap against the reference
Maja Kowalczyk, FKL Łódź, Cursor
Maja KowalczykClass referenceDelta, below zero is time gained
Four channels on one distance axis, sectors as centre lines. Move along the trace, or along the track, and every channel reads out at once.
Track map
slowfast
The lap is simulated from the circuit's own curvature, so braking zones fall where the corners are.
Model fit, pace against track temperature
Best lap, s, every driver in class
The model takes out the conditions. What is left, below the band, is the driver.
Distribution
Index across the pool, n 248
Line, subject against reference
Maja KowalczykClass averageF4 entry
Ring
Dry 62 %Damp 24 %Wet 14 %
Bars
Diverging
Gains in the text colour, losses in Mist, both with flat ends. Only the numbers carry the signal colour.
Radar
Activity
Sessions per week, last 26 weeks
Busiest days
Totals as bars, the pattern as a ranked list. Two plain answers instead of one dense grid.
Figures with sparklines
Average index
71.8+1.2
Sessions this week
1,406−4%
List
MKMaja KowalczykFKL Łódź, cadet91.4
LHLeo HartmannFKL Milton Keynes, junior88.9
AMAarav MehtaFKL Dubai, cadet86.2
Timeline
- First hub sessionMarch 2025, FKL Łódź
- FKL cadet championOctober 2025
- Index passes 90June 2026
- F4 test dayPlanned, December 2026
Podium
Three upright rounded bars on one baseline. First place takes the selected fill; only the height and the shade change.
Interface
Calendar and scheduling
Dates are chosen the way everything else is: the selected fill marks the pick, a Steel edge marks today, the quiet tint joins a range, and a small dot under a day means something is booked. Dates are written in full.
Date picker
MoTuWeThFrSaSu
Pick a start and an end day to select a range.
Week schedule
Booked sessions are rounded blocks in the quiet tint with an accent marker. The next session takes the selected fill.
Date field
Agenda
24ThuFKL Łódź, cadet qualifying16:00 to 17:30, 18 driversLive
26SatFKL Milton Keynes, junior final11:00 to 13:00, 22 driversScout attending
04DecF4 test day, Maja Kowalczyk09:30, FAT RacingPlanned
Interface
Overlays and apps
Layers that sit above the page, and the system carried into a phone app, an app icon, a browser tab and an email.
Dialog
Remove from shortlist?
Maja Kowalczyk will leave the F4 winter shortlist. Her sessions and notes stay in TalentID.
Menu and popover
What is the index?
A 0 to 100 score of performance with kart, weather and track effects removed.
Phone app
Maja Kowalczyk, FKL Łódź
57%of the way
to F1
to F1
Next sessionThu 24, 16:00, cadet qualifying
App icons
The glyph alone, white, centred at 36 % of the tile, in the signature surface with its edge light. Browser tabs use the light tile, ink on white, or the dark one on dark browser themes.
TalentID, Driver pool×
Brand book
talentid.smedley.group/drivers
New F4 candidate in your pool
Maja Kowalczyk from FKL Łódź passed an index of 90 this week and is now 57 % of the way to F1.
Open her profileYou get this email because you follow FKL Łódź. Manage alerts in TalentID settings.
Email and print sit on white in ink. The header is the signature surface with the logo in white; the one action takes the selected fill.
Application
How it comes together on screens, in documents and with partners, the rules that hold it, and the files to start from.
Application
Layout
Two layouts as built: the TalentID dashboard and the slide template. Both follow the same order: a title, readouts, one lead element in a dark card with quieter content on white around it, and one strapline as the conclusion. They are examples, not a grid to obey.
TalentID at 1440 px: a header, the page title with its period control, four readouts as dark content cards, then ranking, the hero card and profile at 1, 1.3 and 0.95 fractions with 28 px gaps, hubs and a closing strapline. Below 980 px the hero moves above the ranking; below 640 px everything stacks.
Slides
The PowerPoint template, 10 × 5.625 in
| Canvas | 10 × 5.625 in, 16:9, white on every slide |
| Side margin | 0.46 in left and right |
| Title | y 0.44 in, Sora SemiBold 28 pt, one per slide, sentence case, no full stop |
| Content | y 1.12 to 4.22 in |
| Columns | Four at 2.05 in with 0.27 in gutters, origins 0.46, 2.78, 5.10 and 7.42 in |
| Strapline band | y 4.37 in, 0.45 in tall, full bleed, one sentence, the conclusion |
| Logo | y 4.96 in, 2.26 × 0.44 in, bottom left, the same size and corner on every slide |
| Layouts | A cover for each business, section, agenda, title and content light and dark, two columns, image and text, statement and figure, quote and closing. Download the template |
Measurements above describe the examples as built. Keep the white ground, the logo's clear space, Sora in three weights, dark cards on light, one strapline per view and no more than four columns; everything else about placement is open.
Application
In use
TalentID, the Advanced Technology scouting dashboard, built from the components in this book: readouts in dark content cards on white, a ranking led by the selected fill, the driver in one dark card with the glyph as progress, signal chips, the reference line to beat, one primary action and one strapline. Pick a driver in the ranking.
talentid.smedley.group/pathway
Timing feed live
TalentID · Season 2026
Pathway
Every FKL driver, with kart, weather and track taken out.
Drivers tracked248+14
F4 ready12+3
Average index71.8+1.2
Sessions this week1,406−4 %
RankingTalentID index, change this month
%of the way
to F1
to F1
ProfileAgainst the F4 entry line
Pace
Consistency
Racecraft
Adaptability
SignalsWhat the scouts flagged
PaceGap to class reference, 12 sessions
DriverF4 entry
HubsWhere the next F4 drivers are coming from
FKLF4 candidateF4 ready
FKL Łódź37
FKL Milton Keynes43
FKL Dubai31
FKL Valencia27
FKL Kuala Lumpur32
FKL Lagos23
FKL Gothenburg20
FKL Lisbon24
Live sample with placeholder data.
Application
Brand showcase
The system on the things we send out: slides, apps, documents, mail and posts. Every one is the same few decisions: a white ground, one dark surface, Sora in three weights and the logo fixed in its corner.
Mock-ups drawn in HTML and CSS from the templates in Resources. Production work starts from those files, so measurements and artwork stay exact.
Application
Co-branding
With a partner, both marks share one line in one colour, equal in weight and separated by the divider. When a business has its own identity, the group steps back to a quiet endorsement.
Partner lockup
Group first, divider, partner
| Height | The partner mark matches the divider: 62 units tall at most, optically equal to the wordmark |
| Colour | Both marks in one colour: white on the surface or a photograph, ink on white or paper. Partner colours stay out of the lockup |
| Clear space | The cap height of the wordmark on every side, as for the logo alone |
| Order | Group first. A title partner of an event goes first on that event's material |
Endorsement
For businesses with their own identity, such as FKL
Part of Smedley Group
Part of Smedley Group
| Form | The glyph and one line, Part of Smedley Group, in Sora Regular, in one colour |
| Size | Smaller than the host brand's logo, never above it, usually in the footer or the credits |
| Host brand | Everything else follows the host's own guidelines, including its colours and type |
| FAT Karting League | Keeps its own brand: the FAT Pill, FKL Blue and ST Rapid. Never restyle FKL material in Smedley Group colours; use the FKL brand guidelines |
Application
Principles
The handful of rules that hold the system together when someone new builds the next screen, deck or post.
One band per viewThe strapline band is the conclusion, never a caption. At most one, full bleed.
One title per viewSentence case, no terminal full stop. The title says the point.
Dark on lightCards, tiles and anything that floats are dark; the ground stays white #FFFFFF.
Colour is structuralInk, navy and Pale Blue build the page. Green and red label; they never decorate.
One light sourceEvery edge light runs pale at the top and dark at the foot, from Mist through Pale Blue to Slate.
Logo is fixedSame size, same corner, every slide and every screen of one product. Monochrome, never boxed.
One surfaceEverything dark is the same 45° gradient from #000000 to #222A35, with the same edge light.
Rounded, never cutControls 8 px, chips 6 px, tiles 10 px, cards 12 px. No slanted or skewed shapes.
Lines, not boxesSections open with a label and the fading grey divider, and are separated by space.
One familySora in Light, Regular and SemiBold. The weight does the work colour does elsewhere.
Motion brakesFast in, hard stop. One moment per view, and none at all with reduced motion.
Plain wordsPoint first, units on every number, dates in full. FKL keeps its own brand and voice.
Avoid a second typeface, drop shadows or bevels on cards, signal colours as fills, gradients at any angle but 45°, centred body copy, a strapline that restates the title rather than concluding it, and more than four columns.
Application
Resources
Everything in this book, ready to build with, in the TalentID identity. Logo files are outlined, so they need no fonts installed; the templates are set in Sora, so install it first.
Brand kit
Download the brand kit
Everything in one file
Monochrome logos for every business, the glyph and app icons, the colour tokens, the icon library, and the slide, document, signature and social templates.
163files524 KBZIPv3.0version
Logos
Advanced Technology
Insight Labs
FAT Racing
FAT Karting League
App icons for iOS and Android: dark and light, 1024 px SVG.
Templates
Slides
16:9 PowerPoint on white: the title slide in the signature surface, the four-column grid, content cards, the strapline band and the logo fixed bottom left, with worked slides
Documents
A4 Word on white paper: a report with a cover, contents and every style in the book, and a letter on the letterhead. Sora, Ink and Slate type, grey rules
Email signature
Monochrome, with a lockup for each business. Replace the words in brackets and paste it into your mail settings
Social posts
A post maker with eight post types and 19 layouts, from headlines and results to driver profiles, in every format: the Canvas or the signature surface, the monochrome lockup and the strapline band, downloaded ready to publish. Or start from the SVG frames.
Colour, type and icons
Colour tokens
The near-monochrome palette, the signal pairs, both themes, the signature surface, its edge light and the four radii, as custom properties or data.
Aa1:02.418
Typefaces
Sora only, in Light, Regular and SemiBold, with tabular figures for measured values. Open licence; the book and the skill self-host it.
Icon library
134 icons in one monoline style: a 24 px grid, 1.5 px stroke, rounded ends and joins. The workshop tools are here to download; the whole library is one click away.
Claude skill
A skill that teaches Claude this brand book and how Back Office is built, so it can design, build and review screens on the brand. It gives a step-by-step procedure; the Back Office component library, with its full API and which component to use for each job; screen templates and measurements; how the apps share one desk, with window management and drag and drop; and the brand rules, from the near-monochrome palette, the white ground and the signature surface to rounded parts, Sora, signal colours as labels, icons, motion and words, with a review checklist. It carries the book's own stylesheet, tokens, icon sprite and fonts.
- ClaudeSettings, Capabilities, Skills: upload the ZIP.
- Claude CodeUnzip into
~/.claude/skills/, or into.claude/skills/in a project. - Then ask“Design the results page for FAT Racing” or “Review this screen against the brand book”.
Versions
What changed, newest first
| 3.0 5 Oct 2026 | The TalentID identity, from the Advanced Technology brand book: a near-monochrome palette on white, the signature surface with its edge light, rounded parts in place of the 55° cut, Sora only, signal colours as labels, a redrawn icon set, new templates and a new post maker |
| 2.3 26 Sep 2026 | Layout drawn as built, the stylesheet regrouped by component, contrast raised to WCAG AA across both themes, headings and landmarks put in order |
| 2.2 25 Sep 2026 | Brand showcase: concept renders of the system on cars, race kit, the track and the paddock |
| 2.1 25 Sep 2026 | Business lockups, voice, imagery, co-branding and resources. Mobile version, keyboard focus on cut controls, search and links to any heading, print styles, templates |
| 2.0 25 Sep 2026 | Racing red and engineering blue on a pure black or white ground, dark and light themes, race engineering, usage context, the reworked hero and the four-part structure |
| 1.0 24 Sep 2026 | First edition: the logo, colour, type, the 55° cut, motion and the interface kit |
Ownership
Who keeps this book
| Owner | Smedley Group, Advanced Technology |
| Contact | mateusz.jaskiewicz@smedleygroup.com |
| Changes | Proposed as a pull request against the brand book repository, reviewed before they are published |
| Source | github.com/Smedley-Group-Advanced-Technology/brand-book-sg |