Layout Studio — Design System

00 — Foundations

We design for companies building the future.

Layout Studio is a full-service design agency out of Lagos, working across brand, product, motion, 3D, and frontend. This system exists so every output — from a pitch deck to a shipped product — feels like it came from the same room.

6+

Years across brand, product & 3D

5

Disciplines under one roof

4

Countries served regularly

1

Source of truth (this doc)

Brand pillars

Culture

01

Ecosystem
Native

Fluent in tech, startups, and Web3. No onboarding needed, no translation layer.

Discipline

02

Full-Stack
Visual

One studio, every discipline. Brand, product, motion, 3D, frontend.

Execution

03

Built
to Ship

Production-ready, always. Every file handoff is a working file.

Reach

04

Without
Borders

Based in Lagos, operating at the global standard of craft.

01 — Color

A sharp palette, used with intent.

Dark-first, purple-accented. Gradients are reserved for signature moments — never filler. Coral is campaign-only.

Core

Pure Black

#000000

Midnight Charcoal

#1E1E1E

Electric Purple

#5A28DD

Pure White

#FFFFFF

Off White

#F5F5F0

Extended

Deep Purple

#3B1FA8

Lavender

#9B7FE8

Coral (campaign only)

#E8453C

Warm Cream

#FFF3CA

Peach

#FF9F94

Signature gradient

Layout Gradient

#FFF3CA → #FF9F94 → #AD72BD → #7152DA

background: linear-gradient(135deg, #FFF3CA 0%, #FF9F94 33%, #AD72BD 66%, #7152DA 100%);

02 — Typography

Coolvetica commands. Founders Grotesk carries the weight.

Coolvetica for headlines that need to hold a room. Founders Grotesk for everything else. Never Helvetica, never Arial — not on designed surfaces.

Hero / Statement Coolvetica
Heavy Compressed
72px · 0.9 lh

Every ambitious company deserves design that matches the scale of what they're building.

Display Coolvetica
Regular
40px · 0.95 lh

Stop the scroll

Page title (H1) Founders Grotesk
Bold · 700
36px · 1.05 lh

We design for companies building the future.

Section (H2) Founders Grotesk
Semibold · 600
28px · 1.1 lh

Four areas where design moves the needle.

Subhead (H3) Founders Grotesk
Semibold · 600
22px · 1.15 lh

Serving clients worldwide

Body Founders Grotesk
Regular · 400
16px · 1.6 lh

We embed into your team's workflow, treating every project as a true partnership. Collaboration isn't a pitch deck word for us.

Caption / Chrome Founders Grotesk
Light · 300
12px · 1.4 lh

Layout Studios 2026 ⊛ Proposal · Introduction

--font-display: 'Coolvetica', 'Arial Black', sans-serif;
--font-body:    'Founders Grotesk', 'Inter', sans-serif;

/* Font files in /assets/fonts/ — see layout-studio-brand skill */
/* Most used: Coolvetica_Hv_Comp.otf · FoundersGrotesk-Regular.otf */

03 — Logo

The mark and how it behaves.

Three interlocking panels. Gradient is default on digital. Solid white or black only when gradient can't reproduce. The wordmark never travels without the mark.

Primary · Gradient Default for digital

Primary · White Dark backgrounds, photo overlays

Primary · Black Print, embossing, single-tone

On Purple Brand moments, section breaks

Full · Gradient Proposals, pitch decks, formal

Logomark only Favicons, social avatars, watermarks

Clearance & minimum size

Clear space equal to the logomark "x" height on all sides
Minimum print size 30mm · Minimum digital size 100px
Logomark alone: 7mm print · 24px digital
Never stretch, rotate, shadow, or recolor outside the approved set

04 — Spacing

Eight-pixel base. No odd numbers.

All spacing is a multiple of 4 or 8. When in doubt, round to the nearest 8. Never 7, never 13, never 22.

--space-1

4px

Micro gaps · tag padding, divider margins

--space-2

8px

Tight gaps · between related elements

--space-3

12px

Default internal card spacing

--space-4

16px

Gap between panels / cards

--space-6

24px

Card internal padding

--space-7

30px

Outer slide margin

--space-8

40px

Breathing space · major section gaps

--space-10

64px

Section padding on web layouts

05 — Grid

Twelve canonical layouts.

Every slide, mockup, or content page starts from one of these. The tall left column at 24% is the signature anchor. Right side gets the remaining 76%.

L01Split + 2×2

Portfolio grids, case studies, image-heavy content

L02Split + wide bottom

Hero image top, supporting visual bottom

L03Split + 2 stacked

Before / after, comparison, two key visuals

L04Split + single large

Hero shot, key mockup, most-used split

L054-col + banner

Team grid, feature row, services + banner

L064 equal

Four pillars, services, team members

L073 equal

Three services, three steps, why us

L08Wide left + narrow right

Hero visual dominant left, supporting info right

L09Hero top + 3-col bottom

Statement image + supporting trio below

L102×2 + full-width top

Banner headline, two supporting cards below

L115 equal

Five stats, awards, client logos, milestones

L12Wide split + 2×2 right

Editorial left column + detail grid right

/* L04 — Split Column + Single Large (most common) */
.layout-l04 {
  display: grid;
  grid-template-columns: 24% 1fr;
  gap: var(--space-4);
  height: 100%;
}

06 — Components

The five components that show up everywhere.

Signature pieces of the system. Copy the markup, use the tokens, keep the geometry.

Dark card — numbered pillar

Speed

01

Startup
Native

We get early-stage companies. What moves fast, what investors look for.

Craft

02

Premium
Quality

Every pixel earns its place. Work that holds up against any agency, anywhere.

Reach

03

Global
Perspective

Working across continents gives us a unique lens on diverse markets.

Tag pills

Brand Systems Product Design Motion Graphics 3D Design Frontend

Stat block

$200M

Assets under management across portfolio

10+

Ventures in active incubation

6yrs

Operating across tech and Web3

Buttons

Stat grid — gradient numbers

Operating

30+

Years in the sector

Pipeline

2.5GW

Development pipeline

Under construction

100M+

Battery project, South Australia

Retail

180K+

Tango Energy customers

Component CSS

.ls-card-dark {
  background: var(--ls-surface-dark);
  border: 1px solid var(--ls-border-dark);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--ls-white);
}

07 — Slide anatomy

How a single slide is built.

Chrome top and bottom, page title, content area. Canvas is 1440×810 at 16:9. Every slide inherits the same scaffolding.

Layout Studio 2026 · Design System Components

Brand pillars

Culture

01

Ecosystem
Native

Fluent in tech, startups, and Web3. No translation layer.

Discipline

02

Full-Stack
Visual

One studio, every discipline. Brand, product, motion, 3D.

Execution

03

Built
to Ship

Production-ready, always. Every file is a working file.

Reach

04

Without
Borders

Based in Lagos, operating at the global standard of craft.

www.layoutstudio.co 07

<!-- Base slide shell -->
<div class="slide" data-theme="dark">
  <div class="chrome-top">...</div>
  <h2 class="page-title">Brand pillars</h2>
  <div class="content-area layout-l06">...</div>
  <div class="chrome-bottom">...</div>
</div>

08 — Voice

Direct. Confident. No corporate filler.

Short sentences. Real verbs. Fragments when they land. Numbers over adjectives.

Do

"We design for companies building the future."
"Ship ready, not concept-ready."
"One studio. Full-stack visual. Ecosystem native."
"Every pixel earns its place."
"1,500 NFTs sold. 57.7 ETH volume."
Use commas and full stops. Nothing else.

Don't

"Leveraging end-to-end solutions" — cut it
"Spearheading a paradigm shift" — cut it
"Best-in-class synergy" — delete
Em dashes in copy. They read as AI.
Helvetica or Arial on designed materials
Generic blue. Purple is the accent.

Core messages

Tagline

We design for companies building the future.

Positioning

You build the product. We build the visual layer.

Value prop

One studio. Full-stack visual. Ecosystem native.

09 — Usage

How to pull this into Claude Design AI.

This file is self-contained. Host it on GitHub and point Claude Design AI at the raw URL. Every token and component becomes referenceable context.

1 · Host on GitHub

# Create repo
git init layoutstudio-design-system
cd layoutstudio-design-system

# Add this file as index.html
cp ~/Downloads/index.html .

# Commit and push
git add .
git commit -m "Initial design system v1.0"
git remote add origin https://github.com/lobzyjay/layoutstudio-design-system.git
git push -u origin main

# Enable GitHub Pages in repo settings → Pages → Branch: main
# Your system lives at: https://lobzyjay.github.io/layoutstudio-design-system/

2 · Point Claude Design AI at it

In Claude Design AI, reference either the GitHub Pages URL or the raw file URL directly in your prompt.

# Prompt template for Claude Design AI

Use the Layout Studio design system at
https://lobzyjay.github.io/layoutstudio-design-system/

Apply all tokens (colors, typography, spacing),
components (ls-card-dark, ls-pill, ls-stat),
and grid templates (L01–L07) exactly as defined.

Build: [your brief here]

3 · Link specific sections

Every section has a stable anchor. Reference them directly when you want Claude to focus on a specific part of the system.

/#colors /#typography /#logo /#spacing /#grid /#components /#voice /#tokens-export

10 — Tokens

Copy the whole thing.

Every token in one block. Drop it into any project, any stack. CSS variables below; JSON export follows.

CSS variables

:root {
  /* Colors */
  --ls-black:        #000000;
  --ls-charcoal:     #1E1E1E;
  --ls-purple:       #5A28DD;
  --ls-deep-purple:  #3B1FA8;
  --ls-lavender:     #9B7FE8;
  --ls-white:        #FFFFFF;
  --ls-off-white:    #F5F5F0;
  --ls-coral:        #E8453C;
  --ls-cream:        #FFF3CA;
  --ls-peach:        #FF9F94;

  /* Gradient */
  --ls-gradient: linear-gradient(135deg, #FFF3CA 0%, #FF9F94 33%, #AD72BD 66%, #7152DA 100%);

  /* Typography */
  --font-display: 'Coolvetica', 'Arial Black', sans-serif;
  --font-body:    'Founders Grotesk', 'Inter', sans-serif;

  /* Type scale */
  --fs-hero:    72px;
  --fs-display: 48px;
  --fs-h1:      40px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-body:    15px;
  --fs-caption: 11px;

  /* Spacing · 8px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-7:  30px;
  --space-8:  40px;

  /* Slide canvas */
  --slide-w: 1440px;
  --slide-h: 810px;

  /* Radius */
  --radius-card:  14px;
  --radius-small: 8px;
  --radius-pill:  100px;
}

JSON (design tokens spec)

{
  "color": {
    "black":       { "value": "#000000" },
    "charcoal":    { "value": "#1E1E1E" },
    "purple":      { "value": "#5A28DD" },
    "deepPurple":  { "value": "#3B1FA8" },
    "lavender":    { "value": "#9B7FE8" },
    "white":       { "value": "#FFFFFF" },
    "offWhite":    { "value": "#F5F5F0" },
    "coral":       { "value": "#E8453C" }
  },
  "font": {
    "display": { "value": "Coolvetica, 'Arial Black', sans-serif" },
    "body":    { "value": "'Founders Grotesk', Inter, sans-serif" }
  },
  "space": {
    "1": { "value": "4px" },
    "2": { "value": "8px" },
    "3": { "value": "12px" },
    "4": { "value": "16px" },
    "6": { "value": "24px" },
    "7": { "value": "30px" },
    "8": { "value": "40px" }
  },
  "radius": {
    "card":  { "value": "14px" },
    "small": { "value": "8px" },
    "pill":  { "value": "100px" }
  }
}

Build on Layout's visual layer.

We design for companies building the future.

Brand pillars

A sharp palette, used with intent.

Core

Extended

Signature gradient

Coolvetica commands. Founders Grotesk carries the weight.

The mark and how it behaves.

Clearance & minimum size

Eight-pixel base. No odd numbers.

Twelve canonical layouts.

The five components that show up everywhere.

Dark card — numbered pillar

Tag pills

Stat block

Buttons

Stat grid — gradient numbers

Component CSS

How a single slide is built.

Brand pillars

Direct. Confident. No corporate filler.

Core messages

How to pull this into Claude Design AI.

1 · Host on GitHub

2 · Point Claude Design AI at it

3 · Link specific sections

Copy the whole thing.

CSS variables

JSON (design tokens spec)

Build on
Layout's visual layer.