Estrella Gracia — Design System Reference

1. Visual Theme & Atmosphere

Estrella Gracia’s portfolio is a Valencia-based designer’s calling card built in Framer, and it leans on typography and a single electric blue to carry the brand. The canvas is a soft off-white (rgb(248, 248, 248)) with pure black text, and headings switch to Sentient, a contemporary serif, set small (18px) with tight negative tracking so it reads as a refined editorial voice rather than a shouty display face. Body and UI copy sit in Inter and Stack Sans Text, a clean grotesk pairing that keeps the serif special. One saturated azure (rgb(0, 128, 255)) is the signature, used on the “Let’s talk!” call to action and on social handles, while a deep navy (rgb(14, 26, 62)) appears as a dark counter-surface. The site also shows small personal touches (local city, a playful “probably sunny” line and a live clock), which keeps the tone warm and human.

2. Color Palette & Roles

Foundation

• rgb(248, 248, 248) — page canvas (soft off-white)
• rgb(0, 0, 0) — primary text
• rgb(95, 95, 95) — secondary heading gray (h3)

Brand accent

• rgb(0, 128, 255) — azure; primary CTA background and inline handle links
• rgb(220, 237, 255) — pale blue; CTA hover background

Deep surface

• rgb(14, 26, 62) — midnight navy block, the darkest surface (luminance 0.104)

Surfaces & glass

• rgba(255, 255, 255, 0.8) — translucent white layer (frosted overlay)
• rgba(165, 165, 165, 0.15) — faint gray wash for subtle panels
• rgb(146, 146, 146) — mid gray surface

The system is a neutral frame with exactly one chromatic voice. Blue is an action color, not decoration.

3. Typography Rules

Three families, each with a clear job.

• Sentient (serif fallback) — headings; 18px, weight 400, line-height 21.6px, letter-spacing -0.72px
• Inter — paragraphs; 16px, weight 500, line-height 19.2px
• Stack Sans Text — links; 15px, weight 400, line-height 21px, letter-spacing -0.45px
• Inter Medium — buttons; 16px, weight 500, letter-spacing -0.2px

Principles

• Negative tracking everywhere (-0.2px to -0.72px): the type is pulled tight, which gives a confident, designed feel at small sizes.
• Headings are small. Hierarchy comes from the serif switch and gray tone (rgb(95, 95, 95)), not from scale.
• Body text uses weight 500 rather than 400, so even paragraphs have presence on the light canvas.

4. Component Stylings

Primary CTA (“Let’s talk!”)

• Background rgb(0, 128, 255); hover swaps to rgb(220, 237, 255) pale blue
• Pill-shaped (100px radius present in the system)
• No box-shadow, no transform on hover; the color swap is the whole interaction

Text links (Work, @handles)

• Transparent background; handles use rgb(0, 128, 255)
• Focus shows a 1px auto outline; no hover change was captured

Copy-to-clipboard email

• The email address is a “Copy component” with a “Copied” confirmation state, a small utility micro-interaction.

Border radius

• 100px, 16px, 10px, 4px — a four-step scale from pill to near-square.

Shadows

• None detected.

5. Layout Principles

• Framer-generated layout with breakpoints at 809 / 1199 / 1439 / 1600, so the page reflows at tablet, laptop and wide-desktop widths.
• Body margin and padding are 0; spacing is handled inside Framer frames.
• Content is sparse: contact details, location, a live time readout and social links (LinkedIn, Instagram, Behance, YouTube) sit as a compact column rather than a full navigation system.
• Large dark navy blocks (rgb(14, 26, 62)) break up the light page and give sections weight.

6. Depth & Elevation

Depth is built from surface color and translucency, not shadow.

• Off-white canvas rgb(248, 248, 248) (luminance 0.973) under frosted white rgba(255, 255, 255, 0.8) overlays.
• A faint gray wash (rgba(165, 165, 165, 0.15)) for secondary panels.
• The navy block (rgb(14, 26, 62)) is the single high-contrast depth cue.
• Framer Motion handles animated transitions between states.

7. Do’s and Don’ts

Do

• Keep the canvas soft off-white rgb(248, 248, 248), never pure white.
• Use azure rgb(0, 128, 255) only for actions and handles.
• Set headings in a serif (Sentient) and everything else in a clean grotesk.
• Apply negative letter-spacing to small text.
• Swap to pale blue rgb(220, 237, 255) for hover.

Don’t

• Don’t add drop shadows; use surface and translucency.
• Don’t scale headings up to create hierarchy; this system keeps them small.
• Don’t introduce a second saturated color beside the azure.
• Don’t leave links in the browser default blue (rgb(0, 0, 238)); that value only appears as an unstyled fallback in the extraction.

8. Responsive Behavior

Breakpoints at 809, 1199, 1439 and 1600px (Framer’s standard set). Type sizes are small and fixed, so they carry across breakpoints without needing fluid scaling; layout changes happen in the Framer frames. The pill radius and compact CTA remain usable at touch size.

9. Agent Prompt Guide

Build a UI that matches Estrella Gracia’s design language.

Use a soft off-white canvas rgb(248, 248, 248) with black text. Set headings in Sentient (serif) at ~18px, weight 400, letter-spacing -0.72px, in gray rgb(95, 95, 95). Set paragraphs in Inter 16px weight 500, links in Stack Sans Text 15px with -0.45px tracking, and buttons in Inter Medium 16px. The only accent is azure rgb(0, 128, 255): a pill-shaped (100px) CTA that turns pale blue rgb(220, 237, 255) on hover, plus blue inline handles. Use a midnight navy block rgb(14, 26, 62) for one dark section. No shadows; use translucent white rgba(255, 255, 255, 0.8) overlays for depth. Keep personal touches: location, a live clock, and a click-to-copy email.

Generated by Sparkbites — extracted from live CSS analysis