Remixes of bisqueria-ttm.webflow.io
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: Bisqueria-ttm
description: |
Bisqueria's design system embodies artisanal warmth and premium craftsmanship
through a deliberately curated palette of warm neutrals anchored by a vibrant
golden-yellow accent. The aesthetic balances elegantly restrained typography
pairings—modern Poppins for interface copy and bold, expressive Bellota Text
for display—with generous whitespace and color-blocking to create visual
hierarchy through surface contrast rather than shadow depth. The system feels
inviting and handmade, emphasizing the quality and freshness of baked goods
through soft, approachable colors and generous breathing room. Every
interaction rewards precision: rounded pill buttons and full-rounded inputs
convey friendly accessibility, while sharp corners on image containers ground
the premium product photography. The design prioritizes clarity and trust over
visual complexity, making it distinctly suited to a contemporary bakery brand
that values both craft heritage and modern ecommerce usability.
source:
url: "https://bisqueria-ttm.webflow.io/"
pagesAnalyzed: 6
extractedAt: 2026-11-01
tokensMeasured: true
colors:
primary: "#FFCC0F"
canvas: "#FFFBF6"
surface-alt: "#F4EBE2"
on-primary: "#222222"
ink: "#280A03"
body: "#565656"
hairline: "#D2BCB6"
neutral-1: "#333333"
typography:
display-xxl:
fontFamily: Bellotatext
fontSize: 138px
fontWeight: 900
lineHeight: 1.12
letterSpacing: 0px
display-xxl-capitalize:
fontFamily: Bellotatext
fontSize: 138px
fontWeight: 900
lineHeight: 1.12
letterSpacing: 0px
textTransform: capitalize
display-xl:
fontFamily: Bellotatext
fontSize: 62px
fontWeight: 800
lineHeight: 1.06
letterSpacing: 0px
display-lg:
fontFamily: Bellotatext
fontSize: 40px
fontWeight: 800
lineHeight: 1.25
letterSpacing: 0px
heading:
fontFamily: Bellotatext
fontSize: 32px
fontWeight: 800
lineHeight: 1.38
letterSpacing: 0px
body-lg:
fontFamily: Bellotatext
fontSize: 18px
fontWeight: 600
lineHeight: 1.56
letterSpacing: 0px
body-md:
fontFamily: Poppins
fontSize: 16px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-md-strong:
fontFamily: Poppins
fontSize: 16px
fontWeight: 500
lineHeight: 1.13
letterSpacing: 0px
body-md-loose:
fontFamily: Poppins
fontSize: 16px
fontWeight: 500
lineHeight: 1.75
letterSpacing: 0px
body-sm:
fontFamily: Poppins
fontSize: 14px
fontWeight: 400
lineHeight: 1.86
letterSpacing: 0px
nav:
fontFamily: Poppins
fontSize: 16px
fontWeight: 600
lineHeight: 1.75
letterSpacing: 0px
button:
fontFamily: Poppins
fontSize: 16px
fontWeight: 600
lineHeight: 1.63
letterSpacing: 0px
label:
fontFamily: Poppins
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
rounded:
none: 0px
xs: 15px
sm: 40px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 36px
section: 40px
band: 52px
borderWidths:
thin: 1px
shadows:
sm: "rgba(40, 10, 3, 0.2) 0px 0px 10px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFBF6"
surface: "#F4EBE2"
surfaceRaised: "#ECE2D9"
text: "#280A03"
textMuted: "#565656"
border: "#D2BCB6"
accent: "#A88400"
accentFg: "#000000"
focusRing: "#FFCC0F"
elevation: shadow
dark:
bg: "#15130A"
surface: "#232119"
surfaceRaised: "#2F2D25"
text: "#FFFDF5"
textMuted: "#A6A49C"
border: "#3A3931"
accent: "#FFCC0F"
accentFg: "#0B0B0C"
focusRing: "#FFCC0F"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgb(255, 251, 246), rgb(244, 235, 226))"
- context: section
kind: linear
value: "linear-gradient(rgb(255, 246, 178), rgb(255, 251, 246))"
components:
button-primary:
typography: "{typography.body-md-loose}"
textColor: "{colors.ink}"
height: 48px
padding: "10px 20px 10px 20px"
rounded: 30px
backgroundColor: "{colors.primary}"
button-secondary:
typography: "{typography.body-md-loose}"
textColor: "{colors.ink}"
height: 48px
padding: "10px 20px 10px 20px"
rounded: 30px
backgroundColor: "{colors.surface-alt}"
button-text:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
height: 28px
button-text-sm:
typography: "{typography.nav}"
textColor: "rgb(255, 255, 255)"
height: 22.2188px
navigation:
typography: "{typography.body-md}"
textColor: "{colors.body}"
height: 28px
link:
typography: "{typography.nav}"
textColor: "{colors.body}"
link-sm:
typography: "{typography.heading}"
textColor: "{colors.ink}"
states:
other-focus:
target: other
state: focus
outline: none
input-focus:
target: input
state: focus
borderColor: "rgb(56, 152, 236)"
other-hover:
target: other
state: hover
opacity: 1
nav-hover:
target: nav
state: hover
textDecoration: "underline rgba(40, 10, 3, 0.6)"
breakpoints:
- width: 375
containerWidth: 345
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: true
headingPx: 46
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 738
gridColumns: 6
navLinksVisible: 0
menuToggleVisible: true
headingPx: 70
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 311
gridColumns: 3
navLinksVisible: 3
menuToggleVisible: false
headingPx: 80
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 397
gridColumns: 4
navLinksVisible: 3
menuToggleVisible: false
headingPx: 138
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1330
gridColumns: 4
navLinksVisible: 3
menuToggleVisible: false
headingPx: 138
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 26
gradientsFound: 2
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Bisqueria's design system embodies artisanal warmth and premium craftsmanship through a deliberately curated palette of warm neutrals anchored by a vibrant golden-yellow accent. The aesthetic balances elegantly restrained typography pairings—modern Poppins for interface copy and bold, expressive Bellota Text for display—with generous whitespace and color-blocking to create visual hierarchy through surface contrast rather than shadow depth. The system feels inviting and handmade, emphasizing the quality and freshness of baked goods through soft, approachable colors and generous breathing room. Every interaction rewards precision: rounded pill buttons and full-rounded inputs convey friendly accessibility, while sharp corners on image containers ground the premium product photography. The design prioritizes clarity and trust over visual complexity, making it distinctly suited to a contemporary bakery brand that values both craft heritage and modern ecommerce usability.
Key Characteristics
{colors.primary} — #FFCC0F) as the exclusive brand accent and primary call-to-action{rounded.xs} — 15px) to showcase photography{spacing.band} — 52px) creates breathing room between content zones{colors.primary} — #FFCC0F): Primary CTA buttons, active states, brand accent highlights, and emphasis callouts. This is the exclusive brand accent and should be the most reserved, highest-emphasis color in any interface.{colors.canvas} — #FFFBF6): Default page background. A warm off-white with cream undertones, providing a soft, inviting foundation for all content.{colors.surface-alt} — #F4EBE2): Alternating section backgrounds, secondary container fills, and surface accents that create subtle visual banding without harsh contrast.{colors.ink} — #280A03): Primary text color for all headings, labels, and high-contrast interface copy. Deep, warm brown that conveys premium quality.{colors.body} — #565656): Body copy and secondary text. Medium gray that provides legibility while remaining warm and accessible.{colors.on-primary} — #222222): Text and label color applied directly over brand-colored ({colors.primary}) surfaces to maintain contrast and readability.{colors.hairline} — #D2BCB6): 1px borders, dividers, and structural lines. A warm, desaturated mauve that separates content zones without visual harshness.{colors.neutral-1} — #333333): Decorative neutral; no measured semantic role. Used sparingly where deeper contrast is needed.Primary (Display & Headings): Bellota Text (https://fonts.googleapis.com/)
Secondary (Body & Interface): Poppins (https://fonts.googleapis.com/)
Fallback Stack: Poppins, Bellota Text, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Bellota Text | 138px | 900 | 1.12 | 0px | Largest hero heading; capitalized variant also available |
| Display XL | Bellota Text | 62px | 800 | 1.06 | 0px | Large section headline |
| Display LG | Bellota Text | 40px | 800 | 1.25 | 0px | Medium section heading |
| Heading | Bellota Text | 32px | 800 | 1.38 | 0px | Card titles and subsection heads |
| Body LG | Bellota Text | 18px | 600 | 1.56 | 0px | Emphasis text, callouts |
| Body MD Strong | Poppins | 16px | 500 | 1.13 | 0px | Product names, labels |
| Body MD Loose | Poppins | 16px | 500 | 1.75 | 0px | Link text with generous spacing |
| Body MD | Poppins | 16px | 400 | 1.63 | 0px | Standard body copy and list text |
| Button | Poppins | 16px | 600 | 1.63 | 0px | All button text; consistent weight across variants |
| Nav | Poppins | 16px | 600 | 1.75 | 0px | Navigation link text |
| Body SM | Poppins | 14px | 400 | 1.86 | 0px | Small body text, metadata |
| Label | Poppins | 14px | 400 | 1.43 | 0px | Form labels, input placeholder text |
Primary
{colors.primary} (#FFCC0F){colors.ink} (#280A03)10px 20px48px{rounded.none} (30px — pill shape)0px none{typography.button} (Poppins, 16px, weight 500, line-height 28px)Secondary
{colors.surface-alt} (#F4EBE2){colors.ink} (#280A03)10px 20px48px{rounded.none} (30px — pill shape)0px none{typography.button} (Poppins, 16px, weight 500, line-height 28px)Text / Ghost
{colors.neutral-1} (#222222)0px28px{rounded.none} (0px — sharp)0px noneDefault (Horizontal Menu)
{colors.body} (#565656){typography.nav} (Poppins, 16px, weight 600, line-height 1.75)0px0px none28pxDefault (In-body)
{colors.body} (#565656){typography.body-md-loose} (Poppins, 16px, weight 600, line-height 1.75)rgba(40, 10, 3, 0.6) on hover0px54px0px noneText Input (Default)
{colors.canvas} (#FFFBF6)1px solid {colors.hairline} (#D2BCB6){rounded.full} (9999px — fully rounded pill){colors.ink} (#280A03){colors.body} (#565656){typography.label} (Poppins, 14px, weight 400, line-height 1.43)#3898EC (blue); outline: 0pxSearch Input (With Icon)
Product Card
{colors.canvas} (#FFFBF6)1px solid {colors.hairline} (#D2BCB6){rounded.xs} (15px){spacing.md} to {spacing.lg} (16px to 20px){rounded.xs} (15px) to match card corners{typography.body-md} for descriptions, {typography.body-md-strong} for product namesSection Container
{colors.canvas} (#FFFBF6) and {colors.surface-alt} (#F4EBE2)0px (edge-to-edge on mobile; content column manages internal margins){spacing.band} (52px)Badge / Pill Label
{colors.primary} (#FFCC0F) or secondary color{colors.on-primary} (#222222){typography.body-sm} (Poppins, 14px, weight 400){rounded.full} (9999px){spacing.xs} to {spacing.sm} (8px to 12px)0px noneTab Button (Active)
{colors.primary} (#FFCC0F){colors.on-primary} (#222222){typography.button} (Poppins, 16px, weight 600){rounded.full} (9999px){spacing.sm} to {spacing.md} (12px to 16px)Tab Button (Inactive)
{colors.surface-alt} (#F4EBE2){colors.body} (#565656){typography.button} (Poppins, 16px, weight 600){rounded.full} (9999px){spacing.sm} to {spacing.md} (12px to 16px)Base Unit: {spacing.xs} (8px)
Scale:
{spacing.xxs} = 4px — micro-spacing between tightly grouped elements (icon + label){spacing.xs} = 8px — narrow margin between sibling components{spacing.sm} = 12px — small spacing within component groups{spacing.md} = 16px — standard padding and margin; default separation{spacing.lg} = 20px — generous spacing between distinct content blocks{spacing.xl} = 24px — emphasis spacing within larger modules{spacing.xxl} = 32px — major spacing between stacked sections{spacing.xxxl} = 36px — large gap before emphatic content{spacing.section} = 40px — internal padding for major content sections{spacing.band} = 52px — vertical spacing between full-width background bandsContext:
{spacing.md} to {spacing.lg} (16px to 20px){spacing.band} (52px)10px 20px (from component measurement; approximates {spacing.sm} vertical, {spacing.lg} horizontal){spacing.md} (16px) horizontal marginMeasured Content Columns by Breakpoint:
Grid Strategy:
Section Patterns:
Whitespace is the primary tool for establishing hierarchy and breathing room. The system favors:
{spacing.band} — 52px) to separate content zones visually1.63 on body copy) and headings (1.06 on display) to support legibility and visual airiness1px only where necessary) to keep layouts cleanThis creates an approachable, premium feel suitable to a bakery brand emphasizing craft quality.
{rounded.none} = 0px — text buttons, links (sharp, minimal-emphasis){rounded.xs} = 15px — product images, light card corners, subtle rounding{rounded.sm} = 40px — section dividers and decorative containers{rounded.full} = 9999px — buttons (pill shape), inputs (fully rounded), badges, tab indicatorsComponent Assignment:
{rounded.none} (30px — pill; treated as 9999px functional behavior){rounded.full} (9999px — fully rounded pill){rounded.xs} (15px — gentle corner rounding){rounded.sm} (40px — decorative; less common)1px — applied to input borders, card borders, and hairline dividersNo thick or medium border widths are employed in the system; the design relies on color contrast and whitespace rather than stroke weight for visual definition.
The Bisqueria design system employs a single-tier, flat elevation strategy. Depth is communicated through surface color changes (color-blocking) rather than layered shadows. A single shadow definition exists for specific interactive contexts (dropdowns, popovers):
| Level | Treatment | Use |
|---|---|---|
| Flat (Base) | No shadow | Default state for all cards, buttons, sections, containers |
| Elevated (Dropdown) | rgba(40, 10, 3, 0.2) 0px 0px 10px 0px | Dropdown menus, modals on desktop only |
Shadow Philosophy:
The single shadow ({rounded.xs} — 15px brown transparency) is soft and warmly toned, avoiding harsh black shadows that would feel cold against the warm cream and golden palette. Its use is minimal—reserved for interactive overlays that must appear "above" the page plane. Most depth relationships are established through alternating section background colors ({colors.canvas} and {colors.surface-alt}) and strategic whitespace.
The following opacity scale is embedded in the interaction and decorative system:
opacity: 1.00) — default text, full-color elementsopacity: 0.98) — subtle hover state dimming or ghost elementsopacity: 0.96) — reduced emphasis, disabled or secondary statesrgba(40, 10, 3, 0.6)) — hairline underline color on hover links; warm brown with reduced opacity for softnessThe system defines the following z-index stacking order:
| Layer | Z-index | Use |
|---|---|---|
| Base | 1–4 | Page content, cards, default sections |
| Sticky | 900 | Sticky header, persistent navigation |
| Modal | 1000–1001 | Dialog/modal overlay, highest layer |
Layering approach: Minimal stacking order; most content floats at z-index 1–3. Navigation (when sticky) elevates to 900 to remain visible above scrolling content. Modals and overlay dialogs use 1000 (backdrop) and 1001 (dialog box) to sit above all other content. This flat approach mirrors the shadow-light elevation strategy: depth is suggested through position and color, not layering complexity.
{colors.primary} (#FFCC0F) exclusively for primary CTAs and brand moments. Every use of the brand yellow should signal the highest-priority action or emphasis. Avoid applying it to secondary, tertiary, or decorative elements.border-radius: 9999px to preserve the friendly, approachable interaction pattern. Do not sharpen button corners.{colors.canvas} and {colors.surface-alt} to define regions visually instead of using shadows.{spacing.band} (52px) vertical rhythm between major content sections. This creates visual breathing room and supports scannability.{colors.ink} (#280A03) for all headings and primary labels to maintain the warm, premium brown identity.1px {colors.hairline} borders to cards, inputs, and dividers to separate content zones with minimal visual weight.rgba(40, 10, 3, 0.2) 0px 0px 10px 0px); avoid inventing additional shadow depths.border-radius: 0px is reserved for text buttons and links only; interactive surfaces must remain rounded.{colors.primary} to secondary, tertiary, or decorative elements. The yellow accent must remain exclusive to primary actions and brand moments.{spacing.md} (16px) between distinct content blocks; maintain breathing room per the system's generous whitespace philosophy.1px to cards, inputs, or dividers. The system maintains a clean, minimal stroke weight.| Viewport | Content Column | Grid Columns | Nav Links Visible | Menu Toggle | Largest Heading | Body Font | Section Padding-X |
|---|---|---|---|---|---|---|---|
| 375px | 345px | 1 | 0 | yes | 46px | 16px | 0px |
| 768px | 738px | 1–2 | 0 | yes | 70px | 16px | 0px |
| 1024px | 311px per col × 3 | 3 | 3 | no | 80px | 16px | 0px |
| 1280px | 397px per col × 4 | 4 | 3 | no | 138px | 16px | 0px |
| 1440px | 1330px max | 4 | 3 | no | 138px | 16px | 0px |
Breakpoint Behavior:
{typography.display-lg} (46px) to {typography.display-lg} (70px); full-width sections with 0px horizontal padding.{typography.display-xxl} (138px). Content arranges into 3–4 column grid with managed max-width.Minimum Interactive Size: 48px × 48px (measured from button height specification)
{spacing.md} (16px) horizontal padding, 48px height minimum54px minimum touch-friendly height (measured value; accommodates fingertip tap area)48px height minimum for text inputs and selects28px measured height; ensure spacing of at least {spacing.md} (16px) between adjacent nav items32px × 32px minimum (inferred from component patterns; adjust per actual icon implementation)Spacing Rule: Maintain at least {spacing.sm} (12px) gap between adjacent interactive targets to prevent accidental double-taps.
Mobile (375px–768px):
{typography.display-lg} (62px) → {typography.display-lg} (70px) depending on exact viewport≡ icon) appears in header0px (full-width, edge-to-edge){spacing.md} (16px) horizontal margin from viewport edgeTablet-to-Desktop Transition (1024px):
{typography.display-xl} (80px) minimum0px; internal content column manages max-width and centeringDesktop (1280px–1440px+):
1330px on 1440px+ viewport{typography.display-xxl} (138px)z-index: 900Image Scaling:
border-radius: {rounded.xs} (15px) to maintain card consistencyUse this condensed reference when implementing UI components:
{colors.primary} — #FFCC0F). Apply to primary buttons, active states, and brand moments. Do not overuse.{colors.canvas} — #FFFBF6). Warm off-white; default page and card fill.{colors.surface-alt} — #F4EBE2). Use for secondary section backgrounds, secondary buttons, and badge backgrounds.{colors.ink} — #280A03). Deep brown; all headlines, labels, and high-contrast text.{colors.body} — #565656). Medium gray; body copy, nav links, and secondary text.{colors.on-primary} — #222222). Apply only to text/labels over brand yellow surfaces.{colors.hairline} — #D2BCB6). 1px borders, card edges, dividers.{colors.neutral-1} — #333333). No measured role; use sparingly for deep-contrast decorative elements only.Start with color-blocking for layout definition. Alternate {colors.canvas} and {colors.surface-alt} to separate content zones vertically; avoid shadows and use borders sparingly ({colors.hairline} 1px only).
Apply typography hierarchy first using the Bellota/Poppins pair: all display/headings (40px+) in Bellota Text 800–900 weight; all body/interface (16px and below) in Poppins 400–600 weight. Refer to the Typography Hierarchy table exactly.
Construct buttons as pill-shaped (border-radius: 9999px) primary ({colors.primary} yellow) or secondary ({colors.surface-alt} cream). Button height must equal 48px with padding 10px 20px. Text must use {typography.button} (Poppins 16px weight 600).
Build inputs as fully rounded pills (border-radius: 9999px) with 1px {colors.hairline} border, {colors.canvas} background. Focus state: border-color #3898EC, outline 0px. Label text uses {typography.label} (Poppins 14px).
Space components using the {spacing.band} (52px) vertical rhythm between sections and {spacing.md} (16px) for standard component margins. Do not reduce section spacing below 52px.
Apply the single shadow only to dropdowns/modals: rgba(40, 10, 3, 0.2) 0px 0px 10px 0px. All other surfaces remain flat (no shadow).
Test responsive layout at five breakpoints: 375px (mobile, 1 column, menu toggle visible), 768px (tablet, 1–2 columns, toggle visible), 1024px (desktop, 3 columns, toggle hidden, nav visible), 1280px (4 columns, max-width applied), 1440px (full width centering). Ensure nav toggle switches at exactly 1024px boundary.
Validate touch targets: buttons/inputs minimum 48px height, links minimum 54px, navigation items minimum 28px with {spacing.md} (16px) margins. Maintain {spacing.sm} (12px) gap between interactive elements.
Review all text for Poppins consistency: Poppins must be used for buttons, nav, labels, body copy, and small text. Bellota Text appears only in display/heading sizes (32px and above). Never mix fonts within a component.
Verify color exclusivity: {colors.primary} (yellow) appears only on primary CTAs, brand moments, and active states. All other surfaces use canvas/surface-alt/neutral scale. No custom colors beyond the 8 measured tokens.
Semantic Status Colors Unavailable: The extracted site does not expose error, success, warning, or info color states in its measured styles. No semantic status ramp exists in this system; do not invent one. Implement error/success handling through client review or future design iteration.
Interaction State Coverage Limited: The extraction captured general hover and focus behaviors from stylesheets, but not all possible states (e.g., :active, :disabled, :visited on links). Hover and focus rules provided are the only states the extraction could verify; additional states should be inferred from the primary and secondary color schemes or require explicit design review.
Dark Mode / Derived Themes Not Included: The site was measured in light mode only. No dark-mode variant was observed. Do not extrapolate a derived dark theme; that would require explicit design measurement or client specification.
Animation & Transition Timing: The extraction did not capture CSS transition durations, easing curves, or keyframe animations. Implement motion design based on modern defaults (e.g., 200ms ease-in-out for standard interactions) or await explicit animation guidelines.
Nested Component Styling: Only top-level button, input, navigation, and link components were fully extracted. Nested states (e.g., a button inside a card, an input inside a modal) may require contextual refinement not captured here.
Screens Behind Authentication: E-commerce checkout, user account, and admin surfaces were not visited during extraction. Design patterns for authenticated flows are not included in this system.
Decorative Gradients Not Synthesized: Two linear gradient definitions were extracted (linear-gradient(rgb(255, 251, 246), rgb(244, 235, 226)) and linear-gradient(rgb(255, 246, 178), rgb(255, 251, 246))), but their exact component assignments and usage contexts were not fully mapped. Apply these gradients to section backgrounds per the original design intent or simplify to color-blocks using surface palette.
Accessibility Features: ARIA labels, focus indicators, and keyboard navigation specifics were not exhaustively measured. Implement WCAG 2.1 AA compliance independently; this system defines visual roles and spacing, not semantic markup or keyboard interaction sequences.
One Neutral Color Unassigned: {colors.neutral-1} (#333333) was measured but has no explicit semantic role. It is reserved for decorative or exceptional contrast scenarios; use sparingly and document context when applied.