playfulv1.0.0·light

Citrus

Citrus — Bright & Energetic

playfulgreencitrusbrightenergetic

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

citrus · rendered from tokens

Color

brand.primary

oklch(0.68 0.18 140)

brand.secondary

oklch(0.72 0.18 60)

brand.onBrand

oklch(0.18 0.02 140)

text.primary

oklch(0.27 0.04 135)

text.muted

oklch(0.47 0.04 135)

text.link

oklch(0.68 0.18 140)

surface.base

oklch(0.99 0.012 120)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.018 120)

border.default

oklch(0.9 0.02 120)

state.success

oklch(0.6 0.16 150)

state.danger

oklch(0.58 0.2 25)

state.warning

oklch(0.74 0.16 75)

state.info

oklch(0.6 0.14 240)

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 Citrus into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/citrus.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

Citrus is a splash of cold-pressed energy: zesty green and tangy orange on a bright, clean base. Optimistic and active, it suits health, food, and lifestyle products that want to feel fresh.

Layout & Grid

Punchy headers, rounded cards, and lots of light. Color is used generously but always with dark text on the brand fills so nothing strains the eye.

Components

Buttons

Rounded radius.md buttons in green color.brand.primary with dark onBrand text; the orange color.brand.secondary flags highlights.

Cards

Bright cards on color.surface.raised with a soft shadow.md and rounded corners; status pills combine color and label.

Accessibility

Bright but balanced: brand fills always carry dark text, and primary and muted text pass WCAG AA on every surface. Motion is gentle and reduced-motion aware.

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: citrus

4name: Citrus

5title: Citrus — Bright & Energetic

6version: 1.0.0

7category: playful

8tags: [playful, green, citrus, bright, energetic]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.68 0.18 140)", type: color }

17 secondary: { value: "oklch(0.72 0.18 60)", type: color }

18 onBrand: { value: "oklch(0.18 0.02 140)", type: color }

19 text:

20 primary: { value: "oklch(0.27 0.04 135)", type: color }

21 muted: { value: "oklch(0.47 0.04 135)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.012 120)", type: color }

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

26 sunken: { value: "oklch(0.965 0.018 120)", type: color }

27 border:

28 default: { value: "oklch(0.9 0.02 120)", type: color }

29 state:

30 success: { value: "oklch(0.6 0.16 150)", type: color }

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

32 warning: { value: "oklch(0.74 0.16 75)", type: color }

33 info: { value: "oklch(0.6 0.14 240)", type: color }

34 typography:

35 family:

36 sans: { value: "Nunito, 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.7rem", type: dimension }

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

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

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

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

58 shadow:

59 sm: { value: "0 2px 6px oklch(0.27 0.04 135 / 0.1)", type: shadow }

60 md: { value: "0 10px 28px oklch(0.27 0.04 135 / 0.14)", type: shadow }

61 motion:

62 duration:

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

64 easing:

65 standard: { value: "cubic-bezier(0.34, 1.3, 0.64, 1)", type: cubicBezier }

66 breakpoint:

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

68 iconography:

69 style: { value: "2px stroke, rounded, lively", type: descriptor }

70 zIndex:

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

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

73---

75# Citrus Design System

77## Brand & Voice

78Citrus is a splash of cold-pressed energy: zesty green and tangy orange on a

79bright, clean base. Optimistic and active, it suits health, food, and lifestyle

80products that want to feel fresh.

82## Layout & Grid

83Punchy headers, rounded cards, and lots of light. Color is used generously but

84always with dark text on the brand fills so nothing strains the eye.

86## Components

87### Buttons

88Rounded `radius.md` buttons in green `color.brand.primary` with dark `onBrand`

89text; the orange `color.brand.secondary` flags highlights.

91### Cards

92Bright cards on `color.surface.raised` with a soft `shadow.md` and rounded

93corners; status pills combine color and label.

95## Accessibility

96Bright but balanced: brand fills always carry dark text, and primary and muted

97text pass WCAG AA on every surface. Motion is gentle and reduced-motion aware.

Related systems

View →

Button

Confetti

98AA

Confetti — Bright & Joyful

playfulplayfulbright

View →

Button

Bubblegum

98AA

Bubblegum — Playful Consumer

playfulplayfulpink

View →

Button

Marshmallow

98AA

Marshmallow — Soft Pastel Playful

playfulplayfulpastel