Solid Concrete Playground

0/14 explored

SCHOOL OF
HANDS-ON IDEAS FEMTOSECOND
COMPANY / 2026

EXCURSION NO. 001 / Solid Concrete / Creative Campus

THE IDEA YARD!

SC / 14 ROOMSStudio Playground

A walkable studio campus: fourteen hands-on demonstrations of the websites, identities and Shopify experiences we can build for you.

REAL EXPERIENCES WE CAN BUILD FOR YOUR BRAND. NOT A PORTFOLIO OF MAKE-BELIEVE CLIENTS.

HOW TO EXPLORE THE CAMPUS

WASD or arrow keys to move
SHIFT move faster · V ride
E open a department · M map
Use the joystick or tap the ground to explore
Tap a department sign to open its experience

DESIGN CLASS IS ALWAYS IN SESSIONISSUED BY SOLID CONCRETE

Walk into a glowing ring · E to play · the school door is openWalk into a glowing ring, then tap the button

Yes, this is Shopify.Custom coded. Built to play.

01 TYPE & LETTERFORMS / BRAND SYSTEMS

Type is an instrument.

Typography makes a brand recognizable. Try typefaces and variable font controls—we build complete identity and website type systems from choices like these.

WHAT THIS DEMONSTRATESTYPE / IDENTITY

Brand typography & custom type systems

Adjust letterforms. We turn type choices into recognizable identities, headline systems and production-ready font specifications.

EXPLORE SERVICE

Specimen text

Fraunces

Typeface

Phrase

Size

Weight

Letter spacing

Line height

Case

Text #0A0B10 Ground #F3F4F8

View CSS

Typefaces load from Google Fonts on demand, only when you pick them. All are released under the SIL Open Font License.

02 WORDMARK WORKSHOP / BRAND IDENTITY

Kern it like you mean it.

The space between letters is part of the logo. Try an optical kerning challenge, then see what goes into precise custom wordmarks.

WHAT THIS DEMONSTRATESIDENTITY / WORDMARKS

Logo design & lettering

Experience the spacing decisions behind an intentional wordmark. We design and refine logos, lockups and brand systems.

EXPLORE SERVICE

Total 0

Raking the sand…

Word 1 of 8

Drag the middle letters until the gaps look even. Squint: you are balancing the air between shapes, not the measured distance.

Keys: click the tray, then ↑ ↓ pick a letter, ← → nudge 1px (Shift for 5px), Enter to check.

Scored optically: for every pair we measure the white area between the letters, row by row inside the cap height (deep open bays are capped), and compare it to an even rhythm. First and last letters are pinned.

03 DESIGN DETECTIVES / UX AUDITS

Can you see what's off?

Put your design eye to work. Each tiny difference represents a real UX decision we refine during website and e-commerce audits.

WHAT THIS DEMONSTRATESUX / DESIGN REVIEWS

UI, UX & conversion audits

Spot the small interface details that affect clarity, confidence and conversion. We audit and redesign entire shopping journeys.

EXPLORE SERVICE

Round1/12

Score0

Which one is better?

04 MOTION DEPARTMENT / CREATIVE CODE

Type that falls for you.

Type can be playful without losing purpose. This motion study is a glimpse of the custom animation systems we build into websites.

WHAT THIS DEMONSTRATESMOTION / CREATIVE CODE

Motion design & interactive development

See typography react to movement. We build bespoke animation systems, WebGL experiences and scroll storytelling.

EXPLORE SERVICE

Send it down the slide

Type

Grab a letter and fling it. Real collisions, real friction, zero libraries.

05 ART DIRECTION / BRAND COLORS

Spin up a palette.

Create a brand color system using harmony instead of guesswork. We translate palettes into editable website and Shopify design tokens.

WHAT THIS DEMONSTRATESBRAND / ART DIRECTION

Color systems & brand identity

Build a coherent palette from color relationships. We translate that into brand guidelines, components and storefront themes.

EXPLORE SERVICE

Drag a knob. Fling the rim.Spins 0

Harmony

Base hue232°

Saturation80%

Lightness56%

Palette tap a swatch to copy

Live preview your palette, applied

--

New season / 01

Colours that ride together, stay together.

A sample layout painted with the five swatches above: background, text, primary button and accent shapes. Spin again and watch it repaint.

06 ACCESSIBILITY LAB / READABLE DESIGN

Balance the contrast.

Accessibility is part of good design. Tune real text contrast and see how we build more readable interfaces for every customer.

WHAT THIS DEMONSTRATESACCESSIBILITY / UX

Accessible, readable interfaces

Practice readable contrast. We design touch-friendly, responsive interfaces with accessibility in mind.

EXPLORE SERVICE

Contrast ratio

1.00:1

AA Normal text4.5:1
AA Large text3:1
AAA Normal text7:1
AAA Large text4.5:1

Normal text · 16px

Good contrast is invisible. Nobody notices it, everybody can read it, and nobody squints at their phone on a sunny bus stop.

Large text · 24px bold

Readable from across the room.

Text

Text colour hex

Lightness50%

Background

Background colour hex

Lightness50%

Ratios use WCAG 2.x relative luminance. Large text means 24px, or 18.66px bold.

07 TYPE SCALE / RESPONSIVE SYSTEMS

Hop up the type scale.

A responsive type scale makes every page feel connected. Generate the visual rhythm we build into real, reusable design systems.

WHAT THIS DEMONSTRATESDESIGN / RESPONSIVE TYPE

Responsive typography systems

Tune modular type ratios. We create consistent, responsive design systems that translate from phone to desktop.

EXPLORE SERVICE

Step 0

Hop, skip and jump

Base size16px

Ratio

Smallest step-2

Largest step+6

Font

Fluid clamp() from 360px to 1440px screens

Article preview fixed sizes

Field notes / Typography

Set the rhythm before the words

A modular scale multiplies one base size by the same ratio, step after step. Every heading, caption and paragraph lands on a size that belongs to the same family, so the page reads as one voice instead of a pile of guesses.

Why ratios beat guesswork

Pick the ratio for the job. Tight ratios keep dense interfaces calm; generous ratios give editorial pages drama and a clear entry point.

Small steps for busy screens

Dashboards and settings panels need many levels that still feel related, so the steps between them stay small.

Caption: every size on this page comes from the scale above.

Your CSS

08 TYPEFACE SCOUTS / EDITORIAL DESIGN

Name that typeface. Nothing but net.

Typography carries personality. Learn to recognize font families—the research behind our identity work and editorial websites.

WHAT THIS DEMONSTRATESBRANDING / TYPOGRAPHY

Type selection & art direction

Recognize type personalities. We select typefaces that make a brand feel distinct and intentional.

EXPLORE SERVICE

Score00

Shot01/10

Streak0

Shoot it: tap a hoop or press 1–5.

Warming up

Loading 25 typefaces from Google Fonts…

Scouting report: how to tell them apart

Serif: Small tapered feet on the strokes, usually bracketed into the stem, with clear thick–thin contrast.
Sans: No feet at all. Strokes end clean and look close to even in weight.
Slab: Blocky, unbracketed serifs about as heavy as the stems; near-uniform stroke.
Script: Letters drawn like handwriting or a brush, often joined, slanted and loopy.
Mono: Every character gets the same width, so an i and an m take equal space. Look for wide i, l and squeezed m, w.

09 COLOR CONTROL / VISUAL CONSISTENCY

Mix it by eye.

Brand accuracy is in the details. Explore how we keep color consistent across websites, campaigns and commerce components.

WHAT THIS DEMONSTRATESBRAND / COLOR ACCURACY

Consistent visual identity

Match color by eye. We keep the details consistent across digital products, marketing pages and store interfaces.

EXPLORE SERVICE

Target

Your mix

Colour1/5

Total0

Hue0°

Saturation50%

Brightness70%

Scored with CIEDE2000, the colour-difference formula print and paint labs use. Under 2 is a near-invisible miss.

10 CAMPAIGN DESIGN / DIGITAL ART

Two scoops, no mud.

A simple gradient can become a signature art direction. Mix one here, then see how we build custom-coded campaign graphics.

WHAT THIS DEMONSTRATESCAMPAIGNS / VISUAL SYSTEMS

Digital campaigns & CSS artwork

Make visual directions from unexpected color combinations. We craft distinctive campaign art and custom-coded product visuals.

EXPLORE SERVICE

Blue Moon

Flavours

Type

Angle

135°

Drag the dial. Arrow keys nudge.

Mix colours in

Scoops drag along the bar; tap the bar to add

The lesson: where the middle goes

sRGB muddy middle

OKLCH clean

sRGB averages the raw red, green and blue numbers, so opposite colours meet in a dull grey; OKLCH blends lightness, chroma and hue the way eyes see them, so the middle stays bright.

Your CSS

11 STYLE SYSTEMS / DESIGN TOKENS

Same layout. Different company.

See an entire interface change with a palette. We build editable Shopify color systems and reusable components around your brand.

WHAT THIS DEMONSTRATESBRAND / LIVE STYLING

Color palettes & design tokens

Change one color and see the entire interface respond. We build reusable tokens and editable Shopify theme settings.

EXPLORE SERVICE

Studio™WorkIndexContact

Issue 01 / Concrete

Form follows
feeling.

Color sets the temperature of a brand before a single word is read. Change the palette and the same layout becomes a different company.

Newname@studio.com

Start a project ↗View work

Background

Text

Accent

Architectural, restrained, minimal.

Tap a HEX value to copy it. Specimen colors are deliberately left as chosen, even at low contrast. The ratio above tells you when text would fail.

12 STORE BUILDER / CUSTOM SHOPIFY

Six lessons. Real code. No cheating.

Build a quick storefront concept below, then explore real HTML and CSS lessons. This is how our custom Shopify and website builds begin.

WHAT THIS DEMONSTRATESSHOPIFY / WEB DEVELOPMENT

Custom Shopify stores & coding

Build a storefront direction below, then use the working HTML and CSS lab. We make complete commerce systems from the code up.

EXPLORE SERVICE

EXPERIMENT 12.1 / CUSTOM SHOPIFY STOREFRONTS

BUILD A
direction.

Change a brand, shape a storefront, preview it on a phone, then bring us your concept. This is a visual demo of how we create one-of-one Shopify experiences.

SC / PREVIEW LAB

LIVE HTML / CSS CONCEPT · NOT A COMPLETE SHOPIFY THEME

We build the real thing.EXPLORE OUR SHOPIFY SERVICES ↗

Progress 0 / 6

Lesson 01 / 06

Loading the lesson

Goal

Tab indents. Esc then Tab leaves the editor. Ctrl/Cmd + Enter runs the check.

Edit the code, then press Run check. The grader measures the real page, so any technique that works, counts.

13 LAYOUT LAB / E-COMMERCE UX

The space between is the design.

Hierarchy, breathing room, and form simplicity shape conversion. Test page layouts the way we do during site redesigns.

WHAT THIS DEMONSTRATESUX / CONVERSION

E-commerce UX & page layouts

Test spacing, hierarchy and form clarity. We create responsive layouts and buying flows that help visitors take action.

EXPLORE SERVICE

Room 101 Today: White space

Homework: give everything room to breathe.

1 White space isn’t empty. It’s structure.

White space (or negative space) is every gap in a layout: margins, padding, the air between lines and letters. It tells the eye what belongs together, what matters most and where to look next.

It doesn’t have to be white. It just has to be deliberate.

Macro vs micro

Macro is the big space between sections and around blocks. Micro is the small stuff: line spacing, letter spacing, the gap between an icon and its label. You need both.
Proximity groups

Things that sit close together are read as related. Move a caption nearer its photo, a label nearer its field, and you have explained the layout without a single line or box.
Breathing room

The most important thing on the page should have the most space around it. Space is how a layout says “look here” without shouting.
Rhythm

Pick a spacing scale, like multiples of 8 (8, 16, 24, 32, 48), and only use those numbers. Consistent steps make a page feel calm and built on purpose.

2 The Squeeze

Same words, same picture, same colours. Only the space changes. Drag from cramped to airy and watch the hero go from shouting to selling, and then, if you push it, to lost.

Common GoodsShopJournalAboutBag (0)

New: the field bottle

A bottle that goes everywhere you go.

Double-walled steel, a lid that never leaks, and a shape that fits a cup holder, a backpack pocket and your hand.

Shop the bottle

the fold

Cramped ↔ Airy22

Breathing meter

Tight

Behind the master slider

Section padding

Gaps between items

Line-height

Space above the button

Text column width

3 Proximity test

NameAda Lovelace

Emailada@example.com

Phone(555) 010-0199

Each label sits exactly halfway between two fields. Does “Email” describe the box above it or the one below? Slide the labels toward their own field.

Labels: equidistant → grouped0%

Ambiguous. Every label is the same distance from two fields.

4 Pop quiz

Four questions. Pencils down when you’re done.

Answer all four questions and your report card lands right here.

14 PRINCIPAL'S OFFICE / START A PROJECT

Report to the office.

Step into our studio. Use the interactive desk computer, review our services, and bring your next project to Solid Concrete.

WHAT THIS DEMONSTRATESDISCOVERY / CLIENT WORK

Start a project with Solid Concrete

Try the principal's desk computer, see our capabilities and bring a new website, Shopify build or brand idea to the studio.

EXPLORE SERVICE

Office referral

No. 014 · Hall pass

You’ve been sent to the principal’s office. Good. We wanted to talk about your website.

Student: You
Referred by: The playground
Time: Now

Reason for referral Has a website, or wants one Running in the halls Chewing gum

What happens in this office

Solid Concrete is a design and development studio. We make brands and the websites that carry them, from the first sketch of a logo to the last line of code, and we build custom Shopify themes and stores.

Brand identity and logo design
Typography and visual systems
Custom website design and front-end development
Interactive websites
Custom Shopify theme development
Shopify store redesigns and migrations
E-commerce UX/UI
Maintenance and support

Start a project Or pass a note on Instagram @femtosecondcompany

Principal’s approval

Awaiting approval.

Solid Concrete · Femtosecond Company

Solid Concrete Playground

IMAGINE
something
STRANGE.

YOUR
studio pass.

Type is an instrument.

Kern it like you mean it.

Can you see what's off?

Type that falls for you.

Spin up a palette.

Balance the contrast.

Hop up the type scale.

Set the rhythm before the words

Why ratios beat guesswork

Small steps for busy screens

Name that typeface. Nothing but net.

Mix it by eye.

Two scoops, no mud.

Same layout. Different company.

Six lessons. Real code. No cheating.

BUILD A
direction.

Loading the lesson

The space between is the design.

1 White space isn’t empty. It’s structure.

Macro vs micro

Proximity groups

Breathing room

Rhythm

2 The Squeeze

3 Proximity test

4 Pop quiz

Report to the office.

What happens in this office

Solid Concrete Playground

Type is an instrument.

Kern it like you mean it.

Can you see what's off?

Type that falls for you.

Spin up a palette.

Balance the contrast.

Hop up the type scale.

Set the rhythm before the words

Why ratios beat guesswork

Small steps for busy screens

Name that typeface. Nothing but net.

Mix it by eye.

Two scoops, no mud.

Same layout. Different company.

Six lessons. Real code. No cheating.

BUILD Adirection.

Loading the lesson

The space between is the design.

1 White space isn’t empty. It’s structure.

Macro vs micro

Proximity groups

Breathing room

Rhythm

2 The Squeeze

3 Proximity test

4 Pop quiz

Report to the office.

What happens in this office

BUILD A
direction.