MONOGRAPH
MONOGRAPH Studio Brand guidelines and design system Edition 01 November 2026
The MONOGRAPH symbol drawn on its construction grid x2xx 4x 1 unit = 12 Fig. 1

One idea, given one clear form.

The complete identity and design system for MONOGRAPH, an independent studio for strategy, visual identity, technology and digital experiences.

Read the guidelines Open the components
StrategyFinding the one idea
IdentityGiving it a form
TechnologyMaking it work
ExperiencesPutting it in people's hands

Brand overview

Who we are, what we believe and how that turns into a visual language. Read this first. Everything else in these guidelines follows from it.

Owner: studio leadership
Applies to: every touchpoint

A monographsays one thing,completely.So do we.

Philosophy

Why the studio exists and why it is called what it is.

A monograph is a book about a single subject. It does not try to cover everything. It goes deep on one thing and leaves nothing important out.

We work the same way. Every project starts by finding the one idea worth saying. Then we give that idea a form that is precise, useful and built to last, whether it ends up on paper, on a screen or in someone's hand.

Mission and positioning

What we promise clients, and where we sit in the market.

Mission

Help independent companies and cultural organisations become clear, from the first strategy workshop to the last line of shipped code.

Positioning

A small studio where strategy, design and engineering sit at the same table. No handovers, and no meaning lost between the slide and the product.

Personality

Where the brand sits between opposite qualities. Use this when judging tone, imagery and layout.

Precise
Loose
Quiet
Loud
Serious
Warm
Classic
Experimental
Expert
Approachable

Core principles

Four rules that decide most design questions before they become debates.

Say one thing

Each page, slide or screen has one job. If it needs two, it becomes two.

Show the structure

Let the grid be visible in the result. Order is part of the message.

Earn every colour

Signal orange appears once per view. When everything is loud, nothing is.

Build what you draw

Design and code are one craft here. If it cannot be built well, it is not finished.

Visual inspiration

The traditions we borrow from. Study the thinking behind them, never copy the surface.

Concert posters, 1950s Zurich
Geometry as rhythm. Objective, yet full of feeling.
Exhibition catalogues
Long reading, calm margins, strict columns.
Modernist wayfinding
Read in a second, from across a room.
Engineering drawings
Every line has a reason and a measurement.

Colour

Four colours do almost all the work. Ivory gives room, ink gives structure, stone draws the diagrams, and signal orange marks the one thing that matters most.

Click any swatch to copy its HEX value.
Click a code to copy just that code.

Proportion

A typical MONOGRAPH layout, by area. Orange stays small so it keeps its power.

Signal orange, 5% or less

Palettes

Every colour, with its codes and when to use it. Text colours on each chip show the best readable pairing.

Combinations

Pairings tested against WCAG 2.2. Failing pairs are shown on purpose, so you know what to avoid.

Contrast checker

Test any two colours from the system before you use them together.

Contrast ratio

15.7:1

Clear form for a single idea

Body copy at 16 px needs a ratio of at least 4.5:1. Large type and interface graphics need 3:1.

Typography

Three families, three jobs. Space Grotesk speaks for the brand, Inter runs the interface, and IBM Plex Mono labels anything technical.

All families: Google Fonts, SIL Open Font License

Families

Never add a fourth. If something feels missing, change size or weight first.

Aa

Space Grotesk

Display and headings. 300 to 700. Tight tracking at large sizes.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@?!%

Aa

Inter

Interface, body text and labels. 400 to 700.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Aa

IBM Plex Mono

Codes, data, specs and captions. 400 and 500.

ABCDEFGHIJKLM nopqrstuvwxyz 0123456789 #{}[]

Type scale

Type your own words to see them in every style. Sizes above H4 are fluid and scale with the viewport.

Weights

Space Grotesk is a variable font. Drag to see the full range. In practice we use 500 and 600 for headings.

Grotesk300 Light
Grotesk400 Regular
Grotesk500 Medium
Grotesk600 Semibold
Grotesk700 Bold, wordmark

Monograph

Line height and tracking

Large type sits tight. Small type opens up. Move the sliders to feel why.

A monograph is a book about one subject. It goes deep, it stays focused, and it leaves nothing important out. Good line spacing lets the eye find the start of the next line without effort.

1.55
Token: --leading-body1.55

Precise form

−0.038em
Token: --tracking-display−0.045em

In composition

The scale working together on a real page. Note the asymmetric columns and the single orange rule.

Journal, issue 12
8 minute read

Why every identity should start with a sentence

Before we draw a single shape, we write one sentence that the whole identity has to prove. It is the most useful hour of any project.

If you cannot say it, you cannot design it.

The sentence is not a tagline. Nobody outside the team will ever read it. Its job is to give every later decision something to be measured against, from the weight of a typeface to the speed of a hover state.

Set in Space Grotesk 600 and Inter 400, on a 12 column grid. Body text never runs wider than 64 characters.

Grid and layout

A strict 12 column grid, used asymmetrically. Content rarely sits in the centre. We let empty space carry weight, and everything aligns to the same columns.

Press G at any time to lay the grid over this page.

Responsive grids

Columns, gutters and margins for each breakpoint. Orange bands are columns.

BreakpointViewportColumnsGutterMarginMax content
Desktop1200 px and up1224 px72 px1200 px
Tablet768 to 1199 px820 px40 pxfluid
Mobileup to 767 px416 px20 pxfluid

Spacing scale

A 4 px base. Small steps for components, large jumps for layout. Never use a value between steps.

Container widths

Three nested widths. Text always lives inside the measure, even when the layout is wide.

Viewport, full bleed
--layout-wide, 1320 px. Images and applications
--layout-content, 1200 px. Default page container
--layout-measure, 64ch. Running text

Radius

Radius is rare. Surfaces stay square, controls get a whisper, and only pills are fully round.

--radius-none, 0

Cards, panels, images, layout

--radius-xs, 2 px

Buttons, inputs, checkboxes

--radius-sm, 4 px

Menus and tooltips

--radius-pill

Badges and switches only

Layout patterns

Three compositions we reuse. Each one starts off centre and leaves a column of air.

Case study opener. Title from column 4, a full bleed image, notes in the last three columns.
Work index. A large headline, then a strict rhythm of thirds broken once.
Documentation. Labels in columns 1 to 3, content from column 5. This page uses it.

Iconography

A compact set of line icons drawn on a 24 unit grid, with square ends and sharp corners, so they sit naturally next to the bars of the logo.

Click any icon to copy its SVG.
Fallback library: Lucide, with square caps.

Anatomy

Every icon is drawn inside the same keylines, so mixed sets look balanced.

24safe 2
Canvas
24 × 24 units
Safe zone
2 units on every side
Stroke
1.5 at 24 px, 1.25 at 16 px
Caps and joins
square, mitre
Angles
0°, 45° and 90° only
Keylines
square 18, circle 20
Sizes
16, 20, 24, 32 px
Colour
currentColor, never orange alone

Icon library

Search, resize and change the stroke. The live set below is the master artwork.

Size

No icons match that search. Try a broader word, such as arrow or file.

Components

The building blocks of every MONOGRAPH interface. Each one reads its values from design tokens, so one change carries through everywhere.

Everything here is live.
Try it with a keyboard too.

Button playground

Build a button and copy the markup. The preview uses the same classes as production.

Variant
Size
HTML

          

        

      

    


    

      
Button states
Every variant in every state, shown side by side. Focus uses a 2 px ink outline with a 3 px gap.

      

        

          

            
VariantDefaultHoverFocusActiveDisabled

            
          

        

        

          Icon buttons
          Add project
          Edit
          Copy
          Settings
          Delete
          
        

      

    


    

      
Inputs
Labels always sit above the field. Errors say what went wrong and how to fix it.

      

        
Default. Shown in the client portal.

        
Focused state, shown statically.

        
Add the domain after @, for example ines@monograph.studio

        
Disabled. Dashed border means it cannot be edited.

        

          
          Type to filter. 6 projects.
          
    
        
    
      
    
    
    

    
    
      
    Badges
    Short status labels. Colour is never the only signal: each badge also carries a word.
    
      
    
        
    
          Draft
          Published
          New
          On track
          Needs review
          Overdue
          In research
          3
        
    
      
    
    
    

    
    
      
    Cards
    Square corners, ink border. On hover the card lifts onto a hard offset shadow, like paper on a desk.
    
      
    
        
    
          
    
            
          
    
          
    Live
    Hotel Mar
    Identity and booking site for a twelve room hotel on the Costa del Sol.
    
          
    Identity, Web2026
    
        
    
        
    
          
    
            
          
    
          
    In research
    Atlas Type Archive
    A digital home for a century of printing specimens.
    
          
    Strategy, Product2027
    
        
    
        
    
          
    
            Studio note
            
    We take on four new projects a year.
    
            
    Booking now for spring 2027. Tell us about the idea, not the deliverables.
    
          
    
          
    Start a project
    
        
    
      
    
    
    

    
    
      
    Navigation
    Tabs for switching views, a side list for moving between areas, breadcrumbs and pages for depth.
    
      
    
        
    
          
    Tabs
    
          
    
            
            
            
            
          
    
          
    The summary, the team and the next milestone.
    
          
          
    
        
    
        
    
          
        
    
      
    
    
    

    
    
      
    Dropdowns and tooltips
    Menus open below their trigger and close with Escape. Tooltips appear on hover and on keyboard focus.
    
      
    
        
    
          
    Dropdown Selected: Identity
    
          
        
    
        
    
          
    Tooltip
    
          
    
            
            
    
              PDF, 2.4 MB
              Share link
            
    
            
    Hover or focus the buttons. Tooltips wait 250 ms before showing.
    
          
    
        
    
      
    
    
    

    
    
      
    Toggles and checkboxes
    A switch acts immediately. A checkbox waits for the form to be saved.
    
      
    
        
    
          
    Email me when a client commentsInstant, one email per comment
    
          
    Weekly studio digestEvery Monday at 9:00
    
          
    Two factor sign inManaged by your organisation
    
        
    
        
    
          
    
            Deliverables
            
    
              
              
    
                
                
                
              
    
              
            
    
          
    
          
    
            Billing
            
            
          
    
        
    
      
    
    
    

    
    
      
    Notifications
    Inline alerts stay on the page. Toasts confirm an action and leave after five seconds.
    
      
    
        
    
          
    Feedback round opens Monday
    Clients can comment on the identity until 14 November.
    
          
    Files delivered
    Hotel Mar received 48 files and the guidelines.
    
          
    Font licence expires soon
    Renew the desktop licence before 1 December.
    
          
          
        
    
        
    
          
    Toasts
    
          
    Trigger a toast. It appears at the bottom right and is announced to screen readers.
    
          
    
            
            
            
          
    
        
    
      
    
    
    

    
    
      
    Modal
    For decisions that need full attention. Focus moves into the dialog and returns to the trigger on close.
    
      
    
        
        
    
          
    Try the live dialog
    Opens with a slide, closes with Escape, the close button or the cancel action. Confirming shows a toast.
    
          
    
        
    
      
    
    
    
  
    

  
    
    Archive Hotel Mar?
    
    
    The project moves to the archive and the client portal closes. You can restore it at any time from Settings.
    
      
    
    
    
    
    
      
  
  
    
    
    
      
      
    Motion and interaction
    
      
    Motion explains what changed. It is quick, it lands firmly, and it never decorates. Keep one moment of movement per view.
    
      
    Respects reduced motion settings.
    All timings are tokens.
    
    
    

    
    
      
    Easing curves
    Four curves cover every case. Press play to compare them over the same 640 ms.
    
      
    
        
    
        
    
      
    
    
    

    
    
      
    Durations
    Small things move fast. Large surfaces take longer, because they travel further.
    
      
    
        
    
        
    
      
    
    
    

    
    
      
    Hover behaviour
    Hover hints at what a click will do. Each pattern below belongs to one type of element.
    
      
    
        
    Read the case study
    Underline wipe
    Text links. 240 ms, editorial curve.
    
        
    Visit the site
    Arrow nudge
    External links. The arrow moves 3 px toward its direction.
    
        
    Hotel Mar
    Ink rise
    Large tiles. The fill rises like a page being turned up.
    
        
    Atlasproject
    Disc reveal
    Signature moment, once per page. The half disc opens wide.
    
      
    
    
    

    
    
      
    Transitions
    Surfaces enter on the enter curve and leave faster on the exit curve. Page changes use a hard editorial wipe.
    
      
    
        
    
          
    
            
    
            
          
    
          
    Panel: enter 400 ms, exit 400 ms
    
        
    
        
    
          
    
            
    Page 1Overview
    
            
          
    
          
    Page wipe: 640 ms, editorial curve
    
        
    
      
    
    
    

    
    
      
    Loading states
    Show progress when you know it. Show structure when you do not. Use the symbol loader only for full page waits.
    
      
    
        
    Symbol loader. Unknown wait over one second.
    
        
    
          
    Ready to upload0%
    
          
        
    Progress bar. Known length, such as uploads.
    
        
    Loading project card
    Skeleton. Content with a known shape.
    
      
    
    
    

    
    
      
    Interaction feedback
    Every action gets an answer within 100 ms. Try each one.
    
      
    
        
        
    Saving confirms in place. Copying swaps the label. A wrong code shakes the field once. The code is 1959.
    
      
    
    
    
  
    

  
  
    
    
    
      
      
    Applications
    
      
    The identity at work, from a business card to a product screen. Treat these as reference compositions, not templates to copy line for line.
    
      
    All artwork drawn in HTML, CSS and SVG.
    
    
    

    
    
      
    
        
    
          
        
    
        
    Business card
    85 × 55 mm, 600 gsm uncoated. Click to flip.
    
      
    
      
    
        
    
          
    MONOGRAPHCalle Larios 12
    29005 Málaga
    monograph.studio
    
          
    
          
    Page 1 of 2
    
        
    
        
    Letterhead
    A4, digital and print
    
      
    

      
    
        
    
          
    To: Laura Sánchez, Hotel MarSubject: Identity, round two
    
          
    Hi Laura,
    The second round is ready. We focused on the signage, as agreed on Tuesday.
    
            
    Inés FerrerPartner, MONOGRAPHmonograph.studio
    
          
    
        
    
        
    Email signature
    Live text, monogram as a 40 px image
    
      
    
      
    
        
    
          
    Journal12Design is a decision, made visible.
    
          
    Studio news01/03Now booking for spring 2027
    
          
    Case study12Atlas Type Archive: a century of specimens
    
        
    
        
    Social graphics
    1080 × 1080. One message per post.
    
      
    

      
    
        
    
          
    monograph.studio
    
          
    MONOGRAPH
    • Work
    • Studio
    • Journal
    • Contact
    Start a project
    
          
    We give independent ideas a clear form.
    Strategy, identity, technology and digital experiences for companies that would rather be clear than loud.
    See the work
    
          
    48 identities
    12 years
    4 partners
    1 idea at a time
    
        
    
        
    Website header
    Desktop, 1440 px, scaled
    
      
    

      
    
        
    
          
    Hotel MarWorkshop 02
    Brand strategy, round two
    November 2026
    
          
    02 FindingsMONOGRAPH
    What guests told us
    1. 01They remember the light, not the rooms.
    2. 02They booked because a friend did.
    3. 03They want the town, not a resort.
    Page 7
    
        
    
        
    Presentation slides
    16:9. Ink covers, ivory content pages.
    
      
    

      
    
        
    
          
    
            Index
            
          
    
          
    
            
    
              
    
              New project
            
    
            
    
              
    Active projects
    Updated 2 minutes ago
    
              
    
                
    ProjectClientStageProgressDue
    
                
                  
    Hotel MarMar HospitalityOn track
    		14 Nov
    
                  
    Atlas ArchiveAtlas FoundationIn research
    		30 Jan
    
                  
    Nordlys CoffeeNordlys ASNeeds review
    		02 Dec
    
                  
    Field Notes appVerdantOverdue
    		28 Oct
    
                    
              
    
            
    
          
    
        
    
        
    Product interface
    Index, the studio's own project tracker, built from section 07
    
      
    

      
    
        
    
          
    MONOGRAPH
    Works 2019 to 2026    Volume 01
    
          
    One
    idea.
    Works 2019 to 2026
    Sala Uno, Málaga
    12.03 to 30.04.2027
    
          
    MONOGRAPH
    Studio, second floor
    
        
    
        
    Branded mockups
    Monograph book, exhibition poster, door sign
    
      
    
    
    
  
    

  
  
    
    
    
      
      
    Design tokens
    
      
    The single source for every value in this system. Primitives hold raw values, semantic tokens hold meaning, and component tokens hold decisions.
    
      
    CSS custom properties.
    This page runs on the same file.
    
    
    

    
    
      
    Architecture
    Components never read primitives directly. That is what lets one change travel safely.
    
      
    
        
    
          
    Primitive
    Raw values with no meaning. Named after what they are.
    --mg-signal-500: #FF5B35;
    
          
          
    Semantic
    Meaning and role. Named after what they do.
    --color-accent: var(--mg-signal-500);
    
          
          
    Component
    One decision in one component. Reads semantic tokens only.
    --button-primary-bg-hover: var(--color-accent);
    
        
    
        
    
          
    
            
    Change one primitive
    
            
    Swap the value behind --mg-signal-500 inside this box. Every component below updates through the chain.
    
            
    
              
            
    
          
    
          
    
            
            Primary, hover
            New
            
            
    
            Active tab
          
    
        
    
      
    
    
    

    
    
      
    Token reference
    Every token, read live from the stylesheet. Filter by category.
    
      
    
        
    
        
    TokenValueTierPreview
    
      
    
    
    

    
    
      
    Export
    The complete token file. Paste it at the top of any stylesheet, or download it as tokens.css.
    
      
    
        
    
          
    tokens.css