portfoliov1.0.0·light

Studio

Studio — Designer Portfolio

portfolioneutralelectric-bluedesignerclean

AAA

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

studio · rendered from tokens

Color

brand.primary

oklch(0.55 0.21 255)

brand.secondary

oklch(0.3 0.008 270)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.2 0.006 270)

text.muted

oklch(0.45 0.008 270)

text.link

oklch(0.55 0.21 255)

surface.base

oklch(0.985 0.002 270)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.962 0.003 270)

border.default

oklch(0.89 0.004 270)

state.success

oklch(0.57 0.14 150)

state.danger

oklch(0.56 0.2 25)

state.warning

oklch(0.7 0.14 75)

state.info

oklch(0.58 0.14 250)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Studio into your workflow.

Save the file for your tool — your agent then generates UI in Studio, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/studio.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Studio is a designer's calling card: confident neutrals, huge type, and one electric blue used like a spotlight. Professional and modern — the case studies lead, the system frames them.

Layout & Grid

Big editorial headers over a precise grid, with full-bleed case-study imagery. Blue marks links and the single primary action per screen.

Components

Buttons

Clean radius.md buttons — electric blue primary or a neutral outline. Hover lifts subtly with shadow.md.

Work Cards

Large project tiles on color.surface.raised that scale gently on hover, with muted metadata and a blue link.

Accessibility

Primary and muted text pass WCAG AA on every surface. Motion honors reduced preferences, focus rings stay bold, and the accent never carries meaning alone.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: studio

4name: Studio

5title: Studio — Designer Portfolio

6version: 1.0.0

7category: portfolio

8tags: [portfolio, neutral, electric-blue, designer, clean]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.55 0.21 255)", type: color }

17 secondary: { value: "oklch(0.3 0.008 270)", type: color }

18 onBrand: { value: "oklch(0.99 0 0)", type: color }

19 text:

20 primary: { value: "oklch(0.2 0.006 270)", type: color }

21 muted: { value: "oklch(0.45 0.008 270)", type: color }

22 link: { value: "{color.brand.primary}", type: color }

23 surface:

24 base: { value: "oklch(0.985 0.002 270)", type: color }

25 raised: { value: "oklch(1 0 0)", type: color }

26 sunken: { value: "oklch(0.962 0.003 270)", type: color }

27 border:

28 default: { value: "oklch(0.89 0.004 270)", type: color }

29 state:

30 success: { value: "oklch(0.57 0.14 150)", type: color }

31 danger: { value: "oklch(0.56 0.2 25)", type: color }

32 warning: { value: "oklch(0.7 0.14 75)", type: color }

33 info: { value: "oklch(0.58 0.14 250)", type: color }

34 typography:

35 family:

36 sans: { value: "General Sans, system-ui, sans-serif", type: fontFamily }

37 mono: { value: "ui-monospace, monospace", type: fontFamily }

38 scale:

39 sm: { value: "0.875rem", type: dimension }

40 base: { value: "1rem", type: dimension }

41 lg: { value: "1.3rem", type: dimension }

42 xl: { value: "1.85rem", type: dimension }

43 "2xl": { value: "2.7rem", type: dimension }

44 "3xl": { value: "4rem", type: dimension }

45 weight:

46 regular: { value: 400, type: fontWeight }

47 bold: { value: 600, type: fontWeight }

48 leading:

49 tight: { value: 1.04, type: number }

50 normal: { value: 1.55, type: number }

51 spacing:

52 base: { value: "0.25rem", type: dimension }

53 radius:

54 sm: { value: "0.375rem", type: dimension }

55 md: { value: "0.75rem", type: dimension }

56 lg: { value: "1.25rem", type: dimension }

57 full: { value: "9999px", type: dimension }

58 shadow:

59 sm: { value: "0 1px 2px oklch(0.2 0 0 / 0.06)", type: shadow }

60 md: { value: "0 12px 32px oklch(0.2 0 0 / 0.1)", type: shadow }

61 motion:

62 duration:

63 base: { value: "220ms", type: duration }

64 easing:

65 standard: { value: "cubic-bezier(0.22, 1, 0.36, 1)", type: cubicBezier }

66 breakpoint:

67 md: { value: "768px", type: dimension }

68 iconography:

69 style: { value: "1.5px stroke, precise, neutral", type: descriptor }

70 zIndex:

71 dropdown: { value: 1000, type: number }

72 modal: { value: 1300, type: number }

73---

75# Studio Design System

77## Brand & Voice

78Studio is a designer's calling card: confident neutrals, huge type, and one

79electric blue used like a spotlight. Professional and modern — the case studies

80lead, the system frames them.

82## Layout & Grid

83Big editorial headers over a precise grid, with full-bleed case-study imagery.

84Blue marks links and the single primary action per screen.

86## Components

87### Buttons

88Clean `radius.md` buttons — electric blue primary or a neutral outline. Hover

89lifts subtly with `shadow.md`.

91### Work Cards

92Large project tiles on `color.surface.raised` that scale gently on hover, with

93muted metadata and a blue link.

95## Accessibility

96Primary and muted text pass WCAG AA on every surface. Motion honors reduced

97preferences, focus rings stay bold, and the accent never carries meaning alone.

Related systems

View →

Button

Atelier

98AAA

Atelier — Expressive Portfolio

portfolioportfolioexpressive

View →

Button

Gallery

98AAA

Gallery — Quiet Monochrome Portfolio

portfolioportfoliomonochrome

View →

Button

Index

98AAA

Index — Typographic Portfolio

portfolioportfoliotypographic