Art direction · Brand · ProductVersatile Creative VisionBrand, film and digital products.
Case · 2026Festival identityCase study · 6 min read
JobsScreen · modal · progress
12
RDR-0004 · ITComponents
v0460%
RDR-0002 · ITAutomation
v0160%
Approve v04?
This becomes the final version. Later changes start a new one.
ContactScreen · form
13
Start a projectTell us what you need. We reply within 48h.
Service
Branding
GridFour breakpoints
14
Mobile · 3604 col · margin 16 · gutter 16
Tablet · 7688 col · margin 32 · gutter 24
Desktop · 128012 col · margin 64 · gutter 24
Wide · 192012 col · margin 64 · content 1792
Content spans whole columns. Text blocks: 6 of 12 on desktop, never full width.
RhythmSpace between things
15
8
8
24
48 · 96 desktop
drawn at 2×
8 inside a groupLabel, title and text read as one thing.
24 between elementsText to image, field to field.
48 · 96 between sections48 on mobile, 96 on desktop. The gap is the divider.
Snap to 8Every size and space is a multiple of 8. 4 only inside small parts.
Page layoutsStarting points
16
Hero + cardsHome, portfolio
SplitCase, feature
ReadingArticle, terms
List + detailJobs, inbox
GalleryWork, images
DashboardNumbers, status
StepsOnboarding, checkout
Full bleedCampaign, launch
ResponsiveOne page, three widths
17
Desktop3 cards · links visible
Tablet2 cards · wrap
Mobile1 card · menu
Columns drop, content order never changes.Links fold into a menu below 768. The main action goes full width and to the bottom.
Contrast & typeAccessibility · seeing
18
Light
Aa21 text
Aa7.0 text
Aa3.8 icons
Aa2.5 off
Dark
Aa21 text
Aa8.5 text
Aa5.6 text
Aa3.0 off
16body minimum
12nothing smaller
1.5body line height
200%zoom, no side scroll
A good line holds 45 to 75 characters, so the eye finds the next one.
4575 characters
StructureAccessibility · navigating
19
12
3
4
5
6
7
H1One per page
H2Sections
H3Never skip a level
Focus follows reading order: left to right, top to bottom.Every image says what it shows. Decorative ones stay silent.Links say where they go, never "click here".
Roles · light and dark
TokenLightDarkUse
text-primaryInkPaperHeadlines, body, icons
text-mutedGray 600Gray 400Captions, helper text, meta
surface-defaultPaperInkPage and component background
surface-accentMistMistHighlight, selection, zones
surface-inverseInkPaperPrimary button, active state, toast
3On Mist, the stroke sits outside the fill and never covers it.
4Dotted means open: a place where something can go.
Stroke in use
1 · divides, tables, tracks
2 · buttons, fields, cards
RDR-00063 · emphasis, job ID
Space inside things
ComponentPaddingGap inside
Button0 24 · 0 16 · 0 128 icon to label
Field0 24 label to input
Chip0 128 dot to label
Card168
Toast0 1612
Modal2416
Do and don't
CaseSquare, stroke 2
DoEdges from strokes. Flat, sharp, readable.
CaseRound, shadow
Don'tRounded corners and a shadow: another brand's card.
Button anatomy
PartValue
Height48 · 40 · 32
Padding24 · 16 · 12
Borderstroke 2, radius 0
LabelJost 700 · 14 · caps · .08em
Sizes and states
primary · hover
secondary · hover
Status meaning
ChipMeansNext
ActiveWork in progressReview the latest version
PausedWaiting on someoneUnblock or reschedule
ClosedApproved and archivedNothing, it is final
Composed · a job card from base parts
RDR-0005Active
Layout & AccessibilityGrid, rhythm, page layouts, contrast and structure.
1Job ID · stroke 3 frame
2Status chip
3Title · h3, summary · small muted
4Primary + text button
Language switch
closed
ENEnglishPTPortuguêsESEspañol中文中文
open
Click to open. Each language in its own name, the current one in Mist with a check. Choosing one keeps the reader on the same page, at the same place. A click outside or Esc closes it.
Do and don't
Upload the brief first
DoA disabled button says what is missing.
Don'tDisabled with no reason. The person is stuck.
1Start from the rootbase mattersEvery screen begins with tokens: no color, size or space outside the scale.
2Less is morespace speaks tooRemove before you add. One idea per section, one primary action per screen.
3Holistic communicationlean, never vagueWords, image and layout say the same thing. Microcopy is design.
4Bold criteriabreak the rules with reasonA broken rule needs a reason you can say in one sentence.
5Go to the edgebut don't fallBig type, full bleed, strong contrast, while text stays readable.
6Imagination is the rootstart thereSketch the idea before opening the file.
Do and don't
DoLess is more. One primary action, the rest step back.
Don'tThree equal calls to action. Nobody knows where to go.
DoBold criteria. One highlight, so it means something.
Don'tEverything highlighted, nothing stands out.
Bold.
DoGo to the edge. Big type with clear space around it.
Bold.caption · caption · captioncaption · caption
Don'tA timid headline squeezed between small things.
Where each principle shows up
PrincipleIn this system
1 · Start from the rootEvery value is a token: color, type, space, radius, stroke, motion (sections 2 to 6).
2 · Less is moreOne accent color, one stroke family, no shadows, no gradients.
3 · Holistic communicationMicrocopy rules live next to the components (9, 10).
4 · Bold criteriaEvery rule comes with its reason, so it can be broken on purpose.
5 · Go to the edgeDisplay at 80, full-bleed layouts, 21:1 contrast.
6 · Imagination is the rootPage layouts are starting points, not templates (16).
Top bar · desktop
RDRVCV
WorkMethodStudioJournal
Menu · mobile, open
WorkMethodStudioJournal
Which one
PatternUse when
TabsViews of the same thing, side by side. Up to 5.
BreadcrumbDeep content. Shows the way back, up to 4 levels.
PaginationLong lists where position matters.
StepperA flow of 3 to 5 steps with an end.
MenuActions on one item. Destructive last, after a divider, in red.
Tab states
Processdefault
Processhover
Processactive
Processdisabled
A full flow · stepper
Brief
Idea
3Form
4Delivery
Long paths · breadcrumb
Home/…/Festival identity/Process
Keep the first and the last two. The middle folds into “…”.
Sidebar · dashboard
RDRVCV
WorkJobsClientsArchive
StudioTeamSettings
Jobs
Footer · desktop
States
Form pattern
Send me a copy
Rules
1Label on top, help below. An error replaces the help, it does not add to it.
2Validate when the person leaves the field, not while they type.
3Toggle acts at once; checkbox waits for a submit.