Wasi Noori

Generated Nov 2, 2026

DESIGN.md for profile.af

profile.af18 colors6 componentsPlus Jakarta Sans

Remix

12 screenshots captured· profile.af

1 / 12 · Profile.af — One link for everything you are. · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Profile
description: |
  Profile.af embodies a clean, modern design system built around professional
  portfolio creation and personal branding. The aesthetic is contemporary and
  minimal, favoring generous whitespace, a neutral color foundation, and
  strategic use of accent colors to guide focus and drive action. The system
  prioritizes clarity and accessibility through careful typographic hierarchy
  and component clarity. The mood is one of confidence and inclusivity—designed
  to make professional profiles feel achievable and beautiful, whether for a
  freelancer or an established professional. The layered-micro shadow strategy
  creates barely-there depth, maintaining flatness while adding tactile
  refinement when needed.
source:
  url: "https://profile.af"
  pagesAnalyzed: 6
  extractedAt: 2026-11-02
  tokensMeasured: true
colors:
  primary: "#17191E"
  accent: "#2563EB"
  canvas: "#FFFFFF"
  on-primary: "#FFFFFF"
  ink: "#5F6673"
  body: "#6B7280"
  muted: "#D4D4D8"
  hairline: "#E5E7EB"
  success: "#15803D"
  info: "#6D5CD3"
  accent-1: "#DFDBFB"
  accent-2: "#8B919C"
  accent-3: "#FD71AF"
  accent-4: "#BBF7D0"
  accent-5: "#101216"
  accent-6: "#C3E6CB"
  neutral-1: "#646464"
  neutral-2: "#EEF0F3"
  neutral-3: "#F0FDF4"
typography:
  display-xl:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -2.24px
  display-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -1.68px
  display-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -1.54px
  display-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -1.2px
  heading-xl:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.75px
  heading-xl-strong:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.75px
  heading-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: -0.7px
  heading-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.56
    letterSpacing: 0px
  heading-xs:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0.6px
    textTransform: uppercase
  body-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-xs:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-xs-tight:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-xs-strong:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  nav-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  nav-xs:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 13.12px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  button-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: -0.07px
  button-sm-inter:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: -0.07px
  label-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  label-sm-inter:
    fontFamily: Inter
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  label-xs:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12.8px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  caption-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  caption-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 11.52px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  caption-md-strong:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 11.52px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1.38px
    textTransform: uppercase
  caption-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-sm-strong:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.9px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 8px
  sm: 10px
  md: 12px
  lg: 14px
  xl: 16px
  xxl: 22px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 56px
  band: 64px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(17, 19, 24, 0.05) 0px 1px 2px 0px"
  md: "rgba(0, 0, 0, 0.08) 0px 4px 12px 0px"
  lg: "rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.8) 0px 40px 80px -40px"
  xl: "rgb(255, 255, 255) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 6px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px"
elevationStrategy: layered-micro
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#F1F1F2"
    text: "#5F6673"
    textMuted: "#6B7280"
    border: "#E5E7EB"
    accent: "#17191E"
    accentFg: "#FFFFFF"
    focusRing: "#17191E"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#F6F6F6"
    textMuted: "#9E9E9F"
    border: "#353536"
    accent: "#7B849A"
    accentFg: "#0B0B0C"
    focusRing: "#5E667A"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(100deg, rgb(73, 204, 249) 0%, rgb(123, 104, 238) 35%, rgb(253, 113, 175) 68%, rgb(255, 200, 0) 100%)"
  - context: section
    kind: radial
    value: "radial-gradient(90% 170% at 14% 0%, rgba(102, 71, 240, 0.07), rgba(0, 0, 0, 0) 56%), radial-gradient(75% 150% at 82% -25%, rgba(118, 18, 250, 0.05), rgba(0, 0, 0, 0) 58%), none"
components:
  button-filled:
    textColor: "rgb(17, 19, 24)"
    border: "1px solid rgb(212, 216, 223)"
    height: 48px
    padding: "12px 22.4px 12px 22.4px"
    fontSize: 15.2px
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 600
    lineHeight: 1.32
    rounded: "{rounded.md}"
    backgroundColor: "rgb(247, 248, 250)"
  button-filled-sm:
    typography: "{typography.body-xs-strong}"
    textColor: "rgb(17, 19, 24)"
    border: "1px solid rgb(212, 216, 223)"
    height: 40px
    padding: "8.8px 16px 8.8px 16px"
    rounded: "{rounded.sm}"
    backgroundColor: "rgb(247, 248, 250)"
  button-primary:
    textColor: "{colors.on-primary}"
    height: 48px
    padding: "12px 22.4px 12px 22.4px"
    fontSize: 15.2px
    boxShadow: "rgba(17, 19, 24, 0.05) 0px 1px 2px 0px"
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 600
    lineHeight: 1.32
    rounded: "{rounded.md}"
    backgroundColor: "{colors.primary}"
  button-primary-sm:
    typography: "{typography.body-xs-strong}"
    textColor: "{colors.on-primary}"
    height: 40px
    padding: "8.8px 16px 8.8px 16px"
    boxShadow: "rgba(17, 19, 24, 0.05) 0px 1px 2px 0px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  card-featured:
    textColor: "{colors.on-primary}"
    border: "1px solid rgba(255, 255, 255, 0.08)"
    padding: "28px 28px 28px 28px"
    fontSize: 16px
    boxShadow: "rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.8) 0px 40px 80px -40px"
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xxl}"
    backgroundColor: "rgb(22, 24, 29)"
  card:
    textColor: "{colors.neutral-1}"
    border: "1px solid rgb(232, 232, 232)"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0.08) 0px 4px 12px 0px"
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.canvas}"
  card-sm:
    textColor: "rgb(17, 19, 24)"
    border: "1px solid {colors.hairline}"
    fontSize: 16px
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xxl}"
    backgroundColor: "{colors.canvas}"
  badge-filled:
    typography: "{typography.caption-sm-strong}"
    textColor: "rgb(166, 174, 187)"
    border: "1px solid rgba(255, 255, 255, 0.09)"
    height: 28.0938px
    padding: "4.8px 9.6px 4.8px 9.6px"
    rounded: 999px
    backgroundColor: "rgba(255, 255, 255, 0.05)"
  badge-filled-sm:
    typography: "{typography.caption-md}"
    textColor: "{colors.success}"
    border: "1px solid {colors.accent-4}"
    height: 24.0469px
    padding: "2.4px 8.8px 2.4px 8.8px"
    rounded: 999px
    backgroundColor: "{colors.neutral-3}"
  navigation:
    typography: "{typography.body-xs-tight}"
    textColor: "rgb(17, 19, 24)"
    height: 36px
  footer:
    textColor: "rgb(17, 19, 24)"
    border: "1px solid {colors.hairline}"
    fontSize: 16px
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 400
    lineHeight: 1.5
    backgroundColor: "rgb(247, 248, 250)"
  footer-sm:
    typography: "{typography.caption-lg}"
    textColor: "{colors.ink}"
    padding: "24px 20px 24px 20px"
  link:
    textColor: "rgb(17, 19, 24)"
    border: "1px solid {colors.hairline}"
    padding: "24px 24px 24px 24px"
    fontSize: 16px
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.canvas}"
  link-sm:
    typography: "{typography.nav-sm}"
    textColor: "{colors.ink}"
    padding: "8px 12px 8px 12px"
    rounded: "{rounded.xs}"
states:
  input-focus:
    target: input
    state: focus
    outline: "transparent solid 2px"
    borderColor: "{colors.accent}"
    outlineColor: transparent
    outlineWidth: 2px
  input-hover:
    target: input
    state: hover
    borderColor: transparent
    backgroundColor: currentcolor
  other-hover:
    target: other
    state: hover
    backgroundColor: "rgba(249, 250, 251, 0.6)"
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
  button-focus-visible:
    target: button
    state: focus-visible
    rounded: 6px
  button-active:
    target: button
    state: active
    transform: "translateY(0.5px)"
  button-hover:
    target: button
    state: hover
    borderColor: "rgb(194, 199, 208)"
  button-disabled:
    target: button
    state: disabled
    opacity: 0.5
    boxShadow: none
    transform: none
  nav-disabled:
    target: nav
    state: disabled
    opacity: 0.4
  nav-hover:
    target: nav
    state: hover
    backgroundColor: transparent
  other-focus:
    target: other
    state: focus
    outline: none
  input-disabled:
    target: input
    state: disabled
    textColor: "rgb(148, 163, 184)"
    backgroundColor: "rgb(241, 245, 249)"
  link-hover:
    target: link
    state: hover
    textDecoration: underline
  card-hover:
    target: card
    state: hover
    boxShadow: "rgba(15, 23, 42, 0.16) 0px 10px 28px -10px"
    transform: "translateY(-2px)"
    borderColor: "rgb(226, 232, 240)"
  card-active:
    target: card
    state: active
    transform: "translateY(0px)"
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 5
    navLinksVisible: 3
    menuToggleVisible: false
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 5
    navLinksVisible: 3
    menuToggleVisible: false
    headingPx: 53
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 5
    navLinksVisible: 3
    menuToggleVisible: false
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1280
    gridColumns: 5
    navLinksVisible: 3
    menuToggleVisible: false
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 61
  gradientsFound: 2
  rolesUnassigned: 9
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: true

Design System Inspired by Profile.af

1. Visual Theme & Atmosphere

Profile.af embodies a clean, modern design system built around professional portfolio creation and personal branding. The aesthetic is contemporary and minimal, favoring generous whitespace, a neutral color foundation, and strategic use of accent colors to guide focus and drive action. The system prioritizes clarity and accessibility through careful typographic hierarchy and component clarity. The mood is one of confidence and inclusivity—designed to make professional profiles feel achievable and beautiful, whether for a freelancer or an established professional. The layered-micro shadow strategy creates barely-there depth, maintaining flatness while adding tactile refinement when needed.

Key Characteristics

Clean, professional modernism with deliberate use of negative space
High-contrast, bold typography hierarchy for scanning and impact
Accent colors used sparingly for call-to-action and brand moments
Minimal, carefully-considered shadows for subtle depth
Responsive design that scales gracefully from mobile to desktop
Component-driven architecture with clear pattern consistency
Decorative accent palette for theme customization and visual interest

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #17191E): Primary button fills, active states, brand accent, and dark interactive elements. The darkest neutral in the system, used for primary CTAs and brand moments.

Accent Colors

Secondary Accent ({colors.accent} — #2563EB): Hero bands, decorative accents, and secondary highlighting. A vibrant blue used sparingly for visual interest.
Decorative – Lavender ({colors.accent-1} — #DFDBFB): Accent palette for theme customization and decorative surfaces.
Decorative – Slate ({colors.accent-2} — #8B919C): Neutral-toned decorative accent.
Decorative – Pink ({colors.accent-3} — #FD71AF): Bright pink accent for theme variations.
Decorative – Mint ({colors.accent-4} — #BBF7D0): Soft mint for supportive visual touches.
Decorative – Near Black ({colors.accent-5} — #101216): Deep neutral decorative accent.
Decorative – Soft Green ({colors.accent-6} — #C3E6CB): Muted green accent for theme flexibility.

Interactive

Link / On Primary ({colors.canvas} — #FFFFFF): Text on primary-colored backgrounds; also the default page canvas and surfaces.
Success State ({colors.success} — #15803D): Confirmation, completed states, and validation messaging.
Info / Secondary Accent ({colors.info} — #6D5CD3): Informational states and secondary highlights.

Neutral Scale

Ink / Headings ({colors.ink} — #5F6673): Primary text for headings, high-contrast semantic content.
Body Copy ({colors.body} — #6B7280): Default body text color for paragraphs and standard copy.
Secondary Text / Muted ({colors.muted} — #D4D4D8): Captions, secondary text, and reduced-emphasis labels.
Neutral Accent ({colors.neutral-1} — #646464): Mid-tone neutral for additional contrast layers.
Neutral Light ({colors.neutral-2} — #EEF0F3): Light neutral surface for subtle background variations.
Neutral Success Light ({colors.neutral-3} — #F0FDF4): Success-adjacent light surface, used in success confirmation backgrounds.

Surface & Borders

Canvas ({colors.canvas} — #FFFFFF): Default page background and primary surface color.
Hairline / Border ({colors.hairline} — #E5E7EB): 1px borders, dividers, and subtle stroke lines throughout the system.

3. Typography Rules

Font Family

Primary Font: Plus Jakarta Sans (fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif)

Used for headings, display sizes, buttons, labels, and navigation.

Secondary Font: Inter (fallback: system-ui, sans-serif)

Used selectively for strong headings and specific emphasis roles.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	Plus Jakarta Sans	64px	800	1.05	-2.24px	Hero headline, maximum impact
Display LG	Plus Jakarta Sans	48px	800	1.05	-1.68px	Large section headings
Display MD	Plus Jakarta Sans	44px	800	1.05	-1.54px	Medium display size
Display SM	Plus Jakarta Sans	40px	800	1.00	-1.2px	Small display size
Heading XL (Inter)	Inter	30px	800	1.2	-0.75px	Strong heading alternate
Heading XL	Plus Jakarta Sans	30px	700	1.2	-0.75px	Primary heading
Heading LG	Plus Jakarta Sans	28px	800	1.15	-0.7px	Large heading
Heading MD	Inter	24px	700	1.33	0px	Medium heading
Heading SM	Plus Jakarta Sans	18px	700	1.56	0px	Small heading
Heading XS	Plus Jakarta Sans	12px	700	1.33	0.6px	Smallest heading, uppercase
Body LG	Plus Jakarta Sans	18px	400	1.65	0px	Large body text
Body MD	Plus Jakarta Sans	16px	600	1.5	0px	Medium body, semibold
Body SM	Plus Jakarta Sans	15px	400	1.5	0px	Standard body size
Body XS	Plus Jakarta Sans	14px	400	1.63	0px	Small body text
Body XS Tight	Plus Jakarta Sans	14px	400	1.43	0px	Compact body line-height
Body XS Strong	Plus Jakarta Sans	14px	600	1.43	0px	Small body, bold
Button SM	Plus Jakarta Sans	14px	600	1.43	-0.07px	Button text
Label SM	Plus Jakarta Sans	14.4px	400	1.67	0px	Input labels, standard
Label XS	Plus Jakarta Sans	12.8px	600	1.5	0px	Small label, bold
Nav SM	Plus Jakarta Sans	14px	500	1.43	0px	Navigation link
Nav XS	Plus Jakarta Sans	13.12px	600	1.5	0px	Small navigation
Caption MD	Plus Jakarta Sans	11.52px	600	1.5	0px	Caption, bold
Caption MD Strong	Plus Jakarta Sans	11.52px	700	1.5	1.38px	Caption, bold uppercase
Caption LG	Plus Jakarta Sans	12px	400	1.33	0px	Large caption
Caption SM	Plus Jakarta Sans	11px	400	1.5	0px	Small caption
Caption SM Strong	Plus Jakarta Sans	11px	600	1.5	0px	Small caption, bold
Caption XS	Plus Jakarta Sans	10px	600	1.00	0.9px	Smallest caption, uppercase

Principles

Typographic hierarchy is driven by weight and size, not just size alone. Display sizes use 800 weight to create impact; body text remains at 400–600.
Negative letter-spacing on display sizes creates visual tightness and premium feel. Do not normalize spacing on headlines; the tracking is intentional.
Plus Jakarta Sans is the workhorse font, applied to the majority of roles including buttons, labels, and navigation. Inter is used selectively for strong emphasis headings.
Line height increases as size decreases, maintaining readability and visual rhythm across all sizes.
Uppercase styling is applied only to small captions and labels, never to body copy or headings.

4. Component Stylings

Buttons

Primary Button (Default)

Background: {colors.primary} — #17191E
Text Color: {colors.canvas} — #FFFFFF
Font: Plus Jakarta Sans, 15.2px, weight 600, line-height 20px, letter-spacing -0.07px
Padding: 12px 22.4px
Height: 48px
Border Radius: {rounded.md} — 12px
Border: 1px solid transparent
Box Shadow: rgba(17, 19, 24, 0.05) 0px 1px 2px 0px

Primary Button (Small)

Background: {colors.primary} — #17191E
Text Color: {colors.canvas} — #FFFFFF
Font: Plus Jakarta Sans, 14px, weight 600, line-height 20px, letter-spacing -0.07px
Padding: 8.8px 16px
Height: 40px
Border Radius: {rounded.sm} — 10px
Border: 1px solid transparent
Box Shadow: rgba(17, 19, 24, 0.05) 0px 1px 2px 0px

Secondary Button (Default)

Background: rgb(247, 248, 250) — light neutral surface
Text Color: {colors.primary} — #17191E
Font: Plus Jakarta Sans, 15.2px, weight 600, line-height 20px, letter-spacing -0.07px
Padding: 12px 22.4px
Height: 48px
Border Radius: {rounded.md} — 12px
Border: 1px solid rgb(212, 216, 223)
Box Shadow: none

Secondary Button (Small)

Background: rgb(247, 248, 250)
Text Color: {colors.primary} — #17191E
Font: Plus Jakarta Sans, 14px, weight 600, line-height 20px, letter-spacing -0.07px
Padding: 8.8px 16px
Height: 40px
Border Radius: {rounded.sm} — 10px
Border: 1px solid rgb(212, 216, 223)
Box Shadow: none

Button States

Hover: Box shadow increases to 0 4px 14px -4px var(--pf-btn-ring), active transform: translateY(0.5px)
Disabled: Opacity 0.5, no shadow, no transform
Focus Visible: Outline 2px solid var(--pf-primary), border-radius 6px

Cards & Containers

Default Card

Background: {colors.canvas} — #FFFFFF
Border: 1px solid {colors.hairline} — #E5E7EB
Border Radius: {rounded.lg} — 14px
Box Shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px
Padding: 0px (content handled by inner layout)
Text Color: {colors.neutral-1} — #646464
Font: Plus Jakarta Sans, 16px, weight 400, line-height 24px

Featured Card (Dark)

Background: rgb(22, 24, 29) — dark surface
Border: 1px solid rgba(255, 255, 255, 0.08) — subtle light border
Border Radius: {rounded.xxl} — 22px
Box Shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.8) 0px 40px 80px -40px
Padding: 28px
Text Color: {colors.canvas} — #FFFFFF
Font: Plus Jakarta Sans, 16px, weight 400, line-height 24px

Small Card

Background: {colors.canvas} — #FFFFFF
Border: 1px solid {colors.hairline} — #E5E7EB
Border Radius: {rounded.xxl} — 22px
Box Shadow: none
Text Color: {colors.primary} — #17191E
Font: Plus Jakarta Sans, 16px, weight 400, line-height 24px

Card Hover State

Box Shadow: rgba(15, 23, 42, 0.16) 0px 10px 28px -10px
Transform: translateY(-2px)
Border Color: rgb(226, 232, 240)

Inputs & Forms

Input Field (Base)

Background: {colors.canvas} — #FFFFFF
Border: 1px solid {colors.hairline} — #E5E7EB
Border Radius: {rounded.xs} — 8px
Font: Plus Jakarta Sans, 14.4px, weight 400, line-height 1.67
Padding: 12px 16px (standard inferred spacing)
Text Color: {colors.ink} — #5F6673
Placeholder Color: {colors.muted} — #D4D4D8

Input Focus State

Outline: 2px solid {colors.primary} — #17191E
Box Shadow: 0 0 0 3px var(--pf-ring)
Border Color: transparent

Input Hover State

Border Color: var(--pf-border-strong) (mid-tone border highlight)

Input Disabled State

Text Color: rgb(148, 163, 184) — muted text
Background: rgb(241, 245, 249) — very light surface
Border Color: unchanged

Form Label

Font: Plus Jakarta Sans, 12.8px, weight 600, line-height 1.5
Text Color: {colors.ink} — #5F6673
Margin Bottom: {spacing.xs} — 8px

Navigation

Nav Link (Default)

Background: transparent
Text Color: {colors.primary} — #17191E
Font: Plus Jakarta Sans, 14px, weight 400, line-height 20px
Padding: 0px (layout handled by container)
Border Radius: {rounded.none} — 0px
Hover: Text decoration underline

Nav Link Secondary (Small)

Background: transparent
Text Color: {colors.primary} — #17191E
Font: Plus Jakarta Sans, 14px, weight 500, line-height 20px
Padding: 8px 12px
Border Radius: {rounded.xs} — 8px
Hover: Background color rgb(243, 244, 246) (light neutral)

Badges

Badge (Filled Default)

Background: rgba(255, 255, 255, 0.05) — very subtle light surface
Border: 1px solid rgba(255, 255, 255, 0.09)
Border Radius: {rounded.full} — 9999px (pill shape)
Text Color: rgb(166, 174, 187) — light neutral text
Font: Plus Jakarta Sans, 11px, weight 600, line-height 16.5px
Padding: 4.8px 9.6px
Height: 28.09px

Badge (Success)

Background: {colors.neutral-3} — #F0FDF4 (success light surface)
Border: 1px solid {colors.accent-4} — #BBF7D0 (mint border)
Border Radius: {rounded.full} — 9999px
Text Color: {colors.success} — #15803D
Font: Plus Jakarta Sans, 11.52px, weight 600, line-height 17.28px
Padding: 2.4px 8.8px
Height: 24.05px

5. Layout Principles

Spacing System

The design system uses an 8px base unit with a logarithmic scale for flexibility and rhythm:

XXS — {spacing.xxs} (4px): Micro spacing, tight kerning in components
XS — {spacing.xs} (8px): Minimal gutters, label–input gaps
SM — {spacing.sm} (12px): Compact component internals
MD — {spacing.md} (16px): Default padding, primary internal spacing
LG — {spacing.lg} (20px): Breathing room between elements
XL — {spacing.xl} (24px): Generous padding, card internals
XXL — {spacing.xxl} (32px): Section breaks, large component padding
XXXL — {spacing.xxxl} (40px): Substantial vertical rhythm
Section — {spacing.section} (56px): Between major content sections
Band — {spacing.band} (64px): Full-width band spacing

Grid & Container

Mobile (375px): Single-column layout, 0px horizontal padding (content edge-to-edge with internal gutter)
Tablet (768px): Multi-column; content respects container boundaries
Desktop (1024px–1440px): Maximum content width constrained to 1280px; nav links and layout remain consistent
Column Count: Measured system uses 5-column grid at 768px and above; mobile uses 3-column responsive grid
Horizontal Padding: 0px at all breakpoints; padding applied to inner containers and card components

Whitespace Philosophy

Whitespace is strategic and measured. The system favors generous padding within cards and containers, with breathing room between major sections achieved via {spacing.section} and {spacing.band} values. Sections and layouts expand vertically to create rhythm; horizontal space is controlled through container widths and internal padding rather than edge margins. This creates a premium, uncluttered aesthetic that guides the user through content hierarchically.

Border Radius Scale

{rounded.none} — 0px (navigation, sharp footers)
{rounded.xs} — 8px (input fields, small interactive elements)
{rounded.sm} — 10px (buttons, small buttons)
{rounded.md} — 12px (standard buttons, moderate containers)
{rounded.lg} — 14px (card containers, primary surfaces)
{rounded.xl} — 16px (larger card variants, link containers)
{rounded.xxl} — 22px (featured cards, premium components)
{rounded.full} — 9999px (badges, avatars, pill-shaped elements)

Component Radius Assignments:

Buttons: {rounded.sm} (10px) or {rounded.md} (12px)
Cards: {rounded.lg} (14px), {rounded.xl} (16px), or {rounded.xxl} (22px)
Inputs: {rounded.xs} (8px)
Badges: {rounded.full} (9999px)

Border Widths

Thin — 1px: Applied to button borders, card borders, and input outlines. Standard stroke weight throughout the system.

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow	Navigation, footer, background surfaces
Micro	`rgba(17, 19, 24, 0.05) 0px 1px 2px 0px`	Buttons at rest; subtle lift
Base	`rgba(0, 0, 0, 0.08) 0px 4px 12px 0px`	Default cards; standard depth
Premium	`rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.8) 0px 40px 80px -40px`	Featured dark cards; dramatic depth with inner light border
Custom	`rgb(255, 255, 255) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 6px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`	Focus rings and special interactive states

Shadow Philosophy

The system employs a layered-micro shadow strategy: many near-transparent layers stacked for a barely-there lift rather than bold, obvious shadows. This creates sophistication and subtle depth without flattening the design or adding visual weight. Buttons receive the smallest shadow (0.05 opacity, 2px blur); default cards sit slightly higher (0.08 opacity, 12px blur); featured dark cards use a dramatic inset light border paired with a deep drop shadow for dimensional elegance. The focus ring shadow includes multiple layers to create a glow effect without harsh outlines.

Opacity Levels

45% (0.45): Reduced opacity for semi-transparent overlays or decorative elements
70% (0.70): Moderate transparency for hover states and layered interactions
80% (0.80): Higher opacity for emphasis while maintaining some transparency

Z-index / Layering

Base — 1: Default content and components
Dropdown — 50: Dropdown menus, popovers, and floating panels above base content
Sticky — 100: Sticky headers, navigation bars, and pinned elements
Modal — 9999: Modal dialogs, overlays, and full-screen interactions

7. Do's and Don'ts

Do

Use {colors.primary} (#17191E) for all primary CTAs and brand moments to maintain consistency
Apply button shadows sparingly; the micro shadow (rgba(17, 19, 24, 0.05) 0px 1px 2px 0px) is sufficient for most buttons
Maintain letter-spacing exactly as specified in the typography table, especially negative tracking on display sizes (-2.24px on 64px headlines, etc.)
Use the {spacing.md} (16px) base padding for standard component internals and section gutters
Apply border-radius consistently per component role: buttons use {rounded.sm} or {rounded.md}; cards use {rounded.lg}, {rounded.xl}, or {rounded.xxl}; badges always use {rounded.full}
Scale headings using the display scale (display-xl, display-lg, display-md) for hero content; use heading scale for section headings
Use Plus Jakarta Sans as the primary font for buttons, navigation, and labels; reserve Inter for strong emphasis headings
Apply focus states consistently: 2px solid outline with var(--pf-primary) color and 4px ring shadow for accessibility
Stack and layer shadows as specified in the elevation table; do not invent new shadow values
Use the card hover state transformation (translateY(-2px) with box-shadow increase) for interactive card feedback

Don't

Do not use decorative accent colors (lavender, pink, mint, etc.) for interactive states or CTAs; these are for theme customization only
Do not apply multiple shadows to buttons; the micro shadow is the standard
Do not change letter-spacing on display typography to zero; negative tracking is intentional and creates the visual identity
Do not use line-height values outside the specified scale; line-height must match the role (e.g., display=1.05, heading=1.15–1.33, body=1.5–1.67)
Do not apply border-radius inconsistently within a component type; buttons should all be 10px or 12px, not mixed
Do not scale buttons to non-standard heights; primary buttons are 48px, small buttons are 40px
Do not invent font sizes; every text role has an explicit size in the hierarchy table
Do not use the {colors.canvas} white (#FFFFFF) for interactive elements; it is reserved for page background and text on primary surfaces
Do not create new badge styles; only filled-default and success badges are defined
Do not apply card shadows to non-card elements; shadow assignment is specific to component role
Do not remove or simplify focus visible states; the 2px outline and ring shadow are required for accessibility compliance

8. Responsive Behavior

Breakpoints

Breakpoint	Width	Key Changes	Nav Links	Menu Toggle
Mobile	375px	Single column, 36px heading, hero-scale display, 0px section padding-x	Hidden	Visible
Tablet	768px	48px heading, 5-column grid, nav links visible	3 links	Hidden
Desktop (Medium)	1024px	53px heading, content centered, full nav visible	3 links	Hidden
Desktop (Large)	1280px	64px heading, max content width 1280px	3 links	Hidden
Desktop (XL)	1440px	Max-width enforced at 1280px, padding adjusts	3 links	Hidden

Key Responsive Changes

Heading scale increases from 36px → 48px → 53px → 64px as viewport expands
Body text remains 16px across all breakpoints (no resize)
Navigation links collapse to a menu toggle below 768px
Section padding (horizontal) stays at 0px; inner containers handle responsive margins
Grid expands from 3 columns (mobile) to 5 columns (tablet and up)
Max content width constrains to 1280px at desktop, with padding adjusting outside that boundary

Touch Targets

Minimum interactive element sizes for touch:

Buttons: 48px height (default), 40px height (small)
Links within text: No explicit minimum enforced; rely on font size and line-height for hit area
Form inputs: 40px minimum height; 8px minimum padding vertically
Navigation links: 36px minimum height, 14px font size
Badges and small interactive elements: 24–28px height for comfortable touch

Collapsing Strategy

Mobile (375px): Single-column content stack, hero displays at 36px, nav menu collapses to hamburger, card padding remains at 28px or less, full-width sections, all content edge-aligned with 0px outer padding
Tablet (768px): Multi-column grid activates, heading scales to 48px, nav links appear in header, cards begin to sit side-by-side with gutters, section max-width respected, padding-x remains 0px
Desktop (1024px+): Content max-width constrained to 1280px, heading scales to 53–64px, nav links remain visible, multi-card layouts expand horizontally, sticky header and footer remain full-width

All breakpoint transitions are fluid; no hard layout breaks occur between measurement points. Padding, margins, and sizing scale smoothly. Content remains readable and accessible across all widths.

9. Agent Prompt Guide

Quick Color Reference

Use this mapping for rapid implementation decisions:

Primary CTA & Brand Accent: Primary (#17191E) — dark charcoal for buttons, active states, and emphasis
Secondary Accent: Accent (#2563EB) — vibrant blue for hero bands and decorative highlights
Page Canvas & Surfaces: Canvas (#FFFFFF) — white, the default background
Primary Headings & High Contrast: Ink (#5F6673) — medium gray for impact text
Body Copy: Body (#6B7280) — balanced gray for reading comfort
Borders & Dividers: Hairline (#E5E7EB) — light gray, 1px strokes
Captions & Muted Text: Muted (#D4D4D8) — pale gray for secondary information
Success States: Success (#15803D) — dark green for validation and positive feedback
Info / Secondary Highlight: Info (#6D5CD3) — purple for informational content
Decorative Accents: Accent-1 through Accent-6 — lavender, slate, pink, mint, near-black, soft green; use for theme customization only, not interactive states

Iteration Guide

Button Implementation: Always use {colors.primary} for primary buttons, secondary button background is rgb(247, 248, 250), add micro shadow rgba(17, 19, 24, 0.05) 0px 1px 2px 0px, set border-radius to {rounded.md} (12px) or {rounded.sm} (10px) depending on size, apply focus ring outline when focused
Typography Hierarchy: Display sizes (display-xl, display-lg, display-md) are 64px, 48px, and 44px respectively with 800 weight and negative letter-spacing (do not normalize); headings use Plus Jakarta Sans 700–800 weight; body is 14–16px at 400 weight with 1.5 line-height minimum
Spacing: Base unit is 8px ({spacing.xs}); stack values in multiples (16px, 24px, 32px, 40px, 56px, 64px); pad cards with {spacing.xl} (24px) or {spacing.xxl} (32px); section breaks use {spacing.section} (56px) or {spacing.band} (64px)
Border Radius: Match radius to component: buttons are 10–12px, cards are 14–22px, inputs are 8px, badges are 9999px (pill); do not mix radii within a component type
Card Shadows: Default card uses rgba(0, 0, 0, 0.08) 0px 4px 12px 0px; featured/dark card uses premium shadow with inset light border; on hover, add rgba(15, 23, 42, 0.16) 0px 10px 28px -10px and translateY(-2px) transform
Form Inputs: Border is 1px {colors.hairline}, radius 8px, on focus apply 2px outline and shadow; placeholder and disabled states use muted color; padding is {spacing.md} (16px) minimum
Navigation: Plus Jakarta Sans 14px 400 weight, no background by default, underline on hover; small nav uses 500 weight with light gray background on hover
Responsive Design: Mobile breakpoint is 375px (1 column, heading 36px, nav toggle visible); tablet 768px (5-column grid, heading 48px, nav visible); desktop 1024px+ (max-width 1280px, heading 53–64px, sticky nav); always test at these three breakpoints
Focus & Accessibility: All interactive elements must have focus-visible state with 2px outline and ring shadow; disabled elements should reduce opacity to 0.5; links underline on hover
Decorative Elements: Use decorative accent colors (lavender, pink, mint) only for theme customization or non-interactive visual interest; never use them for buttons, links, or status states; reserve semantic colors (success, info) for their intended roles

10. Known Gaps

Interaction states not measured: The extraction provides CSS selectors for hover, focus, disabled, and active states for most components, but not all state variations were captured visually from the live site. Surfaces behind authentication (user dashboard, profile editor) were not accessed, so edit states, form errors, and post-authentication interactions are not documented here.
Nine decorative accent colors have no assigned role: Colors {colors.accent-1} through {colors.accent-6} plus {colors.accent-5} and {colors.neutral-2} / {colors.neutral-3} appear in the extracted palette but were not observed in use on measured pages. These are assumed to be part of a theme customization system or decorative palette and should not be used for interactive or semantic purposes without further confirmation.
Dark mode / theme variants: No distinct dark theme was extracted from the site. The featured dark card (rgb(22, 24, 29) background) is a single component variant, not a full theme. If a light/dark mode system exists, it was not captured in this extraction.
Component states: Specific error states, loading states, and skeleton screens were not observed or extracted. Form validation error styling is not documented beyond focus and disabled states.
Animation & transition timing: No timing functions, durations, or motion principles were extracted. Hover and active states are visual only; easing and transition timing are not specified.
Micro-interactions: Ripple effects, toast notifications, and other transient feedback patterns are not documented in this system.
Typography at extreme scales: Only the measured roles are documented. If the site renders text at sizes outside the listed hierarchy, those have not been captured.
Breakpoints beyond 1440px: The extraction stopped at 1440px; behavior on ultra-wide displays (1920px, 2560px+) is not documented.
Print and non-screen media: No print styles, PDF rendering, or offline behavior was captured.
Internationalization: Font stacks and character support for non-Latin scripts, CJK, or RTL layouts are not documented.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from profile.af

Primary

#17191E

Primary CTA, brand accent, active state

#2563EB

Secondary accent / hero band

#DFDBFB

Accent / decorative

#8B919C

Accent / decorative

#FD71AF

Accent / decorative

#BBF7D0

Accent / decorative

#101216

Accent / decorative

#C3E6CB

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#5F6673

Headings / primary text

#6B7280

Body copy

#D4D4D8

Captions, secondary text

#E5E7EB

1px borders and dividers

#646464

Neutral

#EEF0F3

Neutral

#F0FDF4

Neutral

Semantic

#15803D

Success

#6D5CD3

Info

Typography · Plus Jakarta Sans

caption12px · 400 · 16px

body14px · 400 · 22.75px

body18px · 400 · 29.7px

body14px · 600 · 20px

link14px · 400 · 20px

nav-link14px · 500 · 20px

caption11.52px · 700 · 17.28px

h212px · 700 · 16px

button14px · 600 · 20px

label12.8px · 600 · 19.2px

input14.4px · 400 · 24px

body15px · 400 · 22.5px

body16px · 600 · 24px

body14.4px · 400 · 21.6px

caption11.52px · 600 · 17.28px

h144px · 800 · 46.2px

body12px · 400 · 18px

h164px · 800 · 67.2px

h248px · 800 · 50.4px

h318px · 700 · 28px

list-item16px · 400 · 24px

display44px · 800 · 46.2px

body12.8px · 600 · 19.2px

body14px · 600 · 20px

body15.2px · 600 · 20px

body13px · 600 · 13px

heading12px · 700 · 16px

caption10px · 600 · 10px

display40px · 800 · 40px

body13px · 500 · 20px

body18px · 600 · 24px

caption11px · 600 · 16.5px

body12.8px · 600 · 20px

caption11px · 400 · 16.5px

h128px · 800 · 32.2px

link12px · 400 · 16px

button15.2px · 600 · 20px

caption12px · 600 · 16px

link16px · 400 · 24px

nav-link13.12px · 600 · 19.68px

body14px · 500 · 20px

body14px · 700 · 20px

h130px · 700 · 36px

label16px · 400 · 24px

body13.12px · 600 · 19.68px

caption11.52px · 400 · 16.128px

body12.8px · 400 · 19.2px

Typography · Inter

h130px · 800 · 36px

h224px · 700 · 32px

h318px · 600 · 28px

body18px · 500 · 28px

link12px · 400 · 18px

button14px · 600 · 20px

input14.4px · 400 · 24px

list-item16px · 400 · 24px

body14px · 400 · 20px

body16px · 500 · 24px

body14px · 500 · 20px

heading16px · 600 · 24px

caption12px · 400 · 16px

Spacing

8px

16px

20px

12px

32px

80px

24px

4px

Elevation

rgba(17, 19, 24, 0.05) 0px 1px 2px 0px

rgba(0, 0, 0, 0.08) 0px 4px 12px 0px

rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.8) 0px 40px 80px -40px

rgb(255, 255, 255) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 6px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

Components · 6

Remixes of profile.af

Latest remixes

No public remixes yet. Be the first to make one.

Remix it