flowmanceLama Design System
Lama is a one-person portfolio that lives entirely on one saturated cobalt blue. The whole page, from the hero to the footer, is #0115A8 with white type, so it reads like a printed poster or a riso flyer rather than a website. The hero is three lines of heavy uppercase grotesk; everything else is small, plain Inter, and the project images supply all the other colour.
Four signatures make it recognisable:
- One blue field, white everything. No sections change colour. The only other blue is the slightly lighter #293BBE on the button hover and the round toggle.
- Poster hero in Clash Grotesk. I'M A CREATIVE / GRAPHIC & WEB / DESIGNER. set at 132px, weight 700, line height 1.0, uppercase and centred, filling about 70% of the width.
- A sideways project strip. Under a small SELECTED WORKS label, square-cornered project images about 980×630 (ratio 1.56) slide horizontally as you scroll, with neighbouring images cut off at the screen edges.
- A three-part header. Two-line name on the left (Portfolio of / Lama Dompin), a yellow sun icon with Based in sunny San Francisco, CA. in the centre, and About Blog Contact on the right. Social links run vertically down the left edge.
Colors
Surfaces
#0115A8Page background on every section (CSS --medium-blue)
#293BBERound colour toggle bottom-right, button hover (CSS --dark-slate-blue)
#FFFFFF · 20%Bottom border of form fields
Ink
#0115A8Text on primary
#FFFFFFText on primary-hover
#FFFFFFHeadings, nav, labels, links
#FFFFFF · 80%Uppercase lead paragraphs, form placeholders
#FFFFFF · 70%Paragraphs and list items (base p and li)
#FFFFFFAction
#FFFFFFThe white pill button with blue text
#293BBEButton on hover: lighter blue, white text
#F6E97A4px left rule on blockquotes in blog posts only
Lines & effects
#FFFFFF · 35%1px underline under nav links and text links (CSS --white)
#FFFFFF · 19%Footer top border, cart dividers
Typography
Clash Grotesk · display-hero
The quick brown fox jumpsHero h1 lines I'M A CREATIVE, GRAPHIC & WEB, DESIGNER. 132px · 700 · 1.0
Clash Grotesk · title-md
The quick brown fox jumpsService titles: PROTOTYPING, CONTENT STRATEGY. 20px · 600 · 1.3 · 2px
Clash Grotesk · eyebrow
The quick brown fox jumpsSection labels such as SELECTED WORKS. 16px · 600 · 1.1 · 2px
Inter · body-lg
The quick brown fox jumpsLead paragraphs: I CREATE DIGITAL EXPERIENCES…, HELLO! LET'S TALK…. 18px · 500 · 1.33
Inter · label
The quick brown fox jumpsNav links, the location line, underlined text links. 17px · 500 · 1.18
Inter · caption
The quick brown fox jumpsVertical social links. 15px · 500 · 1.33
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container max 1200px, centred |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a min-width: 768px set |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 3px | |
xs | 10px | |
sm | 16px | |
md | 30px | |
lg | 50px | |
xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-bottom-short | 50px | |
nav-height | 91px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Hero line reveal | Each line moves y 100% → 0% inside an overflow-hidden wrapper, 500ms ease, on page load |
| Fade-in | opacity 0 → 1, 1000ms outQuart |
| Scroll drift | y 100px → −100px and y −50px moves, 500ms, tied to scrolling (parallax on images and text) |
| Link underline | Width changes on hover, 500ms ease; some at 300ms ease or 400ms outCubic |
| Icon hover | scale 1 → 1.1, 100ms ease, and back; small rotations at 100ms ease |
| Work strip | Horizontal move scrubbed by scroll (x to 0%) while the section is in view |
| Colour toggle | Background, text colour, border and filter switch at 0ms on click |
| CSS transitions | Buttons 0.2s, social links 0.3s, all |
Do’s and don’ts
- Keep every section on one flat canvas #0115A8 with ink #FFFFFF type.
- Set display and titles in Clash Grotesk, uppercase; set nav, body, buttons and fields in Inter.
- Use ink-muted (white at 70%) for paragraphs and ink-soft (white at 80%) for uppercase leads.
- Use the white pill (button-primary, #FFFFFF on #0115A8, 30px radius, 18px 28px padding) for the one main action, turning #293BBE with white text on hover.
- Keep project images square-cornered at about 1.56:1 and let them run off the screen edges in the strip.
- Use 1px white-alpha underlines (line, 35%) for links instead of extra buttons.
- Add a second background colour, dark bands, cards or shadows.
- Round images or fields; only the button, toggle and scroll indicator are rounded.
- Use the unused CSS colours (#FE7C00, #FBFD54, the greys) as accents.
- Set Inter body text in uppercase except the short lead paragraphs.
- Use Clash Grotesk at 400 or below; only 500, 600 and 700 are loaded.
- Put blue-tinted or busy photos in the work strip; they disappear into the canvas.
Example prompt
Any page in the Lama style
More design systems like this
Portfolio design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Lama design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/lama.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows