Palette
Falcon theme
Slate blues throughout — an indigo-grey accent in the light mode, a sage-teal one after dark, and a cool grey ladder.
background
card
primary
chart-2
success
danger
Install
The file lands as app/vibra-falcon.css. Import it after your globals and set data-preset="falcon" on <html>, or on any wrapper.
$
npx shadcn@latest add @vibra/theme-falconNeeds the @vibra registry in your components.json — set it up once.
The stylesheet
/* Falcon — slate blues throughout: an indigo-grey accent in the light mode and a sage-teal one after dark.
*
* After tinte's palette (https://www.shadcnblocks.com/theme/falcon), mapped onto every token
* vibra.css defines and held to Vibra's contrast floors: where a value moved,
* it moved the least it could — a fill that was too light to read as a word
* is the same hue, deeper. The typefaces the original names are not carried;
* a preset is colour, radius and elevation, and the face is the page's own.
*
* Generated by scripts/build-presets.ts. Edit scripts/presets/sources, not this file. */
[data-preset="falcon"] {
--radius: 10px;
/* Planes. */
--background: oklch(0.976 0.003 264.5);
--surface: oklch(0.988 0.003 264.5);
--card: oklch(0.999 0.001 197.1);
--popover: oklch(0.999 0.001 197.1);
--muted: oklch(0.951 0.007 260.7);
--secondary: oklch(0.936 0.003 264.5);
--accent: oklch(0.936 0.003 264.5);
/* Ink. --faint-foreground is for eyebrows, meta and axis titles at 11px/600 and up — never body copy. */
--foreground: oklch(0.421 0.042 274);
--card-foreground: var(--foreground);
--popover-foreground: var(--foreground);
--muted-foreground: oklch(0.511 0.015 266.6);
--faint-foreground: oklch(0.511 0.015 266.6);
--secondary-foreground: var(--foreground);
--accent-foreground: var(--foreground);
/* The accent, and the aliases that carry it. */
--brand: oklch(0.421 0.042 274);
--brand-foreground: oklch(1 0 0);
--brand-muted: oklch(0.93 0.017 274);
--primary: var(--brand);
--primary-foreground: var(--brand-foreground);
--ring: var(--brand);
/* Lines. --input is the field boundary, so it carries 3:1 against the page and a card. */
--border: oklch(0.918 0.01 261.8);
--rule: oklch(0.783 0.01 261.8);
--input: oklch(0.649 0.009 258.3);
--chart-grid: oklch(0.918 0.01 261.8);
/* Semantic tones on opaque tints. */
--success: oklch(0.5 0.14 150);
--success-foreground: oklch(0.99 0.003 150);
--success-muted: oklch(0.95 0.04 150);
--warning: oklch(0.5 0.11 75);
--warning-foreground: oklch(0.99 0.003 75);
--warning-muted: oklch(0.95 0.04 75);
--danger: oklch(0.5 0.2 25);
--danger-foreground: oklch(0.99 0.003 25);
--danger-muted: oklch(0.95 0.04 25);
--info: oklch(0.5 0.14 250);
--info-foreground: oklch(0.99 0.003 250);
--info-muted: oklch(0.95 0.04 250);
--destructive: var(--danger);
/* Chart palette: the accent first when it is a colour, then the source's hues, then three of Vibra's own. */
--chart-1: var(--brand);
--chart-2: oklch(0.585 0.058 263.5);
--chart-3: oklch(0.644 0.025 272.7);
--chart-4: oklch(0.464 0.049 263.2);
--chart-5: oklch(0.353 0.039 274.3);
--chart-6: oklch(0.55 0.12 34);
--chart-7: oklch(0.56 0.14 154);
--chart-8: oklch(0.5 0.02 264.5);
--chart-positive: var(--success);
--chart-negative: var(--danger);
--chart-neutral: var(--muted-foreground);
--chart-axis: var(--muted-foreground);
/* The sidebar sits one plane below the content it frames. */
--sidebar: oklch(0.976 0.003 264.5);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--brand);
--sidebar-primary-foreground: var(--brand-foreground);
--sidebar-accent: oklch(0.999 0.001 197.1);
--sidebar-accent-foreground: var(--foreground);
--sidebar-border: oklch(0.918 0.01 261.8);
--sidebar-ring: var(--brand);
/* Elevation. */
--shadow-sheet: 0px 2px 4px 0px oklch(0.0000 0.0000 0.0000 / 0.10), 0px 1px 2px -1px oklch(0.0000 0.0000 0.0000 / 0.10);
--shadow-float: 0px 2px 4px 0px oklch(0.0000 0.0000 0.0000 / 0.10), 0px 4px 6px -1px oklch(0.0000 0.0000 0.0000 / 0.10);
--shadow-modal: 0px 2px 4px 0px oklch(0.0000 0.0000 0.0000 / 0.10), 0px 8px 10px -1px oklch(0.0000 0.0000 0.0000 / 0.10);
--overlay: oklch(0 0 0 / 40%);
}
.dark [data-preset="falcon"],
[data-preset="falcon"].dark,
[data-preset="falcon"] .dark {
/* Planes. */
--background: oklch(0.182 0 0);
--surface: oklch(0.207 0 0);
--card: oklch(0.154 0 0);
--popover: oklch(0.154 0 0);
--muted: oklch(0.205 0.011 8.5);
--secondary: oklch(0.317 0 0);
--accent: oklch(0.317 0 0);
/* Ink. --faint-foreground is for eyebrows, meta and axis titles at 11px/600 and up — never body copy. */
--foreground: oklch(1 0 0);
--card-foreground: var(--foreground);
--popover-foreground: var(--foreground);
--muted-foreground: oklch(0.715 0.004 17.2);
--faint-foreground: oklch(0.715 0.004 17.2);
--secondary-foreground: var(--foreground);
--accent-foreground: var(--foreground);
/* The accent, and the aliases that carry it. */
--brand: oklch(0.753 0.032 186.3);
--brand-foreground: oklch(0 0 0);
--brand-muted: oklch(0.28 0.016 186.3);
--primary: var(--brand);
--primary-foreground: var(--brand-foreground);
--ring: var(--brand);
/* Lines. --input is the field boundary, so it carries 3:1 against the page and a card. */
--border: oklch(0.267 0.003 17.3);
--rule: oklch(0.381 0.003 17.3);
--input: oklch(0.496 0.003 17.3);
--chart-grid: oklch(0.287 0.003 17.3);
/* Semantic tones on opaque tints. */
--success: oklch(0.8 0.14 150);
--success-foreground: oklch(0.16 0.03 150);
--success-muted: oklch(0.3 0.04 150);
--warning: oklch(0.8 0.11 85);
--warning-foreground: oklch(0.16 0.03 85);
--warning-muted: oklch(0.3 0.04 85);
--danger: oklch(0.8 0.14 25);
--danger-foreground: oklch(0.16 0.03 25);
--danger-muted: oklch(0.3 0.04 25);
--info: oklch(0.8 0.14 250);
--info-foreground: oklch(0.16 0.03 250);
--info-muted: oklch(0.3 0.04 250);
--destructive: var(--danger);
/* Chart palette: the accent first when it is a colour, then the source's hues, then three of Vibra's own. */
--chart-1: var(--brand);
--chart-2: oklch(0.626 0.084 262.7);
--chart-3: oklch(0.811 0.026 187.5);
--chart-4: oklch(0.503 0.072 262.6);
--chart-5: oklch(0.499 0.027 186);
--chart-6: oklch(0.76 0.11 306.3);
--chart-7: oklch(0.74 0.12 66.3);
--chart-8: oklch(0.72 0.02 0);
--chart-positive: var(--success);
--chart-negative: var(--danger);
--chart-neutral: var(--muted-foreground);
--chart-axis: var(--muted-foreground);
/* The sidebar sits one plane below the content it frames. */
--sidebar: oklch(0.182 0 0);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--brand);
--sidebar-primary-foreground: var(--brand-foreground);
--sidebar-accent: oklch(0.14 0 0);
--sidebar-accent-foreground: var(--foreground);
--sidebar-border: oklch(0.267 0.003 17.3);
--sidebar-ring: var(--brand);
/* Elevation. */
--shadow-sheet: inset 0 1px 0 oklch(1 0 0 / 5%);
--shadow-float: 0 12px 32px -8px oklch(0 0 0 / 60%), inset 0 1px 0 oklch(1 0 0 / 6%);
--shadow-modal: 0 24px 64px -12px oklch(0 0 0 / 70%);
--overlay: oklch(0 0 0 / 60%);
}