Remixes of tipping-lambing.vercel.app
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Tipping-lambing
description: |
The Flock Plan design system is a clean, task-centric interface optimized for
farm management and animal husbandry workflows. It prioritizes clarity and
visual hierarchy through subtle color blocking—using soft backgrounds and fine
hairline borders rather than heavy shadows. The system employs a cool,
professional palette anchored by blues and greens, with semantic accent colors
that categorize different work phases (tipping, lambing, health, land
management). Typography is precise and uniform, using Inter at consistent
tracking values to project authority and legibility at small sizes. The
overall mood is calm, scannable, and deliberately restrained—designed for
users who spend extended periods managing complex multi-stage activities.
source:
url: "https://tipping-lambing.vercel.app/"
pagesAnalyzed: 1
extractedAt: 2026-11-03
tokensMeasured: true
colors:
primary: "#EFF6FF"
link: "#155DFC"
surface: "#FFFFFF"
on-primary: "#222222"
ink: "#0A0A0A"
body: "#525252"
muted: "#737373"
faint: "#FFFFFF"
hairline: "#EBEBEB"
accent-1: "#007A55"
neutral-1: "#404040"
neutral-2: "#A1A1A1"
typography:
heading-md:
fontFamily: Inter
fontSize: 28.875px
fontWeight: 500
lineHeight: 1.2
letterSpacing: -0.72px
heading-md-strong:
fontFamily: Inter
fontSize: 28.875px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.72px
heading-md-tight:
fontFamily: Inter
fontSize: 28.875px
fontWeight: 600
lineHeight: 1.15
letterSpacing: -0.72px
heading-sm:
fontFamily: Inter
fontSize: 18.5625px
fontWeight: 600
lineHeight: 1.25
letterSpacing: -0.28px
heading-xs:
fontFamily: Inter
fontSize: 14px
fontWeight: 600
lineHeight: 1.43
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 16.5px
fontWeight: 400
lineHeight: 1.45
letterSpacing: -0.05px
body-md-strong:
fontFamily: Inter
fontSize: 16.5px
fontWeight: 500
lineHeight: 1.45
letterSpacing: -0.05px
body-md-tight:
fontFamily: Inter
fontSize: 16.5px
fontWeight: 600
lineHeight: 1.35
letterSpacing: -0.16px
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: -0.05px
body-sm-strong:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: -0.05px
body-xs:
fontFamily: Inter
fontSize: 12.375px
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.05px
button-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
button-xs:
fontFamily: Inter
fontSize: 12.375px
fontWeight: 500
letterSpacing: 0px
caption-lg:
fontFamily: Inter
fontSize: 14.4375px
fontWeight: 400
lineHeight: 1.45
letterSpacing: -0.05px
caption-md:
fontFamily: Inter
fontSize: 12.375px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
caption-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0.15px
caption-sm-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 0.15px
caption-xs:
fontFamily: Inter
fontSize: 11px
fontWeight: 400
lineHeight: 1.45
letterSpacing: -0.05px
caption-xs-strong:
fontFamily: Inter
fontSize: 11px
fontWeight: 600
lineHeight: 1.45
letterSpacing: -0.05px
rounded:
none: 0px
xs: 8px
sm: 10px
md: 16px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 120px
section: 176px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px"
md: "rgba(0, 0, 0, 0.05) 0px 1px 1px 0px"
lg: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#FFFFFF"
surfaceRaised: "#F5F5F5"
text: "#0A0A0A"
textMuted: "#525252"
border: "#EBEBEB"
accent: "#155DFC"
accentFg: "#FFFFFF"
focusRing: "#155DFC"
elevation: shadow
dark:
bg: "#0A0D15"
surface: "#191C23"
surfaceRaised: "#25282F"
text: "#F6F9FF"
textMuted: "#9C9FA6"
border: "#31343A"
accent: "#3D79FD"
accentFg: "#0B0B0C"
focusRing: "#155DFC"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgb(48, 128, 255) 0%, rgb(21, 93, 252) 100%)"
components:
button-filled:
typography: "{typography.body-sm-strong}"
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
height: 36px
padding: "0px 12px 0px 12px"
boxShadow: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.surface}"
button-filled-lg:
textColor: "{colors.muted}"
border: "1px solid {colors.hairline}"
height: 44px
padding: "4px 6px 4px 6px"
fontSize: 11px
boxShadow: "rgba(0, 0, 0, 0.05) 0px 1px 1px 0px"
fontFamily: Inter
fontWeight: 500
lineHeight: 1.27
rounded: "{rounded.sm}"
backgroundColor: "{colors.surface}"
button-primary:
textColor: "{colors.link}"
height: 44px
padding: "8px 16px 8px 16px"
fontSize: 12.375px
fontFamily: Inter
fontWeight: 600
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
button-text:
typography: "{typography.button-xs}"
textColor: "{colors.muted}"
height: 44px
padding: "8px 16px 8px 16px"
rounded: "{rounded.xs}"
button-text-sm:
typography: "{typography.body-sm-strong}"
textColor: "{colors.muted}"
height: 36px
padding: "0px 12px 0px 12px"
rounded: "{rounded.sm}"
card:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
boxShadow: "rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px"
rounded: "{rounded.md}"
backgroundColor: "{colors.surface}"
badge-filled:
textColor: "{colors.faint}"
height: 18px
padding: "0px 5px 0px 5px"
fontSize: 11px
fontFamily: Inter
fontWeight: 600
lineHeight: 1.64
rounded: 999px
backgroundColor: "rgb(236, 0, 63)"
navigation:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
height: 61px
padding: "8px 16px 8px 16px"
backgroundColor: "{colors.surface}"
footer:
typography: "{typography.body-xs}"
textColor: "{colors.body}"
padding: "24px 4px 8px 4px"
link:
typography: "{typography.body-md-strong}"
textColor: "{colors.link}"
border: "1px solid {colors.hairline}"
padding: "12px 16px 12px 16px"
backgroundColor: "{colors.surface}"
link-sm:
textColor: "{colors.link}"
fontSize: 14.4375px
fontFamily: Inter
fontWeight: 500
lineHeight: 1.39
states:
button-active:
target: button
state: active
filter: "brightness(0.95)"
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 2
navLinksVisible: 14
menuToggleVisible: false
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 736
gridColumns: 2
navLinksVisible: 14
menuToggleVisible: false
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 820
gridColumns: 2
navLinksVisible: 14
menuToggleVisible: false
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1200
gridColumns: 2
navLinksVisible: 14
menuToggleVisible: false
headingPx: 29
bodyPx: 17
sectionPaddingX: 0
- width: 1440
containerWidth: 1200
gridColumns: 2
navLinksVisible: 14
menuToggleVisible: false
headingPx: 29
bodyPx: 17
sectionPaddingX: 0
coverage:
statesFound: 10
gradientsFound: 1
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
tokens:
colors:
primary: "#EFF6FF"
link: "#155DFC"
accent-1: "#007A55"
surface: "#FFFFFF"
ink: "#0A0A0A"
body: "#525252"
muted: "#737373"
on-primary: "#222222"
hairline: "#EBEBEB"
neutral-1: "#404040"
neutral-2: "#A1A1A1"
typography:
heading-md-strong:
size: 28.875px
weight: 600
line-height: 1.2
letter-spacing: -0.72px
heading-md:
size: 28.875px
weight: 500
line-height: 1.2
letter-spacing: -0.72px
heading-md-tight:
size: 28.875px
weight: 600
line-height: 1.15
letter-spacing: -0.72px
heading-sm:
size: 18.5625px
weight: 600
line-height: 1.25
letter-spacing: -0.28px
heading-xs:
size: 14px
weight: 600
line-height: 1.43
letter-spacing: 0px
body-md:
size: 16.5px
weight: 400
line-height: 1.45
letter-spacing: -0.05px
body-md-strong:
size: 16.5px
weight: 500
line-height: 1.45
letter-spacing: -0.05px
body-md-tight:
size: 16.5px
weight: 600
line-height: 1.35
letter-spacing: -0.16px
body-sm:
size: 14px
weight: 400
line-height: 1.43
letter-spacing: -0.05px
body-sm-strong:
size: 14px
weight: 500
line-height: 1.43
letter-spacing: -0.05px
body-xs:
size: 12.375px
weight: 400
line-height: 1.5
letter-spacing: -0.05px
button-sm:
size: 14px
weight: 500
line-height: 1.43
letter-spacing: 0px
button-xs:
size: 12.375px
weight: 500
line-height: 1.33
letter-spacing: 0px
caption-lg:
size: 14.4375px
weight: 400
line-height: 1.45
letter-spacing: -0.05px
caption-md:
size: 12.375px
weight: 400
line-height: 1.25
letter-spacing: 0px
caption-sm:
size: 12px
weight: 500
line-height: 1.33
letter-spacing: 0.12px
caption-sm-strong:
size: 12px
weight: 600
line-height: 1.33
letter-spacing: 0.15px
caption-xs:
size: 11px
weight: 400
line-height: 1.45
letter-spacing: -0.05px
caption-xs-strong:
size: 11px
weight: 600
line-height: 1.45
letter-spacing: -0.05px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 120px
section: 176px
rounded:
none: 0px
xs: 8px
sm: 10px
md: 16px
full: 9999px
shadows:
sm: "rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px"
md: "rgba(0, 0, 0, 0.05) 0px 1px 1px 0px"
lg: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
opacity:
high: 0.92
medium: 0.85
low: 0.45
z-index:
dropdown-base: 30
dropdown-mid: 40
dropdown-high: 60
dropdown-higher: 80
dropdown-highest: 90
gradients:
section-blue: "linear-gradient(rgb(48, 128, 255) 0%, rgb(21, 93, 252) 100%)"
The Flock Plan design system is a clean, task-centric interface optimized for farm management and animal husbandry workflows. It prioritizes clarity and visual hierarchy through subtle color blocking—using soft backgrounds and fine hairline borders rather than heavy shadows. The system employs a cool, professional palette anchored by blues and greens, with semantic accent colors that categorize different work phases (tipping, lambing, health, land management). Typography is precise and uniform, using Inter at consistent tracking values to project authority and legibility at small sizes. The overall mood is calm, scannable, and deliberately restrained—designed for users who spend extended periods managing complex multi-stage activities.
Key Characteristics
{colors.hairline} — #EBEBEB) create visual separation without weight{colors.primary} — #EFF6FF): Soft blue-white used for primary CTA buttons and brand accent backgrounds. Signals approachability and technical trust.{colors.accent-1} — #007A55): Deep teal used for category header bars (Land, Tupping). Provides visual weight and scanability in task grids.{colors.link} — #155DFC): Bright navigable blue for inline links and primary actions. High contrast and clarity.{colors.on-primary} — #222222): Dark text overlay on primary backgrounds, ensuring legibility and label clarity.{colors.ink} — #0A0A0A): Near-black for headings and primary body text. Defines structural hierarchy and emphasis.{colors.body} — #525252): Mid-grey for body copy and standard text. Provides readable contrast without starkness.{colors.muted} — #737373): Lighter grey for secondary text, captions, and helper information. Recedes visually.{colors.neutral-1} — #404040): Dark neutral for supplementary UI elements. Not primary text.{colors.neutral-2} — #A1A1A1): Mid-light grey for disabled or tertiary states.{colors.surface} — #FFFFFF): Clean white for all card and panel backgrounds. Maximizes contrast and readability.{colors.hairline} — #EBEBEB): Ultra-fine 1px borders and dividers. Creates separation without visual noise; critical for card edges and form boundaries.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Heading XL | Inter | 28.875px | 500–600 | 1.15–1.2 | -0.72px | Page titles; tight negative tracking for premium feel. Use weight 600 ({typography.heading-md-strong}) for emphasis, 500 ({typography.heading-md}) for default. |
| Heading SM | Inter | 18.5625px | 600 | 1.25 | -0.28px | Section headers and card titles. Negative tracking reinforces hierarchy. |
| Heading XS | Inter | 14px | 600 | 1.43 | 0px | Subheadings and labels within cards. No tracking shift. |
| Body MD | Inter | 16.5px | 400–500 | 1.35–1.45 | -0.05px | Main body text and link text. Use 500 weight ({typography.body-md-strong}) for emphasis. |
| Body SM | Inter | 14px | 400–500 | 1.43 | -0.05px | Standard UI copy, form labels, secondary content. |
| Body XS | Inter | 12.375px | 400 | 1.5 | -0.05px | Tertiary text, helper text. Minimal tracking. |
| Button / Caption | Inter | 14px–12.375px | 500–600 | 1.33–1.43 | 0px–0.15px | Button and badge text. Weights vary: 500 for standard, 600 for strong or badge markers. |
| Caption XS | Inter | 11px | 400–600 | 1.45 | -0.05px | Tiny metadata and timestamps. |
-0.72px letter-spacing to convey premium typographic refinement and improve visual hierarchy.-0.05px to preserve legibility at smaller scales and create visual cohesion.Primary Button
{colors.primary} (#EFF6FF){colors.link} (#155DFC){spacing.md} horizontal (16px), {spacing.md} vertical (16px){rounded.xs} (8px){typography.button-xs} (12.375px, weight 600){colors.ink} (#0A0A0A)outline: 2px solid (brand focus ring; see Depth & Elevation)Secondary Button (Filled/White)
{colors.surface} (#FFFFFF){colors.ink} (#0A0A0A){spacing.sm} horizontal (12px), 0px vertical (height-driven: 36px)1px solid {colors.hairline} (#EBEBEB){rounded.sm} (10px){typography.button-sm} (14px, weight 500){shadows.md} (rgba(0, 0, 0, 0.05) 0px 1px 1px 0px)filter: brightness(0.95) + transform: scale(0.98)Ghost / Text Button
rgba(0, 0, 0, 0)){colors.muted} (#737373){spacing.md} horizontal, {spacing.md} vertical{rounded.xs} (8px){typography.button-xs} (12.375px, weight 500){colors.ink} (#0A0A0A)Default Card
{colors.surface} (#FFFFFF){colors.ink} (#0A0A0A)1px solid {colors.hairline} (#EBEBEB){rounded.md} (16px){typography.body-md} (16.5px, weight 400){shadows.sm} (rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px)Category Header Bar (inside card)
{colors.accent-1} — #007A55) for Land/Tupping; Purple for Health; Orange for Feeding/Warnings; Navy for other tasks{rounded.none} (0px) on top; content below uses card radiusText Input (focused)
{colors.surface} (#FFFFFF){colors.ink} (#0A0A0A){colors.link} — #155DFC){rounded.xs} (8px){typography.body-sm} (14px, weight 400){spacing.sm} (12px)outline: 2px solid (focus ring) + border shifts to {colors.link}Top Navigation Bar
{colors.surface} (#FFFFFF){colors.ink} (#0A0A0A){spacing.xs} vertical (8px), {spacing.md} horizontal (16px)1px solid {colors.hairline} (#EBEBEB) at bottom{rounded.none} (0px){typography.body-md} (16.5px, weight 400){colors.link} (#155DFC)Badge (notification/count)
#EC003F) — semantic alert color (not in main palette but observed in UI){colors.surface} (#FFFFFF){spacing.xs} horizontal (8px), {spacing.xxs} vertical (4px) — or 0px 5px as measured{rounded.full} (9999px) — renders as a tight circle/pill{typography.caption-xs-strong} (11px, weight 600){spacing.xs} = 8px{spacing.xxs} — Micro gaps within dense UI elements (badge padding, tight list items){spacing.xs} — Component-level padding (buttons, small input fields){spacing.sm} — Card internal margins, form label spacing{spacing.md} — Standard component padding, outer card spacing{spacing.lg} — Inter-section gaps, vertical rhythm{spacing.xl} — Feature spacing, section breaks{spacing.xxl} — Large grouped sections{spacing.xxxl} & {spacing.section} — Page-level section gaps, hero areasThe system employs generous whitespace to prevent cognitive overload. Cards are spaced generously from one another ({spacing.xl} or greater). Section padding uses {spacing.section} (176px) to create distinct visual zones. Typography line-height is consistently generous (1.25–1.5) to maximize readability. Hairline borders replace heavy visual noise; subtle shadows create depth without clutter. The result is an interface that feels calm and professional, prioritizing content legibility over density.
{rounded.none} = 0px — Category header bars, navigation (sharp, structural elements){rounded.xs} = 8px — Primary buttons, input fields, icon containers{rounded.sm} = 10px — Secondary buttons, some interactive elements{rounded.md} = 16px — Cards, large containers{rounded.full} = 9999px — Badges, avatar placeholders, pill-shaped toggles{colors.hairline} — #EBEBEB), button strokes, input field edges, navigation underlines. The signature stroke width throughout the system; creates delicate visual separation without weight.| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow; hairline border only | Background cards, inactive UI, text links |
| Micro (sm) | rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px | Standard cards, panels, resting state buttons |
| Low (md) | rgba(0, 0, 0, 0.05) 0px 1px 1px 0px | Buttons on hover, light lift indicators |
| Subtle (lg) | rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Additional hover state depth, minimal elevation change |
Shadow Philosophy
The system employs a layered-micro approach: depth comes primarily from color blocking and subtle two-layer shadows rather than dramatic drop-shadows. The sm shadow (used on cards) stacks two layers of near-transparent black (0.06 and 0.1 opacity) to create a barely-there lift that suggests containment without visual heaviness. Buttons use even lighter shadows (md and lg), signaling interactivity through minimal elevation. The overall effect is restraint: shadows are subordinate to content and hierarchy, never calling attention to themselves. This reinforces the professional, task-centric mood.
{colors.hairline} — #EBEBEB) as your primary visual separator. It creates elegant subdivision without weight.{colors.ink} headings on {colors.surface} cards for maximum contrast and scannability.{colors.link} — #155DFC) exclusively for clickable elements. Never use it for plain text.{typography.heading-md-strong} uses -0.72px). This is a signature trait and improves perceived quality.{shadows.sm} or {shadows.md}) to elevate cards and buttons; never use harsh drop-shadows.-0.05px on body text are functional refinements, not ornament.{rounded.none}).{colors.primary} — #EFF6FF) as a background for large areas. It reads as too pale; reserve it for CTAs and small accent regions.| Viewport | Content Width | Grid Columns | Key Changes |
|---|---|---|---|
| 375px (Mobile) | 343px | 2 | Base layout; full-width cards stack slightly; nav remains visible; headings render at 28px |
| 768px (Tablet) | 736px | 2 | Consistent 2-column grid; card widths increase proportionally; body text remains 16–17px |
| 1024px (Small Desktop) | 820px | 2 | Content column stabilizes; cards begin to show breathing room; typography stable |
| 1280px+ (Large Desktop) | 1200px | 2 | Max width enforced; cards maintain 1200px bound; heading renders at 29px (slight increase); body text 17px |
Observations
{spacing.md} × 2 + font line-height){spacing.sm} (12px) minimum for comfort on touch devices{colors.primary} — #EFF6FF) with link text ({colors.link} — #155DFC){colors.surface} — #FFFFFF){colors.ink} — #0A0A0A){colors.body} — #525252){colors.muted} — #737373){colors.hairline} — #EBEBEB){colors.accent-1} — #007A55){colors.link} — #155DFC){spacing.md} (16px) for standard padding, {spacing.xl} (24px) for section breaks, and {spacing.section} (176px) for major zones.{typography.heading-md-strong} and {typography.heading-md} require -0.72px letter-spacing; this is non-negotiable for the design language.{shadows.sm} — the specific two-layer shadow. Do not substitute a single-layer shadow or generic drop-shadow.{rounded.xs} (8px), cards use {rounded.md} (16px), badges use {rounded.full} (9999px). Navigation and headers remain sharp ({rounded.none} — 0px).{colors.hairline}. This is the signature stroke; do not use thicker borders or colored strokes unless the design explicitly calls for a status change.{typography.body-md-strong} (500 weight) for emphasis within body text, not a size jump.:focus-visible pseudo-class.0px rounded, 8–16px tall bar in semantic colour (teal, purple, orange, navy).{opacity.low} — 0.45) for disabled buttons and form fields, not a grey recolor.#EC003F) was observed in the UI but not part of the extracted token palette; treat it as a design debt or augmentation outside the core system.A task-driven, color-coded management interface for agricultural planning and animal husbandry. Clean typography, subtle shadows, and semantic category bars create a calm, scannable environment for complex workflows.